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

Flex編程模型

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

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

我們使用MXML與ActionScript的組合來編寫Flex程序。MXML和ActionScript程序語言都給了我們訪問Flex類庫的能力。使用MXML來定義程序的用戶界面元素，使用ActionScript來定義客戶邏輯與過程控制。

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

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

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

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

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

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

與ActionScript類相對應的MXML使用與ActionScript類相同的命名約定。類名以一個大寫字母開頭，而且在類名中以大寫字母分隔單詞。每一個MXML標簽屬性對應著ActionScript對象的一個屬性，適合于對象的一種風格，或者是這個對象的一個事件監(jiān)聽器。#p#
 

布局我們的程序

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

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

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

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

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

使用FlexBuilder來布局我們的程序

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

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

在MXML中定義用戶界面

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

下面的例子是一個MXML程序，這個程序使用一個按鈕控件來觸發(fā)從一個文本輸入控件拷貝文本到一個文本區(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> 
 

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

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

下圖演示了在Flash播放器中運行這個程序的效果圖：

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

向Flex程序中添加ActionScript

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

處理錯誤我們在ActionScript處理運行時錯誤。我們可以檢測數(shù)據(jù)驗證錯誤，向用戶發(fā)送錯誤信息，向服務器重新提交請求，或者是執(zhí)行基于我們程序的其他事件。

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

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

下面的例子是在前一個例子的基礎(chǔ)上所做的更改，為按鈕的click事件添加事件監(jiān)聽器。一個事件監(jiān)聽器為了響應用戶的事件而執(zhí)行的ActionScript代碼。在我們這個例子中的事件監(jiān)聽器是當用戶選擇按鈕控件時從文本輸入控件向文本區(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> 
 

前一個例子在MXML代碼中直接插入了ActionScript代碼。雖然這對于一或是兩行的ActionScript代碼可以工作的很好，但是對于更為復雜的邏輯，通常我們會在<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> 

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

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

Flex為了組件之間屬性的綁定，或是到數(shù)據(jù)模型的綁定提供了簡單的語法。在下面這個例子中，花括號中的值將文本區(qū)的text屬性綁定到了文本輸入控件的text屬性。當用戶在文本輸入控件中輸入文本時，他會自動的拷貝到文本區(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定義我們在程序中可以使用的默認顯示，或者是修改來定義我們特定的顯示。作為修改演示的一部分，我們可以修改下面的一些或是全部：

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

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

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

行為程序或是用戶行為引起的對于一個Flex組件的可見的或是可聽的變化。行為的例子如基于鼠標移動點擊的移動或是組件尺寸的重新調(diào)整。

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

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

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

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

WebService提供到基于SOAP的網(wǎng)絡服務的訪問。
HTTPService提供到返回數(shù)據(jù)的HTTPURL的訪問。

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

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

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

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

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

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

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

【編輯推薦】

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