咖啡伴侶

    大家都知道，我們?cè)诰帉慒lex應(yīng)用程序時(shí)，通常是以<mx:Application>標(biāo)簽作為開頭，實(shí)際上，F(xiàn)lex應(yīng)用程序在啟動(dòng)運(yùn)行的 時(shí)候并不是直接從Application開始運(yùn)行，在這之前還有一部分悄悄的先運(yùn)行了，正如大家所看到的，當(dāng)我們運(yùn)行編寫好的Flex應(yīng)用程序時(shí)，盡管我 們沒(méi)有編寫任何與啟動(dòng)進(jìn)度載入條相關(guān)的代碼，但無(wú)一例外的，應(yīng)用程序均會(huì)為我們自動(dòng)加上這一部分。因此才有我們看到的如下圖所示的標(biāo)準(zhǔn)的Flex loading載入條。

    通常我們所說(shuō)的Flex應(yīng)用程序，本質(zhì)上來(lái)說(shuō)是基于Flex框架、采用ActionScript 3.0編寫的Flash應(yīng)用程序，從這一點(diǎn)來(lái)說(shuō)，它和普通的Flash應(yīng)用程序沒(méi)有任何差別。相對(duì)來(lái)說(shuō)，傳統(tǒng)的使用Flash IDE（如Flash CS3）創(chuàng)建Flash程序時(shí)更多的基于“時(shí)間線”（Timeline）及“幀”（Frame）的概念，更易于設(shè)計(jì)師理解；而基于Flex框架來(lái)創(chuàng)建的 Flash應(yīng)用程序更多是強(qiáng)調(diào)程序性，很少提及“時(shí)間線”與“幀”的概念，更易于程序員理解。其實(shí)Flex應(yīng)用程序一樣也有時(shí)間線，只是這部分由Flex 框架隱藏起來(lái)了，通常不為大家所熟悉，在默認(rèn)創(chuàng)建Flex程序時(shí)，這一切Flex已幫我們完成了，但了解這部分內(nèi)容更有助于大家對(duì)Flex應(yīng)用程序的啟動(dòng) 有更深刻的認(rèn)識(shí)，以便能對(duì)程序更靈活的控制與發(fā)揮~~

    我們來(lái)看看上面這幅示意圖，F(xiàn)lex應(yīng)用程序共由兩幀組成，第1幀為preloader部分，第2幀為主應(yīng)用程序部分，此兩部分由Flex應(yīng)用程序的根 SystemManager統(tǒng)管，SystemManager是flash.display.MovieClip的子類，影片剪輯（movie clip）支持幀。由于swf屬于一種漸進(jìn)式（progressive）下載的格式，正是由于swf格式這個(gè)特性，F(xiàn)lash Player并不需要等待整個(gè)程序下載完成便可直接訪問(wèn)已載入幀的內(nèi)容，因此第一幀通常用來(lái)作為應(yīng)用程序載入時(shí)的loading畫面顯示，一般來(lái)說(shuō)，第一 幀包含的內(nèi)容應(yīng)該盡可能的少（在第一幀中盡量不要含有Flex框架的組件），以便能很快的下載并立即顯示；第二幀才是主應(yīng)用程序真正的內(nèi)容，一旦 SystemManager實(shí)例進(jìn)入到第二幀后，即開始內(nèi)部主應(yīng)用程序運(yùn)行的生命周期（life cycle），也就是進(jìn)入我們最為熟悉的<mx:Application>運(yùn)行的部分（SystemManger實(shí)例有一 application的屬性，在第1幀時(shí)，此屬性為null，當(dāng)進(jìn)入到第2幀時(shí)，該屬性才指向真正的主程序application實(shí)例）記住我們開始所 說(shuō)的，Flex應(yīng)用程序總的來(lái)說(shuō)是以事件驅(qū)動(dòng)的程序。

    在程序進(jìn)入第2幀，主程序application開始運(yùn)行后，便會(huì)相應(yīng)的觸發(fā)相應(yīng)的一系列事件，按事件發(fā)生的先后順序依次來(lái)介紹：

preinitialize

應(yīng)用程序application已實(shí)例化，但此時(shí)還未創(chuàng)建任何相關(guān)的孩子組件（child component）

initialize

此時(shí)，創(chuàng)建了相應(yīng)的孩子組件，但還未對(duì)這些子組件進(jìn)行布局

creationComplete

應(yīng)用程序application完成全部實(shí)例化，并完成所有子組件的布局

apllicationComplete

上面三處事件的完成，表明application內(nèi)部啟動(dòng)的整個(gè)進(jìn)程完成，接下來(lái)便會(huì)通知SystemManager派發(fā)applicationComplete事件。此時(shí)，啟動(dòng)程序啟動(dòng)完成并準(zhǔn)備運(yùn)行。

    Flash包含的是一個(gè)時(shí)間線上的多個(gè)幀, 而Flex的SWF只包含2個(gè)幀. SystemManager, Preloader, DownloadProgressBar和少量工具類都在第一幀, 剩下的包括應(yīng)用代碼/ 內(nèi)嵌資源全都在第二幀中. 當(dāng)Flash Player下載下載SWF時(shí), 只要接收到第一幀內(nèi)足夠的數(shù)據(jù), 就會(huì)實(shí)例化SystemManager, 由它來(lái)創(chuàng)建Preloader, 然后創(chuàng)建DownloadProgressBar, 這兩個(gè)對(duì)象會(huì)察看剩余字節(jié)的傳輸過(guò)程. 當(dāng)?shù)谝粠乃凶止?jié)傳輸完畢后, SystemManager發(fā)送enterFrame到第二幀, 然后是其他事件. 最后Application對(duì)象派發(fā)applicationComplete事件.

    SystemManager是Flex應(yīng)用的主控者, 它控制著應(yīng)用窗口, Application實(shí)例, 彈出窗口, cursors, 并管理著ApplicationDomain中的類. SystemManager是FlashPlayer實(shí)例化的第一個(gè)類, 它存儲(chǔ)了主應(yīng)用窗口的大小和位置信息, 保存其子組件比如:浮動(dòng)彈出窗口和模態(tài)窗口的痕跡. 通過(guò)SystemManager可以獲得內(nèi)嵌字體,樣式和document對(duì)象.
自定義的可視化組件(UIComponent的子類)只有在調(diào)用過(guò)addChild()后, 才會(huì)有一個(gè)SystemManager賦給他們, 之前是Null. 所以在自定義可視化組件的構(gòu)造函數(shù)中不要使用SystemManager.
通常, Application對(duì)象創(chuàng)建時(shí), 發(fā)生如下事件:

    大多數(shù)情況下, 我們使用<mx:Application>來(lái)創(chuàng)建application對(duì)象, 但如果使用ActionScript來(lái)創(chuàng)建的話, 那么建議不要在application的構(gòu)造函數(shù)中創(chuàng)建組件, 推薦在crateChildren函數(shù)中, 主要是從性能方面考慮.
    Flex 是一個(gè)事件驅(qū)動(dòng)的編程模型, 任何事情的發(fā)生, 其背后必然存在一個(gè)事件. 而開發(fā)者第一次看到MXML時(shí), 很難體會(huì)到一個(gè)Xml標(biāo)記的應(yīng)用的事件流和實(shí)例化的生命周期. 這個(gè)對(duì)于HTML和Flash的開發(fā)者尤其會(huì)感到困惑, 因?yàn)槠涫煜さ姆绞脚cFlex的一點(diǎn)也不相似. HTML的實(shí)例化是從上到下的, Flash的執(zhí)行是從Frame0開始一幀幀運(yùn)行的. 而Flex則又有不同.

我們來(lái)看一個(gè)簡(jiǎn)單的MXML的應(yīng)用.

   1. <?xml version="1.0" encoding="utf-8"?> 
   2. <mx:Application  
   3.     xmlns:mx="http://www.adobe.com/2006/mxml"  
   4.     layout="absolute" 
   5.     backgroundGradientColors="[#67cbff, #fcffff]"  
   6.     color="#000000"  
   7.     fontSize="12"     
   8.     preinitialize="report( event , 'preinitialize' )" 
   9.     initialize="report( event , 'initialize' )" 
  10.     creationComplete="report( event , 'creationComplete' )" 
  11.     applicationComplete="report( event , 'applicationComplete' )" 
  12.     > 
  13.      
  14.     <mx:Script> 
  15.         <![CDATA[     
  16.                      
  17.             [Bindable] 
  18.              
  19.             public var outTextData:String=""; 
  20.              
  21.             public function report( event:Event , value:String ):void 
  22.             { 
  23.                 outTextData += String( flash.utils.getTimer() ) + 'ms >> '  
  24.                 + event.currentTarget + '.' + value + '\n';     
  25.             } 
  26.              
  27.         ]]> 
  28.     </mx:Script> 
  29.      
  30.     <mx:TextArea 
  31.         id="outTextArea" 
  32.         text="{ outTextData }" 
  33.         right="10" left="10" top="50" bottom="10" alpha="0.5" 
  34.         wordWrap="false" 
  35.         initialize="report( event , 'initialize' )" 
  36.         creationComplete="report( event , 'creationComplete' )"  
  37.         /> 
  38.      
  39.     <mx:Button  
  40.         y="10" height="30" left="168" width="150" 
  41.         id="HelloButton" 
  42.         label="Say Hello" 
  43.         initialize="report( event , 'initialize' )" 
  44.         creationComplete="report( event , 'creationComplete' )"  
  45.         rollOver="report( event , 'rollOver' )"  
  46.         rollOut="report( event , 'rollOut' )"  
  47.         click="report( event , 'click > Hello!' )"  
  48.         /> 
  49.          
  50.     <mx:Button 
  51.         id="GoodByeButton"  
  52.         label="Say Goodbye"  
  53.         y="10" left="10" height="30" width="150" color="#000000" 
  54.         initialize="report( event , 'initialize' )" 
  55.         creationComplete="report( event , 'creationComplete' )"  
  56.         click="report( event , 'click > Goodbye!' )"  
  57.         /> 
  58.          
  59.     <mx:Button 
  60.         id="ClearButton"  
  61.         label="Clear"  
  62.         y="10" left="326" height="30" color="#000000" right="10"         
  63.         initialize="report( event , 'initialize' )" 
  64.         creationComplete="report( event , 'creationComplete' )"  
  65.         click="outTextData='';report( event , 'click' )"  
  66.          /> 
  67.      
  68. </mx:Application> 

這個(gè)應(yīng)用運(yùn)行時(shí), 輸出了實(shí)例流程和事件流. 這校我們就能夠看到所有事件的觸發(fā)順序. 可以發(fā)現(xiàn)應(yīng)用啟動(dòng)后, 事件的順序是一定的. 下面是輸出的內(nèi)容:

   1. 167ms >> EventFlow0.preinitialize 
   2. 183ms >> EventFlow0.outTextArea.initialize 
   3. 187ms >> EventFlow0.HelloButton.initialize 
   4. 188ms >> EventFlow0.GoodByeButton.initialize 
   5. 189ms >> EventFlow0.ClearButton.initialize 
   6. 189ms >> EventFlow0.initialize 
   7. 243ms >> EventFlow0.outTextArea.creationComplete 
   8. 243ms >> EventFlow0.HelloButton.creationComplete 
   9. 243ms >> EventFlow0.GoodByeButton.creationComplete 
  10. 244ms >> EventFlow0.ClearButton.creationComplete 
  11. 244ms >> EventFlow0.creationComplete 
  12. 246ms >> EventFlow0.applicationComplete 
  13. 一旦applicationComplete事件觸發(fā)后, 組件就會(huì)在鼠標(biāo)事件派發(fā)后觸發(fā)自己的事件. 
  14. 1807ms >> EventFlow0.HelloButton.rollOver 
  15. 2596ms >> EventFlow0.HelloButton.rollOut 
  16. 2954ms >> EventFlow0.HelloButton.rollOver 
  17. 3170ms >> EventFlow0.HelloButton.rollOut 
  18. 3543ms >> EventFlow0.HelloButton.rollOver 
  19. 4052ms >> EventFlow0.HelloButton.click > Hello! 
  20. 4267ms >> EventFlow0.HelloButton.click > Hello! 
  21. 4474ms >> EventFlow0.HelloButton.click > Hello! 
  22. 4569ms >> EventFlow0.HelloButton.rollOut 
  23. 4907ms >> EventFlow0.GoodByeButton.click > Goodbye! 
  24. 5130ms >> EventFlow0.GoodByeButton.click > Goodbye!