全面解析Flex編程模型

作者：Adobe 2010-08-04 14:34:35

在學(xué)習(xí)Flex的過(guò)程中，你可能會(huì)遇到Flex編程模型方面的問(wèn)題，這里向大家簡(jiǎn)單介紹一下，希望本文的介紹能讓你有所收獲。

本文和大家重點(diǎn)討論一下Flex編程模型，F(xiàn)lex包含了Flex類庫(kù)、MXML和ActionScript編程語(yǔ)言，當(dāng)然Flex還包括Flex編譯器和調(diào)試器，它們并沒(méi)有在下圖中示出。

Flex編程模型

Flex包含了Flex類庫(kù)、MXML和ActionScript編程語(yǔ)言，如下圖所示：

當(dāng)然，F(xiàn)lex還包括Flex編譯器和調(diào)試器，它們并沒(méi)有在圖中示出。

你可以混合MXML和ActionScript來(lái)發(fā)Flex應(yīng)用程序。事實(shí)上，MXML和ActionScript編程語(yǔ)言都提供了訪問(wèn)Flex類庫(kù)的能力。通常的做法是：使用MXML去定義用戶界面的元素，使用ActionScript去定義客戶端的邏輯并進(jìn)行控制。

Flex類庫(kù)包括了Flex組件、管理器和行為。在基于組件的開(kāi)發(fā)模型下，開(kāi)發(fā)人員可以運(yùn)用預(yù)先做好的組件。

將ActionScript添加到Flex應(yīng)用程序中

ActionScript可以出色地完成如下任務(wù)：

1.處理事件

2.處理錯(cuò)誤

3.在MXML語(yǔ)句中將數(shù)據(jù)對(duì)象綁定到Flex控件上

4.定制組件

在隨后的例子中，為按鈕控件的點(diǎn)擊事件添加了事件監(jiān)聽(tīng)器/eventlistener。當(dāng)用戶點(diǎn)擊按鈕時(shí)，將TextInput控件中的文本拷貝到TextArea控件中。

<?xmlversionxmlversion="1.0"?><!--?xml標(biāo)簽必須位于第一行--> 
 
<!--MXML根元素標(biāo)簽--><mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<!--定義一個(gè)面板容器來(lái)放置控件--> 
 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
 
<!--TextInput控件用來(lái)進(jìn)行用戶輸入--><mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
 
<!--TextArea控件用來(lái)進(jìn)行輸出--><mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
 
<!--按鈕控件來(lái)觸發(fā)拷貝--><mx:Buttonidmx:Buttonid="myButton"label="CopyText"  
click="myText.text=myInput.text;"/> 
 
</mx:Panel></mx:Application>

前面的例子是在MXML中直接插入ActionScript代碼。盡管這種技術(shù)只需要一兩行ActionScript代碼，但是對(duì)于更為復(fù)雜的邏輯實(shí)現(xiàn)，你就需要在<mx:Script>塊中定義ActionScript，就象如下所示那樣：

<?xmlversionxmlversion="1.0"?><!--?xml標(biāo)簽必須位于第一行--> 
 
<!--MXML根元素標(biāo)簽--><mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<mx:Script><![CDATA[  
 
//定義一個(gè)ActionScript功能函數(shù)privatefunctionduplicate():void{myText.text=myInput.text;}  
 
]]></mx:Script> 
 
<!--定義一個(gè)面板容器來(lái)放置控件--><mx:Paneltitlemx:Paneltitle="MyApplication"> 
 
<!--TextInput控件用來(lái)進(jìn)行用戶輸入--><mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
 
<!--TextArea控件用來(lái)進(jìn)行輸出--><mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
 
<!--按鈕控件來(lái)觸發(fā)拷貝--><mx:Buttonidmx:Buttonid="myButton"label="CopyText"  
click="duplicate();"/> 
 
</mx:Panel></mx:Application>

在本例中，你使用ActionScript功能函數(shù)來(lái)實(shí)現(xiàn)了一個(gè)事件監(jiān)聽(tīng)器。這樣做的好處是使MXML代碼與ActionScript代碼分離，以提供更好的健壯性和靈活性。#p#

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

Flex編程模型提供簡(jiǎn)潔的語(yǔ)法來(lái)實(shí)現(xiàn)組件間的、或與數(shù)據(jù)模型的綁定。隨后的例子中，在波浪括號(hào)/{}里的數(shù)值將TextArea控件與TextInput控件的文本屬性聯(lián)系起來(lái)。當(dāng)用戶在TextInput控件中輸入文本時(shí)，它會(huì)自動(dòng)地拷貝到TextArea控件中去。

<?xmlversionxmlversion="1.0"?><!--?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>

使用事件去處理錯(cuò)誤正如你可以使用事件去實(shí)現(xiàn)程序的功能，你也可以使用它們對(duì)錯(cuò)誤進(jìn)行處理。下面的例子顯示了如何設(shè)計(jì)一個(gè)針對(duì)web服務(wù)器操作的錯(cuò)誤事件的監(jiān)聽(tīng)器：

<mx:Script><![CDATA[  
 
publicfunctionshowErrorDialog(error:String):void{  
//具體功能實(shí)現(xiàn)...}  
 
]]></mx:Script>...<mx:WebServiceidmx:WebServiceid="WeatherService"..."> 
 
<mx:operationnamemx:operationname="getFoo"fault="showErrorDialog(event.fault.faultString);"/> 
</mx:WebService>

控制應(yīng)用程序的外觀控制應(yīng)用程序的外觀，常涉及到如下內(nèi)容：

1.大小/Sizes，即組件或應(yīng)用程序的高度和寬度。

2.樣式/Styles，即一組特性，如字體、排列方式、顏色等。它們都是通過(guò)層疊樣式（CSS）來(lái)進(jìn)行設(shè)置的。

3.皮膚/Skins，即可以進(jìn)行改變的組件視覺(jué)元素。

4.行為/Behaviors，即Flex組件在視覺(jué)或聽(tīng)覺(jué)效果方面的變化。

6.視圖狀態(tài)/Viewstate可以讓你通過(guò)修改它的基礎(chǔ)內(nèi)容，來(lái)改變組件或程序的內(nèi)容和外觀。

7.變換/Transitions可以讓你定義屏幕上發(fā)生改變的視圖狀態(tài)。#p#

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

Flex編程模型被設(shè)計(jì)為可以與許多類型的服務(wù)器打交道，從而提供對(duì)本地和遠(yuǎn)端邏輯的訪問(wèn)。提供數(shù)據(jù)訪問(wèn)的MXML組件被稱之為數(shù)據(jù)服務(wù)器組件/dataservicecomponents。MXML包含了如下幾種類型的數(shù)據(jù)服務(wù)器組件：

1.WebService提供對(duì)使用SOAP的web服務(wù)器的訪問(wèn)。

2.HTTPService提供對(duì)返回?cái)?shù)據(jù)的HTTPURLs的訪問(wèn)。

3.RemoteObject通過(guò)使用AML協(xié)議提供對(duì)Java對(duì)象（JavaBeans、EJBs、POJOs）的訪問(wèn)。該選項(xiàng)目前僅適用于FlexDataServices或MacromediaColdFusionMX7.0.2.

從Flash到Flex

開(kāi)發(fā)一個(gè)Flex應(yīng)用程序與開(kāi)發(fā)一個(gè)MacromediaFlashProfessional8程序有所不同，即使兩者都會(huì)最終被編譯成SWF文件。FlashProfessional使用了一些概念，如時(shí)間軸/Timeline，動(dòng)畫(huà)幀/，圖層/layers來(lái)組織和控制程序中的內(nèi)容。而在Flex中則拋棄了這些內(nèi)容，轉(zhuǎn)而使用MXML標(biāo)簽來(lái)設(shè)計(jì)用戶界面組件和連接數(shù)據(jù)源。

盡管Flash和Flex的開(kāi)發(fā)模型各不相同，但是Flash仍然是一個(gè)非常強(qiáng)大的工具，用來(lái)創(chuàng)建定制的組件和視覺(jué)方面的資源，然后以外部SWC文件的形式導(dǎo)入到Flex中。

【編輯推薦】