Flex Application 初始化顺序

  初始顺序以下：

1. preloader -> systemManager -> FlexApplication started ...
2. preinitialize        在全部的初始化以前触发,没有子组件的定义,可是能够引用组件的变量.
3. initialize           当全部子组件生成完成后触发,在这个时间点尚未组件被渲染出来.
4. creationComplete     组件定义完成并已经在显示列表.
5. 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 Unknown macro: { outTextData += String( flash.utils.getTimer() ) + 'ms >> ' + event.currentTarget + '.' + value + 'n'; } ]]> </mx:Script> <mx:TextArea id="outTextArea" text=" Unknown macro: { 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!

关于creationComplete事件的发生时机，手册中是这样说的：

    假设程序中有这样的结构：

Application 

    OuterVBox 

        InnerVBox1 

            InnerVBoxLabel1 

        InnerVBox2 

            InnerVBoxLabel2  

    事件：preinitialize, initialize, creationComplete发生的顺序是这样的：

OuterVBox  preinitialize 

    InnerVBox1  preinitialize 

        InnerVBox1Label  preinitialize 

        InnerVBox1Label  initialize 

    InnerVBox1  initialize 

    InnerVBox2  preinitialize 

        InnerVBox2Label  preinitialize 

        InnerVBox2Label  initialize 

    InnerVBox2  initialize 

OuterVBox  initialize 

        InnerBox1Label  creationComplete 

        InnerVBox2Label  creationComplete 

    InnerVBox1  creationComplete 

    InnerVBox2  creationComplete 

OuterVBox  creationComplete  

    全部的initialization事件完成后，creationComplete时间才开始发生，先从叶子控件开始，而后是他们的父控件，直到application。

    若是将 OuterVBox容器变成ViewStack而且creationPolicy 属性为auto, 则事件发生顺序是:

OuterViewStack  preinitialize 

    InnerVBox1  preinitialize 

    InnerVBox2  preinitialize 

OuterViewStack  initialize 

        InnerBox1Label  preinitialize 

        InnerBox1Label  initialize 

    InnerVBox1  initialize 

        InnerBox1Label  creationComplete 

    InnerVBox1  creationComplete 

OuterViewStack  creationComplete  

然而，对于item renderer 或者 item editor, Flex 可能会重用item renderer 或者item editor的实例。可是被重用的renderer 或者item editor的实例不会再次发生creationComplete事件。做为替代,你可使用dataChange事件。Flex 会在每次data属性发生变化时触发dataChange事件。在Accessing the listData property（Flex2 help中）一节中的例子就使用了dataChange事件来更新在DataGrid控件的item renderer中的TextArea的内容。