Flex程序初始化順序

轉自：http://blog.pfan.cn/huangyx/50865.html

 

 

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事件觸發後, 組件就會在鼠標事件派發後觸發自己的事件.

 

注意：在註冊js調用的方法時，需要在applicationComplete上面初始化。