本文和大家重點(diǎn)討論一下Flex編程模型，F(xiàn)lex類庫(kù)包含F(xiàn)lex組件，管理器與行為。使用基于組件的Flex開(kāi)發(fā)模型，開(kāi)發(fā)者可以合并預(yù)編譯的組件，創(chuàng)建新的組件，或者是組合預(yù)編譯的組件為復(fù)合組件。

Flex編程模型

Flex包含F(xiàn)lex類庫(kù)，MXML以及ActionScript程序語(yǔ)言，如下表所示：

包含在Flex中，但是卻并沒(méi)有在上圖中顯示的還有Flex編譯以及Flex調(diào)試器。

我們使用MXML與ActionScript的組合來(lái)編寫(xiě)Flex程序。MXML和ActionScript程序語(yǔ)言都給了我們?cè)L問(wèn)Flex類庫(kù)的能力。使用MXML來(lái)定義程序的用戶界面元素，使用ActionScript來(lái)定義客戶邏輯與過(guò)程控制。

Flex類庫(kù)包含F(xiàn)lex組件，管理器與行為。使用基于組件的Flex開(kāi)發(fā)模型，開(kāi)發(fā)者可以合并預(yù)編譯的組件，創(chuàng)建新的組件，或者是組合預(yù)編譯的組件為復(fù)合組件。
 

Flex編程模型中Flex類庫(kù)與MXML和ActionScript的關(guān)系

Flex是作為ActionScript類庫(kù)來(lái)實(shí)現(xiàn)的。這個(gè)類庫(kù)包含組件（容器與控件），管理類，數(shù)據(jù)服務(wù)類以及其他特性的類。我們使用MXML和ActionScript語(yǔ)言配合類庫(kù)來(lái)開(kāi)發(fā)程序。

MXML標(biāo)簽與ActionScript類或是類的屬性相對(duì)應(yīng)。Flex分析MXML標(biāo)簽，并且編譯包含相應(yīng)ActionScript對(duì)象的SWF文件。例如，F(xiàn)lex提供了ActionScriptButton類來(lái)定義Flex按鈕控件。在MXML中，我們可以用下面的MXML語(yǔ)句來(lái)創(chuàng)建一個(gè)按鈕控件：

<mx:Buttonlabelmx:Buttonlabel="Submit"/> 

當(dāng)我們使用MXML標(biāo)簽聲明了一個(gè)控件，我們就創(chuàng)建了那個(gè)類的一個(gè)實(shí)例。這個(gè)MXML語(yǔ)句創(chuàng)建了一個(gè)按鈕對(duì)象，并且初始化這個(gè)按鈕對(duì)象的label屬性為Submit字符串。

與ActionScript類相對(duì)應(yīng)的MXML使用與ActionScript類相同的命名約定。類名以一個(gè)大寫(xiě)字母開(kāi)頭，而且在類名中以大寫(xiě)字母分隔單詞。每一個(gè)MXML標(biāo)簽屬性對(duì)應(yīng)著ActionScript對(duì)象的一個(gè)屬性，適合于對(duì)象的一種風(fēng)格，或者是這個(gè)對(duì)象的一個(gè)事件監(jiān)聽(tīng)器。#p#
 

布局我們的程序

Flex編程模型中我們使用代表用戶界面的組件來(lái)聲明Flex程序的用戶界面。有兩種類型的組件：控件與容器?？丶谴绑w元素，如按鈕，文本框，列表框。容器是屏幕上包含控件和其他容器的矩形區(qū)域。

在Flex的根部是單一的容器，稱之為程序容器，這代表整個(gè)Flash播放器的界面。這個(gè)程序容器保存所有的其他的代表對(duì)話框，面板和窗體的容器。

一個(gè)容器有預(yù)定義的規(guī)則來(lái)布局他的孩子容器和控件，包括尺寸以及位置。Flex定義了布局規(guī)則來(lái)簡(jiǎn)化富網(wǎng)絡(luò)程序的設(shè)計(jì)與實(shí)現(xiàn)，然而也提供了足夠的靈活性來(lái)使得我們可以創(chuàng)建多樣的程序集合。

使用預(yù)定義的布局規(guī)則的一個(gè)優(yōu)點(diǎn)就是我們的用戶可以很快的習(xí)慣我們的程序。也就是說(shuō)，通過(guò)標(biāo)準(zhǔn)化用戶交互的規(guī)則，我們的用戶就不需要考慮如何來(lái)導(dǎo)航程序，相反卻可以集中于程序所提供的內(nèi)容。

另一個(gè)優(yōu)點(diǎn)就是我們不必在定義導(dǎo)航以及作為設(shè)計(jì)一部分的布局規(guī)則上花費(fèi)大量的時(shí)間。相反，我們可以集中精力于我們想要傳遞的信息以及我們要提供給用戶的選擇，并且不需為所有用戶行為的細(xì)節(jié)與程序響應(yīng)擔(dān)心。通過(guò)這樣的方式，F(xiàn)lex提供了一個(gè)結(jié)構(gòu)可以讓我們快速容易的使用豐富的特性與交互集合來(lái)開(kāi)發(fā)程序。
 

使用FlexBuilder來(lái)布局我們的程序

我們可以使用FlexBuilder構(gòu)建Flex程序的用戶界面。我們可以使用FlexBuilder通過(guò)可視的編碼與設(shè)計(jì)工具來(lái)開(kāi)發(fā)Flex與ActionScript程序。我們也可以使用可以提供代碼提示與代碼輔助特性的編輯編寫(xiě)MXML，ActionScript與CSS代碼，從而幫助我們的開(kāi)發(fā)工作。

在這個(gè)編輯器中，我們可以切換到設(shè)計(jì)模式來(lái)可視化的開(kāi)發(fā)我們的程序，在設(shè)計(jì)畫(huà)布上使用容器與組件，使用約束來(lái)布局我們的組件，并查看運(yùn)行時(shí)用戶界面的轉(zhuǎn)化。然后我們使用定制的編譯器來(lái)構(gòu)建我們的工程，并且使用集成的調(diào)試工具來(lái)調(diào)試我們的工程。#p#

在MXML中定義用戶界面

我們的程序可以由一個(gè)或是多個(gè)MXML文件組成。使用多個(gè)MXML文件可以促進(jìn)代碼重用，簡(jiǎn)化構(gòu)建復(fù)雜程序的過(guò)程，并且使得多個(gè)開(kāi)發(fā)者貢獻(xiàn)同一個(gè)工程變得更為容易。

下面的例子是一個(gè)MXML程序，這個(gè)程序使用一個(gè)按鈕控件來(lái)觸發(fā)從一個(gè)文本輸入控件拷貝文本到一個(gè)文本區(qū)控件：
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<!--?xmltagmuststartinline1column1--> 
<!--MXMLrootelementtag.--> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<!--Flexcontrolsexistinacontainer.DefineaPanelcontainer.--> 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
<!--TextInputcontrolforuserinput.--> 
<mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
<!--OutputTextAreacontrol.--> 
<mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
<!--Buttoncontrolthattriggersthecopy.--> 
<mx:Buttonidmx:Buttonid="myButton"label="CopyText"/> 
 
</mx:Panel> 
</mx:Application> 
 

這個(gè)程序***行指明了XML聲明，而且必須放在MXML文件的***行，***列。

第二行以<mx:Application>標(biāo)簽開(kāi)始，這是Flex程序的根元素。這個(gè)標(biāo)簽包含了Flex名字空間聲明。在起始與結(jié)束的<mx:Application>標(biāo)簽之間的部分定義了Flex程序。

下圖演示了在Flash播放器中運(yùn)行這個(gè)程序的效果圖：

正如這段代碼所寫(xiě)的，這個(gè)例子布局了我們的用戶界面，但是卻并沒(méi)有包含從文本輸入框控件到文本區(qū)控件的拷貝邏輯。#p#

向Flex程序中添加ActionScript

Flex編程模型中我們可以為了下列目的使用ActionScript處理事件Flex用戶界面是事件驅(qū)動(dòng)的。例如，當(dāng)用戶選擇一個(gè)按鈕時(shí)，這個(gè)按鈕生成一個(gè)事件。我們?cè)贏ctionScript中定義名為事件監(jiān)聽(tīng)器的函數(shù)來(lái)處理事件。我們的事件監(jiān)聽(tīng)器可以打開(kāi)一個(gè)窗口，播放SWF文件，或者是執(zhí)行我們的程序所必須的任何動(dòng)作。

處理錯(cuò)誤我們?cè)贏ctionScript處理運(yùn)行時(shí)錯(cuò)誤。我們可以檢測(cè)數(shù)據(jù)驗(yàn)證錯(cuò)誤，向用戶發(fā)送錯(cuò)誤信息，向服務(wù)器重新提交請(qǐng)求，或者是執(zhí)行基于我們程序的其他事件。

在MXML語(yǔ)句中向Flex控件綁定數(shù)據(jù)對(duì)象我們可以使用數(shù)據(jù)綁定從一個(gè)Flex控件組織數(shù)據(jù)模型，或是從數(shù)據(jù)模型組織組件，或者是從一個(gè)組件向另一個(gè)組件拷貝數(shù)據(jù)。

定義自定義組件我們可以從Flex組件類層次繼承來(lái)創(chuàng)建適合我們程序需求的組件。

下面的例子是在前一個(gè)例子的基礎(chǔ)上所做的更改，為按鈕的click事件添加事件監(jiān)聽(tīng)器。一個(gè)事件監(jiān)聽(tīng)器為了響應(yīng)用戶的事件而執(zhí)行的ActionScript代碼。在我們這個(gè)例子中的事件監(jiān)聽(tīng)器是當(dāng)用戶選擇按鈕控件時(shí)從文本輸入控件向文本區(qū)拷貝文本：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<!--?xmltagmuststartinline1column1--> 
<!--MXMLrootelementtag.--> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<!--Flexcontrolsexistinacontainer.DefineaPanelcontainer.--> 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
<!--TextInputcontrolforuserinput.--> 
<mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
<!--OutputTextAreacontrol.--> 
<mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
<!--Buttoncontrolthattriggersthecopy.--> 
<mx:Buttonidmx:Buttonid="myButton"label="CopyText"  
click="myText.text=myInput.text;"/> 
 
</mx:Panel> 
</mx:Application> 
 

前一個(gè)例子在MXML代碼中直接插入了ActionScript代碼。雖然這對(duì)于一或是兩行的ActionScript代碼可以工作的很好，但是對(duì)于更為復(fù)雜的邏輯，通常我們會(huì)在<mx:Script>塊中定義我們的ActionScript，如下面的例子所示：
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<!--?xmltagmuststartinline1column1--> 
<!--MXMLrootelementtag--> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:Script> 
<![CDATA[  
 
//DefineanActionScriptfunction.  
privatefunctionduplicate():void{  
myText.text=myInput.text;  
}  
]]> 
</mx:Script> 
<!--Flexcontrolsexistinacontainer.DefineaPanelcontainer.--> 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
<!--TextInputcontrolforuserinput.--> 
<mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
<!--OutputTextAreacontrol.--> 
<mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
<!--Buttoncontrolthattriggersthecopy.--> 
<mx:Buttonidmx:Buttonid="myButton"label="CopyText"  
click="duplicate();"/> 
 
</mx:Panel> 
</mx:Application> 

在這個(gè)例子中，我們使事件監(jiān)聽(tīng)器作為一個(gè)ActionScript函數(shù)來(lái)實(shí)現(xiàn)。Flex為了響應(yīng)用戶選擇按鈕控件調(diào)用這個(gè)函數(shù)。Flex編程模型中這種技術(shù)使得我們可以將我們的MXML代碼從我們的ActionScript代碼中分離出來(lái)。為了增加程序的模塊性我們也可以選擇將我們的程序分為多個(gè)文件。#p#

使用數(shù)據(jù)綁定

Flex為了組件之間屬性的綁定，或是到數(shù)據(jù)模型的綁定提供了簡(jiǎn)單的語(yǔ)法。在下面這個(gè)例子中，花括號(hào)中的值將文本區(qū)的text屬性綁定到了文本輸入控件的text屬性。當(dāng)用戶在文本輸入控件中輸入文本時(shí)，他會(huì)自動(dòng)的拷貝到文本區(qū)控件，如下面的例子所示：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<!--?xmltagmuststartinline1column1--> 
<!--MXMLrootelementtag.--> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<!--Flexcontrolsexistinacontainer.DefineaPanelcontainer.--> 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
<!--TextInputcontrolforuserinput.--> 
<mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
<!--OutputTextAreacontrol.--> 
<mx:TextAreaidmx:TextAreaid="myText"text="{myInput.text}"width="150"/> 
</mx:Panel> 
</mx:Application> 

控制程序顯示

Flex定義我們?cè)诔绦蛑锌梢允褂玫哪J(rèn)顯示，或者是修改來(lái)定義我們特定的顯示。作為修改演示的一部分，我們可以修改下面的一些或是全部：

尺寸一個(gè)組件或是程序的高度或是寬度。所有的組件都有一個(gè)默認(rèn)的尺寸。我們可以使用默認(rèn)的尺寸，指定我們自己的尺寸，或者作為布局我們程序的一部分讓Flex重新調(diào)整一個(gè)組件的尺寸。

格式特性集合，例如字體，字號(hào)，文本對(duì)齊屬性，顏色。這與在層疊樣式表(CSS)定義與使用的相同。

皮膚控制組合顯示的符號(hào)。皮膚化就是通過(guò)修改或是替換他的可視化元素來(lái)改變一個(gè)組件顯示的過(guò)程。這些元素可以圖像,SWF文件，或者是包含繪畫(huà)API方法的類文件組成。

行為程序或是用戶行為引起的對(duì)于一個(gè)Flex組件的可見(jiàn)的或是可聽(tīng)的變化。行為的例子如基于鼠標(biāo)移動(dòng)點(diǎn)擊的移動(dòng)或是組件尺寸的重新調(diào)整。

視圖狀態(tài)在許多富網(wǎng)絡(luò)程序中，界面的改變基于用戶所執(zhí)行的任務(wù)。視圖狀態(tài)可以讓我們通過(guò)修改基內(nèi)容來(lái)變化一個(gè)組件的內(nèi)容和顯示或者是程序。

轉(zhuǎn)化轉(zhuǎn)化定義了視圖狀態(tài)的改變?nèi)绾物@示在屏幕上。我們使用特效類，結(jié)合處理轉(zhuǎn)化的顯式效果設(shè)計(jì)來(lái)定義轉(zhuǎn)化。#p#

使用數(shù)據(jù)服務(wù)工作

Flex編程模型中Flex被設(shè)計(jì)用來(lái)與可以訪問(wèn)本地和遠(yuǎn)程服務(wù)端邏輯的服務(wù)進(jìn)行交互。例如，一個(gè)Flex程序可以使用AMF來(lái)連接使用簡(jiǎn)單對(duì)象訪問(wèn)協(xié)議(SOAP)的網(wǎng)絡(luò)服務(wù)，返回XML的HTTPURL，或者是Flex數(shù)據(jù)服務(wù)，與位于與Flex同一個(gè)程序服務(wù)器上的Java對(duì)象。MXML提供數(shù)據(jù)訪問(wèn)的組件稱之為數(shù)據(jù)服務(wù)組件。MXML包含下列的一些數(shù)據(jù)服務(wù)組件：

WebService提供到基于SOAP的網(wǎng)絡(luò)服務(wù)的訪問(wèn)。
HTTPService提供到返回?cái)?shù)據(jù)的HTTPURL的訪問(wèn)。

RemoteObject提供到使用AMF協(xié)議的Java對(duì)象的訪問(wèn)。這個(gè)選項(xiàng)只在Flex數(shù)據(jù)服務(wù)或是MacromediaColdFusionMX7.0.2中可用。
在我們的Flex程序中選擇如何來(lái)訪問(wèn)數(shù)據(jù)影響著我們程序的性能。因?yàn)镕lex程序是在***次請(qǐng)求之后緩存在瀏覽器中的，當(dāng)程序運(yùn)行時(shí)，數(shù)據(jù)訪問(wèn)是影響程序性能的主要原因。為了向用戶傳遞數(shù)據(jù)Flex提供了幾種解決方案。他將數(shù)據(jù)交給調(diào)用在Flex類路徑中裝入的Java類的運(yùn)行時(shí)服務(wù)，或者是向網(wǎng)絡(luò)服務(wù)或是HTTP服務(wù)器發(fā)送代理請(qǐng)求。

使用WebService組件允許我們使用基于SOAP的方法，但是他并不總是產(chǎn)生***的性能。同時(shí)，使用SOAP編碼的額處XML需要比AMF所做的更多的內(nèi)容。

網(wǎng)絡(luò)服務(wù)中的SOAP性能同時(shí)依賴于我們的網(wǎng)絡(luò)服務(wù)的實(shí)現(xiàn)。不同的程序服務(wù)器使用不同的網(wǎng)絡(luò)服務(wù)后端，所以我們會(huì)看到依賴于不同實(shí)現(xiàn)的性能。理解我們的實(shí)現(xiàn)表現(xiàn)如何的唯一方法就是裝入并測(cè)試我們的服務(wù)。
在許多情況下，我們的選擇依賴于我們已存在的程序以及我們?nèi)绾芜x擇將他們集成到后臺(tái)服務(wù)器資源中。網(wǎng)絡(luò)服務(wù)的表現(xiàn)在很大程度上依賴于我們的程序服務(wù)器的網(wǎng)絡(luò)服務(wù)引擎的底層實(shí)現(xiàn)，所以我們應(yīng)裝入并測(cè)試他們的性能。

將Flex編程模型中的數(shù)據(jù)模型從我們的視圖中分離

為了清楚的分離用戶界面，程序相關(guān)的數(shù)據(jù)，數(shù)據(jù)服務(wù)，我們可以使用Flex數(shù)據(jù)模型來(lái)存儲(chǔ)控制器與數(shù)據(jù)服務(wù)之間的數(shù)據(jù)。這種三層設(shè)計(jì)是輸入數(shù)據(jù)與數(shù)據(jù)服務(wù)共同作用的結(jié)果。

當(dāng)我們計(jì)劃一個(gè)程序，我們要決定程序必須存儲(chǔ)的數(shù)據(jù)類型以及這些數(shù)據(jù)要如何處理。這有助于我們決定我們需要什么類型的數(shù)據(jù)模型。例如，假設(shè)我們決定我們的程序必須存儲(chǔ)顧員的相關(guān)數(shù)據(jù)。一個(gè)簡(jiǎn)單的顧員模型可能包含姓名，部門(mén)以及郵箱地址屬性。
一個(gè)Flex數(shù)據(jù)模型是一個(gè)包含我們用來(lái)存儲(chǔ)程序相關(guān)數(shù)據(jù)的屬性的ActionScript對(duì)象。我們可以將數(shù)據(jù)模型用于數(shù)據(jù)驗(yàn)證，從而他可以包含客戶端業(yè)務(wù)邏輯。我們可以在MXML或是ActionScript中定義一個(gè)數(shù)據(jù)模型。在MVC設(shè)計(jì)模式中，數(shù)據(jù)模型代表模型層。

我們可以在MXML標(biāo)簽，ActionScript函數(shù)或是ActionScript類中定義數(shù)據(jù)模型。在MXML中編寫(xiě)的模型用利于快速開(kāi)發(fā)與簡(jiǎn)化數(shù)據(jù)存儲(chǔ)，但是他不能提供任何額外的功能，而我們不可以設(shè)定模型屬性的數(shù)據(jù)類型。如果我們想要設(shè)定數(shù)據(jù)類型以及為額外的功能提供方法，我們應(yīng)使用基于ActionScript的類。在通常情況下，我們應(yīng)為了簡(jiǎn)化數(shù)據(jù)結(jié)構(gòu)使用基于MXML的模型，為更為復(fù)雜的結(jié)構(gòu)以及客戶端業(yè)務(wù)邏輯使用ActionScript。
 

【編輯推薦】

1. Flex客戶端工程路徑規(guī)劃指導(dǎo)
2. Flex開(kāi)發(fā)者必須知道的10件事
3. 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
4. 12個(gè)Flex常用功能代碼再現(xiàn)
5. 學(xué)習(xí)筆記 Flex國(guó)際化如何支持其他語(yǔ)言