Flex學(xué)習(xí)手冊(cè)新手必備
本文和大家重點(diǎn)討論一下Flex學(xué)習(xí)手冊(cè),F(xiàn)lex是一個(gè)提供開發(fā)設(shè)計(jì)和運(yùn)行支持的架構(gòu),它可以使開發(fā)人員創(chuàng)建利用Adobe?Flash?Player9作為前臺(tái)的“富客戶端互聯(lián)網(wǎng)應(yīng)用程序/richInternetapplications/RIA”,以滿足用戶更為直觀和***交互性的在線體驗(yàn)。
Flex是如何工作的
該部分文檔的內(nèi)容是為用戶提供關(guān)于Adobe?Flex工作機(jī)制的一個(gè)快速綜述。通過本章節(jié)的學(xué)習(xí),你可以創(chuàng)建你的***個(gè)Flex應(yīng)用程序,并將它與你以前所熟悉的Web開發(fā)技術(shù)進(jìn)行比較,以領(lǐng)會(huì)Flex的內(nèi)涵和精髓。
***節(jié)構(gòu)建并運(yùn)行Flex應(yīng)用程序
Flex學(xué)習(xí)手冊(cè)中Flex是一個(gè)提供開發(fā)設(shè)計(jì)和運(yùn)行支持的架構(gòu),它可以使開發(fā)人員創(chuàng)建利用Adobe?
Flash?Player9作為前臺(tái)的“富客戶端互聯(lián)網(wǎng)應(yīng)用程序/richInternetapplications/RIA”,以滿足用戶更為直觀和***交互性的在線體驗(yàn)。
◆開發(fā)Flex應(yīng)用程序的典型步驟如下(通常是這樣):
1.選取一系列預(yù)先定制好的、用于設(shè)計(jì)應(yīng)用程序界面的組件(如表格、按鈕等等)
2.布置組件以設(shè)計(jì)用戶界面。
3.使用樣式和主題來增強(qiáng)視覺方面的設(shè)計(jì)。
4.添加動(dòng)態(tài)行為(例如程序部件之間的相互作用)。
5.定義并連接所需的數(shù)據(jù)庫(kù)服務(wù)。
6.將源代碼編譯成SWF文件,然后在FlashPlayer中運(yùn)行。
◆Flex學(xué)習(xí)手冊(cè)中一個(gè)典型的Flex應(yīng)用程序包括如下元素:
1.Flexframework
Adobe?Flex2framework包含了創(chuàng)建RIA所需要的所有組件,它們是:用于應(yīng)用程序布局規(guī)劃的容器;針對(duì)用戶界面和從用戶處獲取數(shù)據(jù)的控制(例如文本框和按鈕);廣泛支持的數(shù)據(jù)綁定、數(shù)據(jù)格式化、以及有效值驗(yàn)證;事件驅(qū)動(dòng)的開發(fā)模式。Flexframework被包含在公用組件庫(kù)(SWC)文件中。
2.MXML
每個(gè)Flex應(yīng)用程序至少包含有一個(gè)MXML文件,它被作為該程序的主文件。MXML是一種標(biāo)記語(yǔ)言,它是基于XML的一種實(shí)現(xiàn),用來創(chuàng)建Flex應(yīng)用程序。你可以使用它去聲明程序中所使用的標(biāo)簽結(jié)構(gòu)的定義。
3.ActionScript3.0
你可以使用ActionScript3.0為應(yīng)用程序添加動(dòng)態(tài)行為,它是基于ECMAScript的一種實(shí)現(xiàn),類似于JavaScript。你可以將ActionScript作為一個(gè)腳本塊,在MXML文件中直接進(jìn)行添加;或者創(chuàng)建一個(gè)單獨(dú)的ActionScript文件,然后將它們導(dǎo)入到MXML文件中。
4.CSS
你可以通過設(shè)置組件的屬性(properties)來改變組件(按鈕、列表框等)的視覺樣式。
例如,按鈕組件有一個(gè)fontFamily屬性,你可以使用它來進(jìn)行字體的設(shè)置。樣式的屬性通常有四種方法來進(jìn)行控制:通過主題(theme);在CSS文件中進(jìn)行定義;在MXML文件中的樣式塊中進(jìn)行定義;在組件的實(shí)例中進(jìn)行設(shè)置。
5.圖形資源
與很多應(yīng)用程序一樣,Flex包含了各種各樣的圖形資源,如圖標(biāo)和圖象。
6.數(shù)據(jù)
一些組件被使用來進(jìn)行數(shù)據(jù)顯示(combobox或者datagrid)的工作。同時(shí),你還可以使用各種方式來將這些組件與數(shù)據(jù)聯(lián)系起來,如使用數(shù)組、收集對(duì)象、數(shù)據(jù)模型、以及外部XML數(shù)據(jù)資源,等等。
Flex應(yīng)用程序是如何編譯和發(fā)布的:
Flex學(xué)習(xí)手冊(cè)中Flex應(yīng)用程序被編譯成一個(gè)SWF文件,然后在FlashPlayer下運(yùn)行。當(dāng)一個(gè)源代碼被編譯時(shí),它就被轉(zhuǎn)換成ActionScript類(譯者注:這正是Flex精髓的地方之一,即提供從MXML到ActionScript的轉(zhuǎn)換),并與圖形和其它資源合并到SWF文件里。在運(yùn)行時(shí),SWF文件與所需的外部庫(kù)、服務(wù)和數(shù)據(jù)源進(jìn)行交互。
一般的Flex應(yīng)用程序并不需要服務(wù)器端所提供的支持。因此,你可以在你的本地計(jì)算機(jī)上編譯它們,然后在Web服務(wù)的HTML頁(yè)面中發(fā)布給你的用戶。
當(dāng)然,你還可以將Flex與Adobe?FlexDataServices2、ColdFusionFlashRemotingService、或者其它Java和J2EEService服務(wù)器技術(shù)結(jié)合起來,進(jìn)行B/S結(jié)構(gòu)的網(wǎng)絡(luò)應(yīng)用程
序的開發(fā)。
MXML:一切開始的地方
你可以在MXML中使用Flex所提供的組件來定義用戶界面。這里有一個(gè)主MXML程序文件的例子:
- <?xmlversionxmlversion="1.0"encoding="utf-8"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
- <mx:Panel>
- <mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"/>
- <mx:Buttonlabelmx:Buttonlabel="Close"/>
- </mx:Panel>
- </mx:Application>
如果你對(duì)XML已經(jīng)很熟悉了,就能一眼識(shí)別出這個(gè)例子的格式。MXML代碼的頭兩行包含了版本號(hào)、編碼、以及命名空間的信息,文檔的主體包含的是程序的具體內(nèi)容。
Flex應(yīng)用程序所有的具體內(nèi)容都被放在<mx:Application>標(biāo)簽對(duì)中。同時(shí),你還可以在父標(biāo)簽對(duì)中嵌套其它的子標(biāo)簽對(duì)(譯者注:反正標(biāo)簽是成對(duì)出現(xiàn)的,這點(diǎn)一定要記住)。
該例子創(chuàng)建了一個(gè)簡(jiǎn)單的程序,它在屏幕上顯示“SayhellotoFlex!”的文字。在該程序中,聲明了TextArea和Button組件,并設(shè)置了它們相應(yīng)的text和label屬性。
備注:在MXML文件中的每個(gè)標(biāo)簽都有前綴mx,它是Flex的設(shè)計(jì)命名空間。
【編輯推薦】
- 解析Flexbuilder4十大新特性
- 從Flex Builder更名看Flash平臺(tái)戰(zhàn)略
- Flex及FlexBuilder2.0開發(fā)環(huán)境詳解
- FlexBuilder3.0與Eclipse3.4的***結(jié)合
- 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件