Flex 启动过程

Flex Application 初始化顺序

2008-11-16 11:58

preloader->systemManager->FlexApplication started... 然后才是 大家都知道，我们在编写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应用程序总的来说是以事件驱动的程序。 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!   引用: http://hi.baidu.com/mollyguo_/blog/item/f6df7954d51cd6183b29352e.html