8 Replies Latest reply on Nov 27, 2006 6:44 PM by lenny2

    Adding children at runtime

    lenny2
      I've got a simple application which contains a Canvas object. I need to add children to this canvas at runtime based on a remote call to a cfc which returns an array of structures containing the data required to build the children. When I run the app the base Canvas object displays but the children do not even though I know that they exists. I know this because after the remote call result handler finishes building the children, I do an Alert.show of mainCanvas.getChildren().length and it returns the number I expect it to so I know the children are there but can't figure out why the won't display.

      Another example of something that should be simple but has cost me hours and hours trying to figure out. I'm about to give up on this technology altogether.

      The code is straighforward: I make the rpc call on the initialize event of the Application node. This calls my cfc method which returns an array of structures. The event handler for the rpc call loops over the results and builds the children. At the end of each iteration I call the addChild method of the main canvas object as such mainCanvas.addChild(newCanvasObject). When I run the app, I get no errors but all that displays is the main canvas.

      Any ideas are MUCH appreciated.

        • 1. Re: Adding children at runtime
          peterent Level 2
          When you use ActionScript to create components and add them to a container you also have to set their size. Your objects have been created with width and height equal to zero. Before you call addChild() just set their width and height properties - even to something specific (eg, 50x20) just to prove they exist.

          Ideally, you should size and position them by overriding updateDisplayList in the component which is creating them.
          • 2. Re: Adding children at runtime
            lenny2 Level 1
            Peter, thanks for the reply. I am doing that actually. I set the height, width and x, y coordinates. Here is the code that is creating the child container objects...

            private function createBooths():void {
            var i:int;
            //loop over boothData which is the event.results object
            for (i = 0; i < boothData.length; i++) {
            var newBooth:Canvas = new Canvas();
            var newBoothNumber:Label = new Label();
            var xcoord:Number=boothData .XCOORD;
            var ycoord:Number=boothData
            .YCOORD;
            var w:Number=boothData .W;
            var h:Number=boothData
            .H;
            var ttip:String=boothData .COMPNAME;
            var bgcolor:String="#FFFFFF";
            var bncolor:String="#000000";
            var bn:Number=boothData
            .BN;

            if(boothData .TAKEN == "taken") {
            bgcolor="#800000";
            bncolor="#FFFFFF";
            }
            // set width and height and x, y coordinates
            newBooth.x=xcoord;
            newBooth.y=ycoord;
            newBooth.width=w;
            newBooth.height=y;

            newBooth.setStyle("backgroundColor",bgcolor);
            newBooth.setStyle("textAlign","center");
            newBooth.setStyle("borderwidth", 1);
            newBooth.toolTip=ttip;
            //create label to hold booth number
            newBoothNumber.x = 22;
            newBoothNumber.y = 5;
            newBoothNumber.setStyle("color",bncolor);
            newBoothNumber.setStyle("textAlign","center");
            newBoothNumber.text = bn.toString();
            newBooth.addChild(newBoothNumber);

            fpMainDiv.addChild(newBooth);
            }
            }
            • 3. Re: Adding children at runtime
              lenny2 Level 1
              FYI...in the top where I am declaring the vars I noticed that when I pasted the code in here, the "[" i "]" isn't showing up but it is there in the code. It looks this form interpreted as an italics http tag.
              • 4. Re: Adding children at runtime
                ntsiii Level 3
                Can you successfully instantiate a control manually?

                Are you sure you are not placing them off screen? Have you debugged or hard coded the x,y values?

                Tracy
                • 5. Re: Adding children at runtime
                  lenny2 Level 1
                  Tracy, good thinking. But I have tried hardcoding all the values. The main container object is at x=0, y=0 and is 500 by 300 and is written using <mx:Canvas> tag. The child object (a canvas) is at x=120, y=10 and is 50 by 50. The background color of the child is maroon and is set using the object.setStyle() method. Those values are hard coded into my action script. I assumed that the x, y attributes are relative to the parent but even if not they should be visible as they are within the width and height of the application and parent containers.
                  • 6. Re: Adding children at runtime
                    ntsiii Level 3
                    Can you make this work in a simple case?

                    I am able to add a canvas and add controls to it.

                    There must be something in you code that is breaking this.

                    Take out the loop, add a canvas manually. That has to work, then add in the rest of the code, making sure it still works, then add back the loop.

                    It may be some bad data is breaking the loop or something.

                    Tracy
                    • 7. Re: Adding children at runtime
                      lenny2 Level 1
                      Tracy, thanks for the suggestion. I am able to add a child canvas to the main canvas. I then added a for loop and looped i times where i=3 and the x and y coordinates for the new children are i * 10. All three children were created and are visible in the dimensions and background color I specified. I guess I need to revisit the original code although it is basically identical to the test code I just wrote.

                      I'll repost for posterity when I get it to work.
                      • 8. Re: Adding children at runtime
                        lenny2 Level 1
                        I apologize for wasting everyone's time. Peter's suggestion was right on...height and width of added children default to 0. I thought I was setting them both but I ran the app in debug and found that the height wasn't getting set and it was because of this line of code newBooth.height=y; ..the y should have been an h.

                        Geez.