構(gòu)建一個(gè)Flex程序
Flex定義了一個(gè)基于組件的開發(fā)模型,從而我們可以用來構(gòu)建我們的程序。為了高效的設(shè)計(jì)與構(gòu)建我們的程序,我們應(yīng)該熟悉這個(gè)模型,以及程序開發(fā)步驟與布署過程。
在這一章描述了我們用來創(chuàng)建一個(gè)程序的開發(fā)過程。在這一章所包含的如下的一些信息:為了我們特定的需求需求而定制程序所要做出的決定,F(xiàn)lex產(chǎn)品線所提供的開發(fā)工具的概要,與其他的技術(shù),如HTML和ColFusion的比較。
開發(fā)程序
Flex支持一個(gè)基于組件的開發(fā)模型。我們可以使用Flex中所包含的預(yù)構(gòu)建的組件,我們可以通過創(chuàng)建新的組件來擴(kuò)展Flex組件庫(kù),或者是我們可以組合預(yù)構(gòu)建的組件來創(chuàng)建復(fù)合的組件。
程序模型
當(dāng)我們使用Flex來構(gòu)建一個(gè)程序,我們使用名為容器與控件的組件來描述我們的用戶界面。一個(gè)容器就是屏幕上包含控件和其他容器的矩形區(qū)域。容器的一個(gè)例子就是為數(shù)據(jù)實(shí)體(data entry),盒子(Box),表格(Grid)所用的窗體(Form)容器。一個(gè)控件是一個(gè)窗體元素,例如按鈕或是文件輸入?yún)^(qū)。
例如,下面的圖顯示了兩個(gè)不同的盒容器,每一個(gè)包含三個(gè)按鈕與一個(gè)組合框控件。
上圖演示了在水平盒(HBox)容器中的控件。HBox容器將他的控件在Flash播放器的平面上水平排列。上圖同時(shí)演示了在垂直盒(VBox)容器中的控件。一個(gè)VBox容器垂直排列他的控件。
容器與控件定義了程序的用戶界面。在MVC設(shè)計(jì)模式中,程序模型的這些方面代表視圖(View)。模型(Model)是由數(shù)據(jù)模塊表示的。Flex數(shù)據(jù)模型可以使得我們將我們的程序數(shù)據(jù)和業(yè)務(wù)邏輯與用戶界面相分離。
我們使用MXML或是ActionScript作為Flex程序的一部分來定義數(shù)據(jù)模型。下圖演示了在Flex中使用數(shù)據(jù)模型創(chuàng)建的窗體:
數(shù)據(jù)綁定是將一個(gè)對(duì)象中的數(shù)據(jù)綁定到另一個(gè)對(duì)象的過程。數(shù)據(jù)模型支持雙向的數(shù)據(jù)綁定:可以從Flex控件向數(shù)據(jù)模型寫入數(shù)據(jù),或者是從數(shù)據(jù)模式向控件讀入數(shù)據(jù)。我們也可以綁定服務(wù)器數(shù)據(jù)到一個(gè)數(shù)據(jù)模型或是直接到Flex控件。例如,我們可以將從一個(gè)網(wǎng)絡(luò)服務(wù)器返回的結(jié)果綁定到數(shù)據(jù)模型,然后將數(shù)據(jù)傳遞到我們的窗體控件。
數(shù)據(jù)模型支持自動(dòng)的數(shù)據(jù)有效性驗(yàn)證。這意味著我們可以使用Flex的驗(yàn)證器,例如郵編(ZipCode)驗(yàn)證器來保證模型區(qū)域中的值是有效的郵編。如果數(shù)據(jù)無效,我們可以向用戶顯示消息,從而用戶可以糾正這些錯(cuò)誤。
Flex如何適應(yīng)MVC模型
模型-視圖-控制器(Model-View-Controller)(MVC)體系結(jié)構(gòu)的目的是通過創(chuàng)建在程序中定義良好與區(qū)域有限的組件,來增加我們的組件的重用性以及改進(jìn)整個(gè)系統(tǒng)的可維護(hù)性。使用MVC結(jié)構(gòu),我們可以整個(gè)系統(tǒng)分為三個(gè)類型的組件:
模型組件封裝數(shù)據(jù)以及以數(shù)據(jù)相關(guān)的行為。
視圖組件定義我們程序的用戶界面。
控制器組件處理我們程序中的交互。
例如,使用MVC設(shè)計(jì),我們可以實(shí)現(xiàn)一個(gè)數(shù)據(jù)實(shí)體窗體為三個(gè)不同的部分:
由XML數(shù)據(jù)文件或是遠(yuǎn)程數(shù)據(jù)服務(wù)調(diào)用組成的保持窗體數(shù)據(jù)的模型。
視圖由所有戶界面元素的數(shù)據(jù)和顯示所表示。
控制器包含用戶界面邏輯。
盡管我們可以將Flex程序看作分布式MVC結(jié)構(gòu)中視圖的一部分,我們可以使用Flex來在客戶端實(shí)現(xiàn)完整的MVC結(jié)構(gòu)。一個(gè)Flex程序有他自己的視圖組件來定義用戶界面,模型組件來表示數(shù)據(jù),控制器組件與負(fù)責(zé)與后臺(tái)系統(tǒng)的交互。任何的客戶端部分在HTML中是不可用的。
使用網(wǎng)絡(luò)服務(wù)器工作
我們的開發(fā)與布署環(huán)境通常包含一個(gè)網(wǎng)絡(luò)服務(wù)器,在這里我們使用網(wǎng)絡(luò)服務(wù)器返回一個(gè)Flex SWF文件來響應(yīng)用戶的請(qǐng)求。我們可以使用下面的任何一種網(wǎng)絡(luò)服務(wù)器:
簡(jiǎn)單的網(wǎng)絡(luò)服務(wù)器
一個(gè)簡(jiǎn)單的網(wǎng)絡(luò)服務(wù)器使用簡(jiǎn)單的HTML頁(yè)面響應(yīng)靜態(tài)的頁(yè)面請(qǐng)求。在這種情況下,我們預(yù)編譯我們的Flex程序并且編寫一個(gè)包裝將我們的Flex程序的SWF文件嵌入到HTML頁(yè)面中。
網(wǎng)絡(luò)程序服務(wù)器
一個(gè)網(wǎng)絡(luò)程序服務(wù)器,例如JRUN,ColFusion,或者是PHP,可以動(dòng)態(tài)的生成頁(yè)面來運(yùn)行我們的Flex程序。在這種情況下,我們可以利用程序服務(wù)器的可用標(biāo)簽庫(kù)和處理語言來為我們的Flex程序動(dòng)態(tài)的生成包裝。然而,我們必須在向這種類型的服務(wù)器布署之前預(yù)編譯我們的Flex程序。我們可以使用任何一種類型的服務(wù)器,而并不僅是一個(gè)Java程序服務(wù)器來提供Flex程序,只要我們預(yù)編譯我們的程序,并且程序不使用在Flex數(shù)據(jù)服務(wù)中可用的服務(wù)。
J2EE程序服務(wù)器或Servlet容器
我們需要J2EE程序服務(wù)器或是Servlet容器,例如JRUN,Tomcat或者是WebSphere來運(yùn)行Flex數(shù)據(jù)服務(wù)。我們通常在運(yùn)行Flex數(shù)據(jù)服務(wù)的服務(wù)器上布署之前預(yù)編譯我們的Flex程序。然而,在開發(fā)過程中,我們可以在瀏覽器上請(qǐng)求一個(gè)Flex程序的MXMl文件,從而在運(yùn)行時(shí)編譯Flex程序。這會(huì)調(diào)用可以生成包裝的編譯器并且返回一個(gè)編譯的SWF文件。
當(dāng)安裝Flex數(shù)據(jù)服務(wù)時(shí)我們可以有選擇的來安裝集成的JRUN J2EE服務(wù)器。集成的JRun服務(wù)器只是JRun 4程序服務(wù)器的開發(fā)版本,而且不是為部署而使用的。JRun的集成版本同時(shí)包含JRun網(wǎng)絡(luò)服務(wù)器(JWS),我們可以用來處理HTTP請(qǐng)求。這個(gè)服務(wù)器也不是為部署而使用的。
在最簡(jiǎn)的情況下,我們應(yīng)在我們的開發(fā)環(huán)境中有一個(gè)簡(jiǎn)單的網(wǎng)絡(luò)服務(wù)器。沒有網(wǎng)絡(luò)服務(wù)器,我們只可以在獨(dú)立運(yùn)行的Flash播放器中運(yùn)行Flex程序或者是在瀏覽器中請(qǐng)求SWF文件。前者并不推薦,因?yàn)樗柚沽宋覀兊某绦蚴褂肍lex更多的網(wǎng)絡(luò)特性。后者不推薦是因?yàn)椴⒉皇撬械臑g覽器都支持直接的SWF文件請(qǐng)求。
程序開發(fā)步驟我們通常使用下面步驟來開發(fā)一個(gè)Flex程序:
1 在文本編輯器或是集成開發(fā)環(huán)境中,例如Adobe Flex Builder,Eclipse,或是IntelliJ,在MXML文件中插入MXML根標(biāo)簽。
2 添加一個(gè)或是多個(gè)容器。
3 向容器中添加控制器,例如輸入域,按鈕,輸出域。
4 定義數(shù)據(jù)模型。
5 添加網(wǎng)絡(luò)服務(wù),HTTP服務(wù),或是請(qǐng)求一個(gè)遠(yuǎn)程Java對(duì)象。
6 向輸入數(shù)據(jù)添加驗(yàn)證。
7 添加腳本來擴(kuò)展組件。
8 編譯我們的程序?yàn)镾WF文件。
注意:如果我們有Flex數(shù)據(jù)服務(wù),我們可以部署我們的程序?yàn)镸XML和ActionScript文件的集合。一旦接收一個(gè)HTTP請(qǐng)求到一個(gè)MXML文件,F(xiàn)lex數(shù)據(jù)服務(wù)編譯我們的程序?yàn)橐粋€(gè)SWF文件。
部署文件
我們可以部署我們的程序?yàn)橐粋€(gè)編譯的SWF文件,或者如果我們有Flex數(shù)據(jù)服務(wù),我們可以部署我們的程序?yàn)橐粋€(gè)MXML和ActionScript文件的集合。
部署SWF文件
在我們編譯我們的程序?yàn)橐粋€(gè)SWF文件后,我們可以通過將這個(gè)文件拷貝到網(wǎng)絡(luò)服務(wù)器或是程序服務(wù)器的目錄中來實(shí)現(xiàn)部署。用戶可以通過HTTP請(qǐng)求來訪問部署的SWF文件:
http://hostname/path/filename.swf盡管我們可以直接訪問一個(gè)SWF文件,通常我們使用一個(gè)包裝將SWF合并到一個(gè)網(wǎng)頁(yè)。包裝負(fù)責(zé)將Flex程序的SWF文件嵌入到網(wǎng)頁(yè)中,例如一個(gè)HTML,ASP,JSP或是ColFusion頁(yè)面。另外,我們?cè)诎b中使用邏輯來允許歷史管理,急速安裝(Express Install),來允許或不允許Javascript的瀏覽器都可以訪問Flex程序。
部署MXML和ActionScript文件
如果我們有Flex數(shù)據(jù)服務(wù),我們可以將我們的程序部署為MXML和ActionScript文件的集合。當(dāng)我們部署我們的程序?yàn)镸XML和ActionScript文件集合時(shí),用戶請(qǐng)求主要的MXML文件來開始一個(gè)程序。用戶第一次在網(wǎng)絡(luò)瀏覽器中請(qǐng)求MXML文件的URL時(shí),服務(wù)器編譯MXML代碼為SWF文件。服務(wù)器將SWF文件發(fā)送到網(wǎng)絡(luò)瀏覽器由Flash播放器運(yùn)行。
Flex程序使用MXML文件擴(kuò)展名。我們將這些文件存放在我們的J2EE程序的網(wǎng)絡(luò)根目錄下。
要請(qǐng)求一個(gè)由MXML和ActionScript文件部署的程序,用戶向主要的MXML文件發(fā)送請(qǐng)求:
http://hostname/path/filename.mxml主要的MXML文件包含<mx:Application>標(biāo)簽。
MXML文件一旦接收到一個(gè)HTTP請(qǐng)求,F(xiàn)lex執(zhí)行如下的操作:
1 編譯MXML文件來生成一個(gè)SWF文件
2 在服務(wù)器上緩存編譯的SWF文件
3 向客戶端返回SWF文件
一旦向MXML文件發(fā)送請(qǐng),F(xiàn)lex服務(wù)器會(huì)檢測(cè)自上一次請(qǐng)求以來是否修改了MXML文件。如果,他會(huì)由緩存中返回同樣的SWF文件。如果MXML已經(jīng)修改了,F(xiàn)lex服務(wù)器重新編譯這個(gè)文件,并且向客戶端返回一個(gè)更新的SWF文件。