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

Flex編程模型

Flex包含了Flex類庫、MXML和ActionScript編程語言，如下圖所示：

當然，F(xiàn)lex還包括Flex編譯器和調試器，它們并沒有在圖中示出。

你可以混合MXML和ActionScript來發(fā)Flex應用程序。事實上，MXML和ActionScript編程語言都提供了訪問Flex類庫的能力。通常的做法是：使用MXML去定義用戶界面的元素，使用ActionScript去定義客戶端的邏輯并進行控制。

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

將ActionScript添加到Flex應用程序中

ActionScript可以出色地完成如下任務：

1.處理事件

2.處理錯誤

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

4.定制組件

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

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

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

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

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

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

Flex編程模型提供簡潔的語法來實現(xiàn)組件間的、或與數(shù)據(jù)模型的綁定。隨后的例子中，在波浪括號/{}里的數(shù)值將TextArea控件與TextInput控件的文本屬性聯(lián)系起來。當用戶在TextInput控件中輸入文本時，它會自動地拷貝到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> 
 

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

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

 控制應用程序的外觀控制應用程序的外觀，常涉及到如下內容：

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

2.樣式/Styles，即一組特性，如字體、排列方式、顏色等。它們都是通過層疊樣式（CSS）來進行設置的。

3.皮膚/Skins，即可以進行改變的組件視覺元素。

4.行為/Behaviors，即Flex組件在視覺或聽覺效果方面的變化。

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

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

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

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

1.WebService提供對使用SOAP的web服務器的訪問。

2.HTTPService提供對返回數(shù)據(jù)的HTTPURLs的訪問。

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

從Flash到Flex

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

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

【編輯推薦】

1. Flex編程模型學習指南
2. Flex基礎 創(chuàng)建第一個Flex項目
3. 解析Flex事件執(zhí)行流程
4. FlexBuilder3.0與Eclipse3.4的完美結合
5. 學習筆記 FlexBuilder2.0中如何使用基于Lists的控件