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

[Alex Harui]

creationComplete is after the component has been measured.  Adding children 
then may not be causing a re-measure.

Alex Harui
Flex SDK Developer
Adobe Systems Inc.<http://www.adobe.com/>
Blog: http://blogs.adobe.com/aharui

From: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On Behalf 
Of Sébastien Tromp
Sent: Sunday, August 23, 2009 1:52 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Difference between adding child at initialization and 
when after creationComplete event is dispatched



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