Flex的事件驱动问题

说，Flex一切都是事件，flex是事件驱动的。（Flex is an event driven programming model, everything (and I mean everything) happens due to an event. ）。

这个问题的起源是我写了一个读取VBox高度的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#99ccff" initialize="init()">
<mx:Style>
</mx:Style>
<mx:Script>
	<!--[CDATA[
		import mx.collections.XMLListCollection;
		import mx.controls.List;
		 import mx.collections.ArrayCollection;
         [Bindable]
		 public var left:XML=
			<list>
                <info label="モーニング娘。">
                	</info>
              </list>;
		[Bindable]
		private var leftList:XMLListCollection= new XMLListCollection(left.info);
	
		// init the whole app.
		 private function init():void
		 {
		 	leftTree.dataProvider=leftList;	
		 	leftTree.selectedIndex=0;
		 	
		 	//srightVBox.backgroundImage="http://www.lovezaoan.cn/attachment/200905/24/25_1243179290Yp2p.jpg"; 	
		 	
		 	test.text = leftCanvas.width+ " "+hdBox.height;
		 }
		 
		 // init the right when 1st level nodes are selected in the left
		 private function initRight():void{
		 	
		 }
	]]-->
</mx:Script>
	<mx:HDividedBox width="100%" height="100%" id="hdBox">
	<mx:Canvas height="100%" width="200" id="leftCanvas">
	
	<mx:Tree width="100%" height="100%" backgroundColor="#ff6ac8" id="leftTree"  labelField="@label" fontSize="14" top="0" left="0" >
			        
		</mx:Tree>
		<mx:Panel height="60" headerHeight="10" bottom="0" width="100%" left="0">
		<mx:HBox>
			
		
			<mx:Image source="../resource/logo.gif">
			</mx:Image>
			<mx:Label text="爱早安出品" fontSize="20" fontWeight="bold">
				
			</mx:Label>
			</mx:HBox>
		</mx:Panel>
	</mx:Canvas>
		<mx:VBox id="rightVBox" height="100%" backgroundImage="@Embed(source='../resource/mm.jpg')" backgroundSize="100%"> 
			<mx:Text id="test">
				
			</mx:Text>
		</mx:VBox>
	</mx:HDividedBox>
</mx:Application>



// init the whole app.
          private function init():void
          {
              leftTree.dataProvider=leftList;    
              leftTree.selectedIndex=0;
              
              //srightVBox.backgroundImage="http://www.lovezaoan.cn/attachment/200905/24/25_1243179290Yp2p.jpg";     
              
              test.text = leftCanvas.width+ " "+hdBox.height; 
          }上面的粗体是读leftCavas和hdBox的大小，但是得到的是0.

根据上面的文章，得到的0的原因是没有理解flex中的组件加载顺序。根据上面文章提供的例子。
http://www.onflex.org/flexapps/applications/EventFlow/srcview/index.html 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    backgroundGradientColors="[#67cbff, #fcffff]" 
    color="#000000" 
    fontSize="12"    
    preinitialize="report( event , 'preinitialize' )"
    initialize="report( event , 'initialize' )"
    creationComplete="report( event , 'creationComplete' )"
    applicationComplete="report( event , 'applicationComplete' )"
    >
    
    <mx:Script>
        <!--[CDATA[    
                    
            [Bindable]
            
            public var outTextData:String="";
            
            public function report( event:Event , value:String ):void
            {
                outTextData += String( flash.utils.getTimer() ) + 'ms >> ' 
                + event.currentTarget + '.' + value + '/n';    
            }
            
        ]]-->
    </mx:Script>
    
    <mx:TextArea
        id="outTextArea"
        text="{ outTextData }"
        right="10" left="10" top="50" bottom="10" alpha="0.5"
        wordWrap="false"
        initialize="report( event , 'initialize' )"
        creationComplete="report( event , 'creationComplete' )" 
        />
    
    <mx:Button 
        y="10" height="30" left="168" width="150"
        id="HelloButton"
        label="Say Hello"
        initialize="report( event , 'initialize' )"
        creationComplete="report( event , 'creationComplete' )" 
        rollOver="report( event , 'rollOver' )" 
        rollOut="report( event , 'rollOut' )" 
        click="report( event , 'click > Hello!' )" 
        />
        
    <mx:Button
        id="GoodByeButton" 
        label="Say Goodbye" 
        y="10" left="10" height="30" width="150" color="#000000"
        initialize="report( event , 'initialize' )"
        creationComplete="report( event , 'creationComplete' )" 
        click="report( event , 'click > Goodbye!' )" 
        />
        
    <mx:Button
        id="ClearButton" 
        label="Clear" 
        y="10" left="326" height="30" color="#000000" right="10"        
        initialize="report( event , 'initialize' )"
        creationComplete="report( event , 'creationComplete' )" 
        click="outTextData='';report( event , 'click' )" 
         />
    
</mx:Application>

结果：
http://www.onflex.org/flexapps/applications/EventFlow/

  
 
  &amp;amp;amp;amp;amp;amp;amp;lt;span style=&amp;amp;amp;amp;amp;amp;amp;quot;font-family: courier new,courier;&amp;amp;amp;amp;amp;amp;amp;quot; mce_style=&amp;amp;amp;amp;amp;amp;amp;quot;font-family: courier new,courier;&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;object classid=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; id=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;EventFlow&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; width=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; codebase=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;param name=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;movie&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; value=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;EventFlow.swf&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;param name=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;quality&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; value=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;high&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;param name=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;bgcolor&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; value=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;#67cbff&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;param name=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;allowScriptAccess&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; value=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;sameDomain&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;embed src=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;EventFlow.swf&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; mce_src=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;EventFlow.swf&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; quality=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;high&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; bgcolor=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;#67cbff&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; width=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;EventFlow&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; align=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;middle&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; play=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;true&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; loop=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;false&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; quality=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;high&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; allowScriptAccess=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;sameDomain&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;application/x-shockwave-flash&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; pluginspage=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;http://www.adobe.com/go/getflashplayer&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/embed&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;amp;gt; 
 

  &amp;amp;amp;amp;amp;amp;amp;lt;span style=&amp;amp;amp;amp;amp;amp;amp;quot;font-family: courier new,courier;&amp;amp;amp;amp;amp;amp;amp;quot; mce_style=&amp;amp;amp;amp;amp;amp;amp;quot;font-family: courier new,courier;&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;amp;gt; 
 

  &amp;amp;amp;amp;amp;amp;amp;lt;span style=&amp;amp;amp;amp;amp;amp;amp;quot;font-family: courier new,courier;&amp;amp;amp;amp;amp;amp;amp;quot; mce_style=&amp;amp;amp;amp;amp;amp;amp;quot;font-family: courier new,courier;&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;amp;gt; 
 
 
167ms >> EventFlow0.preinitialize
 183ms >> EventFlow0.outTextArea.initialize
 187ms >> EventFlow0.HelloButton.initialize
 188ms >> EventFlow0.GoodByeButton.initialize
 189ms >> EventFlow0.ClearButton.initialize
 189ms >> EventFlow0.initialize
 243ms >> EventFlow0.outTextArea.creationComplete
 243ms >> EventFlow0.HelloButton.creationComplete
 243ms >> EventFlow0.GoodByeButton.creationComplete
 244ms >> EventFlow0.ClearButton.creationComplete
 244ms >> EventFlow0.creationComplete
 246ms >> EventFlow0.applicationComplete

从这个结果看出，组件的初始化过程是：

applicaiton先preinitialize，然后是各个组件依次initialize，然后是application的initialize，然后是各个组件依次creationComplete，然后是application的creationComplete，最后是applicatonComplete。

所以，我最初的代码里面把application的initialize理解成了html中body的onload了，所以在这个时候做一些对其他组件的初始化操作，包括获取leftCanvas和hdBox的大小的时候就不对了。以leftCanvas为例，这个时候它没有初始化完毕，所以其大小为0是正常的。

所以，代码要修改为：

creationComplete="init()"

即，不用applicaiton的initialize事件，而是creationComplete事件，因为这个时候，application下的组件都已经创建完毕了。这个时候它们有height和width的值了。