Flex 应用的初始化顺序（转）

preloader->systemManager->FlexApplication started… 
然后才是 

preinitialize 
在 所有的初始化之前触发,没有子组件的定义,但是可以引用组件的变量. 

initialize 
当所有子组件生成完成后触发,在这 个时间点还没有组件被渲染出来. 

creationComplete 
组件定义完成并已经在显示列表. 

applicationComplete 
所 有的组件初始化完成并显示. 


首 先介绍一下SystemManager. SystemManager是Flex应用的主控 者, 它控制着应用窗口, Application实例, 弹出窗口, cursors, 并管理着ApplicationDomain中的 类. SystemManager是FlashPlayer实例化的第一个类, 它存储了主应用窗口的大小和位置信息, 保存其子组件比如:浮动弹出窗口 和模态窗口的痕迹. 通过SystemManager可以获得内嵌字体,样式和document对象. 
自定义的可视化组件 (UIComponent的子类)只有在调用过addChild()后, 才会有一个SystemManager赋给他们, 之前是Null. 所以在自 定义可视化组件的构造函数中不要使用SystemManager. 

通常, Application对象创建时, 发生如下事件: 
1. 实 例化Application对象 
2. 初始化Application.systemManager 
3. Application在初 始化过程之前, 派发预初始化事件. 
4. 调用createChild(). 此时, 所有应用组件被创建, 所有组件的 createChild()被调用. 
5. Application派发初始化事件, 表明所有的组件初始化完毕. 
6. 派发 creationComplete事件 
7. Application对象添加到显示列表中 
8. 派发 applicationComplete事件 

大 多数情况下, 我们使用<mx:Application>来创建 application对象, 但如果使用ActionScript来创建的话, 那么建议不要在application的构造函数中创建组件, 推荐在 crateChildren函数中, 主要是从性能方面考虑. 

Flash包含的是一个时间线上的多个帧, 而Flex的SWF只包含2 个帧. SystemManager, Preloader, DownloadProgressBar和少量工具类都在第一帧, 剩下的包括应用代码 / 内嵌资源全都在第二帧中. 当Flash Player下载下载SWF时, 只要接收到第一帧内足够的数据, 就会实例化 SystemManager, 由它来创建Preloader, 然后创建DownloadProgressBar, 这两个对象会察看剩余字节的传输过 程. 当第一帧的所有字节传输完毕后, SystemManager发送enterFrame到第二帧, 然后是其他事件. 最后Application 对象派发applicationComplete事件. 

Flex 是一个事件驱动的编程模型, 任何事情的发生, 其背后必然存在一个 事件. 而开发者第一次看到MXML时, 很难体会到一个Xml标记的应用的事件流和实例化的生命周期. 这个对于HTML和Flash的开发者尤其会感 到困惑, 因为其熟悉的方式与Flex的一点也不相似. HTML的实例化是从上到下的, Flash的执行是从Frame0开始一帧帧运行的. 而 Flex则又有不同. 

从我们开始学习Flex时, 我们就需要了解事件流和MXML的实例化. 我非常困惑因为我实在难以理解什么样的 事件会被触发或者事件什么时候会被触发. 关键是要理解事件的基础并亲自观察事件流的初始化. 

我们来看一个简单的MXML的应用. 

<?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>


这 个应用运行时, 输出了实例流程和事件流. 这校我们就能够看到所有事件的触发顺序. 可以发现应用启动后, 事件的顺序是一定的. 下面是输出的内 容: 

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 

一 旦applicationComplete事件触发后, 组件就会在鼠标事件派发后触发自己的事件. 

1807ms >> EventFlow0.HelloButton.rollOver 
2596ms >> EventFlow0.HelloButton.rollOut 
2954ms >> EventFlow0.HelloButton.rollOver 
3170ms >> EventFlow0.HelloButton.rollOut 
3543ms >> EventFlow0.HelloButton.rollOver 
4052ms >> EventFlow0.HelloButton.click > Hello! 
4267ms >> EventFlow0.HelloButton.click > Hello! 
4474ms >> EventFlow0.HelloButton.click > Hello! 
4569ms >> EventFlow0.HelloButton.rollOut 
4907ms >> EventFlow0.GoodByeButton.click > Goodbye! 
5130ms >> EventFlow0.GoodByeButton.click > Goodbye!