Flex Application 初始化顺序

原文地址： http://www.jexchen.com

大家都知道，我们在编写Flex应用程序时，通常是以<mx:Application>标签作为开头，实际上，Flex应用程序在启动运行的时候并不是直接从Application开始运行，在这之前还有一部分悄悄的先运行了，正如大家所看到的，当我们运行编写好的Flex应用程序时，尽管我们没有编写任何与启动进度载入条相关的代码，但无一例外的，应用程序均会为我们自动加上这一部分。因此才有我们看到的如下图所示的标准的Flex loading载入条。

    通常我们所说的Flex应用程序，本质上来说是基于Flex框架、采用ActionScript 3.0编写的Flash应用程序，从这一点来说，它和普通的Flash应用程序没有任何差别。相对来说，传统的使用Flash IDE（如Flash CS3）创建Flash程序时更多的基于“时间线”（Timeline）及“帧”（Frame）的概念，更易于设计师理解；而基于Flex框架来创建的 Flash应用程序更多是强调程序性，很少提及“时间线”与“帧”的概念，更易于程序员理解。其实Flex应用程序一样也有时间线，只是这部分由Flex 框架隐藏起来了，通常不为大家所熟悉，在默认创建Flex程序时，这一切Flex已帮我们完成了，但了解这部分内容更有助于大家对Flex应用程序的启动有更深刻的认识，以便能对程序更灵活的控制与发挥~~


    我们来看看上面这幅示意图，Flex应用程序共由两帧组成，第1帧为preloader部分，第2帧为主应用程序部分，此两部分由Flex应用程序的根SystemManager统管，SystemManager是flash.display.MovieClip的子类，影片剪辑（movie clip）支持帧。由于swf属于一种渐进式（progressive）下载的格式，正是由于swf格式这个特性，Flash Player并不需要等待整个程序下载完成便可直接访问已载入帧的内容，因此第一帧通常用来作为应用程序载入时的loading画面显示，一般来说，第一帧包含的内容应该尽可能的少（在第一帧中尽量不要含有Flex框架的组件），以便能很快的下载并立即显示；第二帧才是主应用程序真正的内容，一旦 SystemManager实例进入到第二帧后，即开始内部主应用程序运行的生命周期（life cycle），也就是进入我们最为熟悉的<mx:Application>运行的部分（SystemManger实例有一 application的属性，在第1帧时，此属性为null，当进入到第2帧时，该属性才指向真正的主程序application实例）记住我们开始所说的，Flex应用程序总的来说是以事件驱动的程序。

    在程序进入第2帧，主程序application开始运行后，便会相应的触发相应的一系列事件，按事件发生的先后顺序依次来介绍：

preinitialize

应用程序application已实例化，但此时还未创建任何相关的孩子组件（child component）

initialize

此时，创建了相应的孩子组件，但还未对这些子组件进行布局

creationComplete

应用程序application完成全部实例化，并完成所有子组件的布局

apllicationComplete

上面三处事件的完成，表明application内部启动的整个进程完成，接下来便会通知SystemManager派发applicationComplete事件。此时，启动程序启动完成并准备运行。


    Flash包含的是一个时间线上的多个帧, 而Flex的SWF只包含2个帧. SystemManager, Preloader, DownloadProgressBar和少量工具类都在第一帧, 剩下的包括应用代码/ 内嵌资源全都在第二帧中. 当Flash Player下载下载SWF时, 只要接收到第一帧内足够的数据, 就会实例化SystemManager, 由它来创建Preloader, 然后创建DownloadProgressBar, 这两个对象会察看剩余字节的传输过程. 当第一帧的所有字节传输完毕后, SystemManager发送enterFrame到第二帧, 然后是其他事件. 最后Application对象派发applicationComplete事件.
    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函数中, 主要是从性能方面考虑.
    Flex 是一个事件驱动的编程模型, 任何事情的发生, 其背后必然存在一个事件. 而开发者第一次看到MXML时, 很难体会到一个Xml标记的应用的事件流和实例化的生命周期. 这个对于HTML和Flash的开发者尤其会感到困惑, 因为其熟悉的方式与Flex的一点也不相似. HTML的实例化是从上到下的, Flash的执行是从Frame0开始一帧帧运行的. 而Flex则又有不同.

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

 

 1. <?xml version="1.0" encoding="utf-8"?> 
   2. <mx:Application  
   3.     xmlns:mx="http://www.adobe.com/2006/mxml"  
   4.     layout="absolute" 
   5.     backgroundGradientColors="[#67cbff, #fcffff]"  
   6.     color="#000000"  
   7.     fontSize="12"     
   8.     preinitialize="report( event , 'preinitialize' )" 
   9.     initialize="report( event , 'initialize' )" 
  10.     creationComplete="report( event , 'creationComplete' )" 
  11.     applicationComplete="report( event , 'applicationComplete' )" 
  12.     > 
  13.      
  14.     <mx:Script> 
  15.         <![CDATA[     
  16.                      
  17.             [Bindable] 
  18.              
  19.             public var outTextData:String=""; 
  20.              
  21.             public function report( event:Event , value:String ):void 
  22.             { 
  23.                 outTextData += String( flash.utils.getTimer() ) + 'ms >> '  
  24.                 + event.currentTarget + '.' + value + '\n';     
  25.             } 
  26.              
  27.         ]]> 
  28.     </mx:Script> 
  29.      
  30.     <mx:TextArea 
  31.         id="outTextArea" 
  32.         text="{ outTextData }" 
  33.         right="10" left="10" top="50" bottom="10" alpha="0.5" 
  34.         wordWrap="false" 
  35.         initialize="report( event , 'initialize' )" 
  36.         creationComplete="report( event , 'creationComplete' )"  
  37.         /> 
  38.      
  39.     <mx:Button  
  40.         y="10" height="30" left="168" width="150" 
  41.         id="HelloButton" 
  42.         label="Say Hello" 
  43.         initialize="report( event , 'initialize' )" 
  44.         creationComplete="report( event , 'creationComplete' )"  
  45.         rollOver="report( event , 'rollOver' )"  
  46.         rollOut="report( event , 'rollOut' )"  
  47.         click="report( event , 'click > Hello!' )"  
  48.         /> 
  49.          
  50.     <mx:Button 
  51.         id="GoodByeButton"  
  52.         label="Say Goodbye"  
  53.         y="10" left="10" height="30" width="150" color="#000000" 
  54.         initialize="report( event , 'initialize' )" 
  55.         creationComplete="report( event , 'creationComplete' )"  
  56.         click="report( event , 'click > Goodbye!' )"  
  57.         /> 
  58.          
  59.     <mx:Button 
  60.         id="ClearButton"  
  61.         label="Clear"  
  62.         y="10" left="326" height="30" color="#000000" right="10"         
  63.         initialize="report( event , 'initialize' )" 
  64.         creationComplete="report( event , 'creationComplete' )"  
  65.         click="outTextData='';report( event , 'click' )"  
  66.          /> 
  67.      
  68. </mx:Application> 

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

   1. 167ms >> EventFlow0.preinitialize
   2. 183ms >> EventFlow0.outTextArea.initialize
   3. 187ms >> EventFlow0.HelloButton.initialize
   4. 188ms >> EventFlow0.GoodByeButton.initialize
   5. 189ms >> EventFlow0.ClearButton.initialize
   6. 189ms >> EventFlow0.initialize
   7. 243ms >> EventFlow0.outTextArea.creationComplete
   8. 243ms >> EventFlow0.HelloButton.creationComplete
   9. 243ms >> EventFlow0.GoodByeButton.creationComplete
  10. 244ms >> EventFlow0.ClearButton.creationComplete
  11. 244ms >> EventFlow0.creationComplete
  12. 246ms >> EventFlow0.applicationComplete
  13. 一旦applicationComplete事件触发后, 组件就会在鼠标事件派发后触发自己的事件.
  14. 1807ms >> EventFlow0.HelloButton.rollOver
  15. 2596ms >> EventFlow0.HelloButton.rollOut