flex application初始化顺序

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!


关于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的内容。

评论

4 楼 vipygt 2011-12-08  

写得太好了，最近一直困惑flex对象的异步调用呢，看了很受用。

3 楼 jinchishuxue 2010-05-13  

非常感谢楼主,看了你的帖子,理解的更清楚了.

2 楼 NewTamato 2009-07-23  

这篇文章是我转载的，我也是看了这篇文章才明白许多东西！

1 楼 czwlucky 2009-07-23  

原来一直困惑于itemRender中不能自动更新数据，看了楼主的文章才豁然开朗。