Flex的事件驱动问题

文章，http://www.onflex.org/ted/2007/02/flex-instantiation-life-cycle-and-event.php ，说，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>  </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>  </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/

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的值了。

关于flex的事件还可以参考：http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000492.html

刚看到： About startup order(http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_03.html),有意义，改天研究。

Flex的事件驱动问题

猜你喜欢