學習筆記 Flex應用程序如何啟動
在學習Flex的過程中，你可能會遇到Flex應用程序啟動問題，這里和大家分享一下，相信本文介紹一定會讓你有所收獲。
Flex應用程序啟動
編寫一個簡單的Flex應用程序并不復雜，就算你從來沒接觸過Flex程序設計，照著幫助的實例步驟，不需花多長時間也能做出一個漂亮簡捷的小程序出來。不過，隨著對Flex程序編寫的深入，會越來越覺得，其實要編寫一個好的Flex應用程序并不簡單，涉及到各個方面的知識，需要對Flex應用程序的架構、事件機制的處理、設計與程序的結合等等各個方面均要有所掌握。
這***部分的內容從Flex應用程序的啟動與運行講起。另外，Flex應用程序總的來說是以事件驅動的程序，因此，大家在深入學習Flex的各個方面知識的時候，應該隨時以事件驅動的觀點來進行思考。
大家都知道，我們在編寫Flex應用程序時，通常是以<mx:Application>標簽作為開頭，實際上，Flex應用程序在啟動運行的時候并不是直接從Application開始運行，在這之前還有一部分悄悄的先運行了，正如大家所看到的，當我們運行編寫好的Flex應用程序時，盡管我們沒有編寫任何與啟動進度載入條相關的代碼，但無一例外的，應用程序均會為我們自動加上這一部分。因此才有我們看到的如下圖所示的標準的Flexloading載入條（在下一篇文章中，我們將一起來改變這千篇一律的載入條，創建自定義的loading效果）。
◆通常我們所說的Flex應用程序，本質上來說是基于Flex框架、采用ActionScript3.0編寫的Flash應用程序，從這一點來說，它和普通的Flash應用程序沒有任何差別。相對來說，傳統的使用FlashIDE（如FlashCS3）創建Flash程序時更多的基于“時間線”（Timeline）及“幀”（Frame）的概念，更易于設計師理解；而基于Flex框架來創建的Flash應用程序更多是強調程序性，很少提及“時間線”與“幀”的概念，更易于程序員理解。其實Flex應用程序一樣也有時間線，只是這部分由Flex框架隱藏起來了，通常不為大家所熟悉，在默認創建Flex程序時，這一切Flex已幫我們完成了，但了解這部分內容更有助于大家對Flex應用程序的啟動有更深刻的認識，以便能對程序更靈活的控制與發揮~~
我們來看看上面這幅示意圖，Flex應用程序共由兩幀組成，第1幀為preloader部分，第2幀為主應用程序部分，此兩部分由Flex應用程序的根SystemManager統管，SystemManager是flash.display.MovieClip的子類，影片剪輯（movieclip）支持幀。由于swf屬于一種漸進式（progressive）下載的格式，正是由于swf格式這個特性，FlashPlayer并不需要等待整個程序下載完成便可直接訪問已載入幀的內容，因此***幀通常用來作為應用程序載入時的loading畫面顯示，一般來說，***幀包含的內容應該盡可能的少（在***幀中盡量不要含有Flex框架的組件），以便能很快的下載并立即顯示；第二幀才是主應用程序真正的內容，一旦SystemManager實例進入到第二幀后，即開始內部主應用程序運行的生命周期（lifecycle），也就是進入我們最為熟悉的<mx:Application>運行的部分（SystemManger實例有一application的屬性，在第1幀時，此屬性為null，當進入到第2幀時，該屬性才指向真正的主程序application實例）
◆注：幀是時間線的一個基本單元，如PAL電視制式，每秒25幀；而電影通常為每秒24幀，其實和我們這里講的Flash中的幀類似的概念記住我們開始所說的，Flex應用程序總的來說是以事件驅動的程序。
在程序進入第2幀，主程序application開始運行后，便會相應的觸發相應的一系列事件，按事件發生的先后順序依次來介紹：
preinitialize
應用程序application已實例化，但此時還未創建任何相關的孩子組件（childcomponen）
initialize
此時，創建了相應的孩子組件，但還未對這些子組件進行布局
creationComplete
應用程序application完成全部實例化，并完成所有子組件的布局
apllicationComplete
◆上面三處事件的完成，表明application內部啟動的整個進程完成，接下來便會通知SystemManager派發applicationComplete事件。此時，啟動程序啟動完成并準備運行。
運行下面這個小程序，再次理解這幾次事件，注意：由于在preinitialize事件產生時，此時還未創建任何子組件，故在此事件的處理函數中，不能直接將相應顯示的字符串賦給TextArea組件顯示。
- <?xmlversionxmlversion="1.0"encoding="utf-8"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
- layout="absolute"
- preinitialize="preinitHandler()"
- initialize="initHandler()"
- creationComplete="creationComHandler()"
- applicationComplete="appComHandler()"viewSourceURL="srcview/index.html">
- <mx:Script>
- <![CDATA[
- privatevarpreTxt:String;
- privatefunctionpreinitHandler():void{
- preTxt="preinitializecompleted."+"\n";
- }
- privatefunctioninitHandler():void{
- vartxt:String="initializecompleted."+"\n";
- txtArea.text=preTxt+txt;
- }
- privatefunctioncreationComHandler():void{
- vartxt:String="creationCompletecompleted."+"\n";
- txtArea.text+=txt;
- }
- privatefunctionappComHandler():void{
- vartxt:String="applicationCompletecompleted."+"\n";
- txtArea.text+=txt;
- }
- ]]>
- </mx:Script>
- <mx:TextAreaidmx:TextAreaid="txtArea"height="183"width="189"
- horizontalCenter="0"top="37"/>
- <mx:Labelymx:Labely="228"text="Flex應用程序啟動之事件產生"fontSize="12"horizontalCenter="0"/>
- </mx:Application>
【編輯推薦】
- 深入探究Flex應用程序使用
- FlexBuilder4十大新特性閃亮登場
- 全面認識Flex應用程序模型
- 探討Flex設計理念 如何為Flex應用程序設計界面布局
- 技術分享 在Flex中嵌入Flex字體的步驟
