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