[flexcoders] Difference between adding child at initialization and when after creationComplete event is dispatched

[Sébastien Tromp]

Hello everyone,

I have a difference in behaviour using Flex which I cannot understand (I am
rather new to this). Here is the thing:

I have a FarmBoard.mxml component that extends Canvas, which contains:

    <mx:Grid x="12" y="70" width="448" height="271">
        <mx:GridRow width="100%" height="100%">
            <farm:FarmGridItem styleName="gridItem" width="100%"
height="100%" id="gridCell2"/>
            <farm:FarmGridItem styleName="gridItem" width="100%"
height="100%" id="gridCell5"/>
           ...
        </mx:GridRow>
    </mx:Grid>

The FarmGridItem is an ActionScript component defined like this:

    public class FarmGridItem extends GridItem
    {
        private var _innerCanvas:Canvas;

        public function FarmGridItem()
        {
            trace(this + "\t Initializing farm grid item");
            super();

            var canvas1:Canvas = new Canvas();
            canvas1.percentWidth = 100;
            canvas1.percentHeight = 100;
            canvas1.setStyle("backgroundColor", "0xFFFFFF");
            canvas1.setStyle("backgroundAlpha", "0.0");
            canvas1.addEventListener(DragEvent.DRAG_ENTER, onDragEnter);
            super.addChild(canvas1);

            _innerCanvas = new Canvas();
            _innerCanvas.percentWidth = 90;
            _innerCanvas.percentHeight = 90;
            _innerCanvas.setStyle("horizontalCenter", "0");
            _innerCanvas.setStyle("verticalCenter", "0");
            canvas1.addChild(_innerCanvas);

            // For debugging purposes
            var _innerCanvas2:Canvas = new Canvas();
            _innerCanvas2.setStyle("backgroundColor", "0xFFFFFF");
            _innerCanvas2.setStyle("backgroundAlpha", "1.0");
            this.addChild(_innerCanvas2);
        }

        override public function addChild(child:DisplayObject):DisplayObject
        {
            trace(this + "\t Adding child: " + child);
            (child as UIComponent).percentHeight = 90;
            (child as UIComponent).percentWidth = 90;
            return _innerCanvas.addChild(child);
        }

Basically its role is to create "smaller" objects on the main grid (I did
not find another way to make sure that everytime I add an object to my main
Grid, it takes only, say, 90% of the cell space).
Please note the folowing piece of code in the constructor that I have added
for debugging purposes.

            var _innerCanvas2:Canvas = new Canvas();
            _innerCanvas2.setStyle("backgroundColor", "0xFFFFFF");
            _innerCanvas2.setStyle("backgroundAlpha", "1.0");
            this.addChild(_innerCanvas2);

With this code, I get a grid full of white cells (which is what I want). If
I remove the above piece of code to call it from another place  (this
function gets called after the creationComplete event is dispatched; I use
it to initialize the data on each of my grid cells):

        private function initializeFarm():void
        {
                var gridItem:FarmGridItem =
FarmGridItem(getFarmView()["gridCell5"]);
                if (gridItem != null)
                {
                    // We really go through this piece of code
                    var _innerCanvas2:Canvas = new Canvas();
                    _innerCanvas2.setStyle("backgroundColor", "0xFFFFFF");
                    _innerCanvas2.setStyle("backgroundAlpha", "1.0");
                    gridItem.addChild(_innerCanvas2);
                }
            }
        }

However, after the above code executes, the background of my cells
stubbornly keeps on remaining transparent (even though I have a log that
says FarmBoard226.Grid237.GridRow238.gridCell5     Adding child:
CanvasView375)
I do not know if I have provided enough information, but does anyone have a
clue on why the behaviour is different?

Thanks a lot,
-- 
Sebastien Tromp