|
Christophe Coenraets
Macromedia Flex 專員 Christophe
[原作]http://www.macromedia.com/devnet/flex/articles/paradigm.html
[翻譯]samhoo（samhoophone@yahoo.com）
[注]轉載請保持全文完整
Macromedia Flex(開發(fā)代號為Royale)是一個展現(xiàn)服務器，開發(fā)者可以用它來開發(fā)新一代的“復雜Internet應用”(RIAs - Rich Internet Applications)。復雜Internet應用融合了桌面應用的可用性和web應用的易于管理的優(yōu)點。
Flex是一個在J2EE應用服務器或servlet容器安裝的展現(xiàn)服務器。它擁有豐富的用戶界面組件、用于排布這些組件的基于XML的標記語言，以及可以處理用戶交互的面向對象編程語言。這些技術的給我們帶來的是：使用Flash播放器渲染復雜Internet應用，使用工業(yè)標準和開發(fā)者熟悉的方式進行開發(fā)。
本文將專注于Flex語言的關鍵部分。
為了運行本文中提到的代碼，你可能需要加入Flex的Beta測試。Flex運行于象Macromedia JRun, IBM Websphere, BEA WebLogic, or Apache Tomcat 這樣的J2EE應用服務器之上。Flex未來將支持Microsoft .NET服務器。
Flex 語言簡介
由于標記語言和面向對象程序設計語言廣泛應用，因此，基于這兩項技術的Flex語言也將從中獲益。標記語言是成功的，排布用戶界面也相對容易。MXML，由Flex引入的、基于XML的標記語言，將延續(xù)其成功。和HTML很象，你可以用MXML來排布應用的用戶界面。同為基于XML的標記語言，MXML比HTML有更強的結構，更少的語法歧義。比起HTML，MXML還引入了更豐富的標簽集。如：DataGrid，Tree，TabNavigator，Accordion和Menu，這些都是標準標簽集中的一部分。你還可以擴展MXML標簽，創(chuàng)建自己的組件。此外，二者最大的區(qū)別是，MXML定義的用戶界面是用Flash播放器運行的，相對傳統(tǒng)的基于HTML、頁面為中心的web應用而言，這將更具吸引力。
除了排布可視組件，還可以用MXML來定義應用中其他重要方面，如，可以把應用定義為一個web服務的客戶，或是在應用中開發(fā)動畫，用于提示用戶進度。
但是，標記語言提供的編程邏輯仍難以滿足用戶交互的需求。在Flex中，可以用ActionScript編程語言來編寫事件監(jiān)聽器來滿足此種需求。ActionScript是一種基于ECMA-262標準的、強類型的面向對象語言，和其他編程語言——java和C#很相似，因此也很易于上手。
總而言之，當編寫一個Flex的應用時，需要用MXML來設置用戶界面，并用ActionScript來編寫響應用戶交互的邏輯。
作為一個開發(fā)者，你可以根據(jù)自己的喜好，用自己所熟悉的IDE（比如Eclipes或Intellij）手工編寫MXML，也可以使用Flex支持的“所見即所得”開發(fā)環(huán)境（目前開發(fā)代號為Brady）。即使你選擇手工編寫MXML，仍可使用Flex提供的XML schema，在IDE中為你提供代碼提示（code hinting）和代碼自動填充（code completion）的功能.
下面例子是一個名為HelloWord.mxml的簡單Flex應用的源代碼。該應用程序有兩個TextInput組件，當點擊Copy時，source TextInput的內(nèi)容就會顯示在destination TextInput域中。以下例子顯示如何用MXML和ActionScript來創(chuàng)建應用：用MXML定義用戶界面，再用ActionScript為Button組件的事件監(jiān)聽器編寫拷貝邏輯。
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:TextInput id="source" width="100"/>
<mx:Button label="Copy" click="destination.text=source.text"/>
<mx:TextInput id="destination" width="100"/>
</mx:Application>
圖1.在HelloWorld程序中將source TextInput的文本拷貝到destination TextInput。
Flex開發(fā)與部署模型
要開發(fā)并部署這個應用，一般要經(jīng)過以下步驟：
1. 用你熟悉的IDE或Flex的“所見即所得”開發(fā)工具編寫HelloWold.mxml文件。
2. 把該文件部署到應用服務器上。一般可以通過拷貝HelloWorld.mxml到某個web應用的目錄下，或將HelloWorld.mxml作為應用的一部分打包到WAR文件中去。
當一個用戶首次請求HelloWorld.mxml的時候，服務器會將MXML代碼編譯為Flash字節(jié)碼（一個SWF文件）。然后服務器將產(chǎn)生的SWF文件發(fā)往客戶端，讓Flash播放器執(zhí)行。對同一個MXML文檔的并發(fā)請求，服務器將跳過編譯過程，直接返回相同的編譯結果。
如果你對JavaServer Pages比較熟悉，就會發(fā)現(xiàn)它們的模型非常相似。就像JSPs被編譯為Java字節(jié)碼(servlets)一樣，MXML文件將被編譯為Flash字節(jié)碼。二者的主要不同在于：在Flex中，產(chǎn)生的字節(jié)碼是在客戶端執(zhí)行的，而由JSP產(chǎn)生的Java字節(jié)碼（servlet）是在服務器端執(zhí)行的。通過Flex，你可以將復雜客戶端應用無縫的集成到已有的商業(yè)邏輯中。
使用MXML用戶界面組件
擁有豐富的用戶組件是Flex的一大特色。除了傳統(tǒng)的數(shù)據(jù)輸入控件（Text InputTextArea，CheckBox，RadioButton，ComboBox等等），MXML還包括了一些高級組件，用于維護結構化數(shù)據(jù)（Tree 組件）和大數(shù)據(jù)集（DataGrid 組件）。為了清晰的組織數(shù)據(jù)及其處理過程，F(xiàn)lex還提供了導航組件（Tab，ViewStack，Accordion等等）。
為了更易于組織用戶界面，F(xiàn)lex容器還定義了布局管理策略，用于指明一個組件相對與另一個組件的位置。Flex組件庫提供了大量的、可實現(xiàn)不同布局策略的容器。比如，在HBox中的組件將被水平排列，而在VBox中的組件會被垂直排列，而在Grid中組件將以行列的方式進行排列，就象HTML的table一樣。View容器中沒有定義任何布局管理策略，因此你可以用x，y坐標來指定組件的位置。
下面給出一個在Flex環(huán)境下、具有三個面板的傳統(tǒng)e-mail界面。HBox容器中的Tree是水平排列的，而VBox容器中的DataGrid和TextArea則是垂直排列的。
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:HBox>
<mx:Tree/>
<mx:VBox>
<mx:DataGrid/>
<mx:TextArea/>
</mx:VBox>
</mx:HBox>
</mx:Application>
圖2. 一個用Flex創(chuàng)建的e-mail應用。
編寫ActionScript代碼
Flex語言是事件驅動的。MXML將事件作為標簽的屬性，你可以為它編寫事件監(jiān)聽器。比如，Button組件有一個click屬性，ComboBox，List和Tree組件有一個change屬性，等等。
對于簡單的交互，可以在標簽的事件屬性上直接編寫ActionScript語句。例如，在HelloWorld應用中，存在Button的click事件監(jiān)聽器中的ActionScripts語句，能把source TextInput 的內(nèi)容拷貝到destination TextInput中。
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:TextInput id="source" width="100"/>
<mx:Button label="Copy" click="destination.text=source.text"/>
<mx:TextInput id="destination" width="100"/>
</mx:Application>
當邏輯更為復雜的時候，可以定義獨立的ActionScript函數(shù)，然后在組件的事件監(jiān)聽器中調(diào)用。例如，你可以象下面一樣，重寫HelloWorld應用：
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:script>
function copy() {
destination.text=source.text
}
</mx:script>
<mx:TextInput id="source" width="100"/>
<mx:Button label="Copy" click="copy()"/>
<mx:TextInput id="destination" width="100"/>
</mx:Application>
創(chuàng)建一個MXML文件，實際上是創(chuàng)建了一個類。定義在<mx:script>標簽中的ActionScript函數(shù)是該類的方法。你可以在MXML文件或獨立的文件中定義ActionScript函數(shù)。選擇哪種方法，取決你所在的組織，后一種方法可以對開發(fā)團隊進行更好的分工。
定義自己的組件
在Flex中，你可以從頭開始，或通過擴展Flex組件庫中已有的組件，來創(chuàng)建自己的組件。創(chuàng)建組件就象創(chuàng)建一個應用一樣：用MXML排布用戶界面，用ActionScript編寫用界面邏輯。
下面的一個例子是，通過擴展VBox類來創(chuàng)建簡單的信用卡選擇組件。
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:RadioButton groupName="card" id="americanExpress"
label="American Express" selected="true"/>
<mx:RadioButton groupName="card" id="masterCard" label="MasterCard"/>
<mx:RadioButton groupName="card" id="visa" label="Visa"/>
</mx:VBox>
組件的名字就是源文件的名字。如，源文件的名字是CreditCardChooser.mxml，組件的名字就是CreditCardChooser，這樣，這個標簽名就可以用了。下面的例子就用上了剛才創(chuàng)建的CreditCardChoose組件。
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Label text="Select a credit card:"/>
<CreditCardChooser/>
</mx:Application>
圖3. CreditCardChooser應用
界面開發(fā)者還能在Macromedia Flash開發(fā)環(huán)境中創(chuàng)建復雜的可視化組件，并存為SWC文件。
當然，也可以只用ActionScript定義來整個組件，這種方法一般用于定義應用中的非可視組件。你可能會為這樣商業(yè)對象創(chuàng)建非可視組件——例如，包含客戶端邏輯的購物車，或是應用中helper類。
出處：
責任編輯：一個好孩子
上一頁 下一頁 Macromedia Flex 標記語言簡介[2]
◎進入論壇網(wǎng)絡編程版塊參加討論
|
第 1 頁 Macromedia Flex 標記語言簡介[1]
第 2 頁 
