Flex編程模型學習指南

作者：atd_nian 2010-07-29 09:31:28

開發后端

你對Flex編程模型的概念是否熟悉，這里向大家簡單介紹一下它的概念及組成，Flex包含Flex類庫，MXML以及ActionScript程序語言。

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

Flex編程模型

Flex包含Flex類庫，MXML以及ActionScript程序語言，如下表所示：

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

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

Flex類庫包含Flex組件，管理器與行為。使用基于組件的Flex開發模型，開發者可以合并預編譯的組件，創建新的組件，或者是組合預編譯的組件為復合組件。

Flex編程模型中Flex類庫與MXML和ActionScript的關系

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

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

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

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

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

布局我們的程序

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

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

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

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

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

使用FlexBuilder來布局我們的程序

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

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

在MXML中定義用戶界面

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

下面的例子是一個MXML程序，這個程序使用一個按鈕控件來觸發從一個文本輸入控件拷貝文本到一個文本區控件：

<?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名字空間聲明。在起始與結束的<mx:Application>標簽之間的部分定義了Flex程序。

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

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

向Flex程序中添加ActionScript

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

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

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

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

下面的例子是在前一個例子的基礎上所做的更改，為按鈕的click事件添加事件監聽器。一個事件監聽器為了響應用戶的事件而執行的ActionScript代碼。在我們這個例子中的事件監聽器是當用戶選擇按鈕控件時從文本輸入控件向文本區拷貝文本：

<?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>

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

使用數據綁定

Flex為了組件之間屬性的綁定，或是到數據模型的綁定提供了簡單的語法。在下面這個例子中，花括號中的值將文本區的text屬性綁定到了文本輸入控件的text屬性。當用戶在文本輸入控件中輸入文本時，他會自動的拷貝到文本區控件，如下面的例子所示：

<?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重新調整一個組件的尺寸。

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

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

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

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

轉化轉化定義了視圖狀態的改變如何顯示在屏幕上。我們使用特效類，結合處理轉化的顯式效果設計來定義轉化。#p#

使用數據服務工作

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

WebService提供到基于SOAP的網絡服務的訪問。
HTTPService提供到返回數據的HTTPURL的訪問。

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

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

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

將Flex編程模型中的數據模型從我們的視圖中分離

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

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

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

【編輯推薦】

Flex客戶端工程路徑規劃指導
Flex開發者必須知道的10件事
技術前沿看Flex客戶端緩存技術如何使用
12個Flex常用功能代碼再現
學習筆記 Flex國際化如何支持其他語言

責任編輯：佚名來源： csdn.net

Flex編程模型