Flex 3: mx:Application.applicationComplete vs creationComplete &&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!

 

I’m working on a media player in Flex and I ran into an issue.

**Background**
When you click the “Fullscreen” button I change the label to “Exit Fullscreen” and vice versa when you click it again. If you use ESC key to return from fullscreen the label stays the same.

No problem right? I’ll add

bq. stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);

to my _init()_ function which is called from the _creationComplete_ and I’m done, right?

**Problem**
“_creationComplete”_:http://livedocs.adobe.com/labs/flex3/langref/mx/core/UIComponent.html#event:creationComplete – “Dispatched when the component has finished its construction, property processing, measuring, layout, and drawing.”

Basically, when _creationComplete_ is called the _stage_ object is _null_. Huh? Yep, that’s right…it is null.

**Solution**
I found a “blog post by Raghu”:http://raghuonflex.wordpress.com/2007/03/06/error-on-adding-fullscreenlistener-in-creationcomplete-handler/ where he talked about using the SystemManager. That seems really hack’sh (which he felt the same as well). He then pointed out a “blog post by Wietse Veenstra”:http://www.wietseveenstra.nl/blog/2007/02/12/understanding-the-flex-application-startup-event-order/ which shows the start-up order.

Bottom line, _applicationComplete_ is the event we should use for init’ing our application. _creationComplete_ should be used for init’ing children of the application, if needed.

Hopefully this will help someone as it has helped me. God bless the blogosphere!