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