Macromedia Flex 標記語言簡介

 

 

Christophe Coenraets
Macromedia Flex 專員 Christophe

[原作][url]http://www.macromedia.com/devnet/flex/articles/paradigm.html[/url]
[翻譯]samhoo（[email][email protected][/email]）
[注]轉載請保持全文完整

Macromedia Flex(開發代號爲Royale)是一個展現服務器，開發者可以用它來開發新一代的“複雜Internet應用”(RIAs - Rich Internet Applications)。複雜Internet應用融合了桌面應用的可用性和web應用的易於管理的優點。

Flex是一個在J2EE應用服務器或servlet容器安裝的展現服務器。它擁有豐富的用戶界面組件、用於排布這些組件的基於XML的標記語言，以及可以處理用戶交互的面向對象編程語言。這些技術的給我們帶來的是：使用Flash播放器渲染複雜Internet應用，使用工業標準和開發者熟悉的方式進行開發。

本文將專注於Flex語言的關鍵部分。

爲了運行本文中提到的代碼，你可能需要加入Flex的Beta測試。Flex運行於象Macromedia JRun, IBM Websphere, BEA WebLogic, or Apache Tomcat 這樣的J2EE應用服務器之上。Flex未來將支持Microsoft .NET服務器。

Flex 語言簡介

由於標記語言和麪向對象程序設計語言廣泛應用，因此，基於這兩項技術的Flex語言也將從中獲益。標記語言是成功的，排布用戶界面也相對容易。 MXML，由Flex引入的、基於XML的標記語言，將延續其成功。和HTML很象，你可以用MXML來排布應用的用戶界面。同爲基於XML的標記語言， MXML比HTML有更強的結構，更少的語法歧義。比起HTML，MXML還引入了更豐富的標籤集。如：DataGrid，Tree， TabNavigator，Accordion和Menu，這些都是標準標籤集中的一部分。你還可以擴展MXML標籤，創建自己的組件。此外，二者最大的區別是，MXML定義的用戶界面是用Flash播放器運行的，相對傳統的基於HTML、頁面爲中心的web應用而言，這將更具吸引力。

除了排布可視組件，還可以用MXML來定義應用中其他重要方面，如，可以把應用定義爲一個web服務的客戶，或是在應用中開發動畫，用於提示用戶進度。

但是，標記語言提供的編程邏輯仍難以滿足用戶交互的需求。在Flex中，可以用ActionScript編程語言來編寫事件監聽器來滿足此種需求。 ActionScript是一種基於ECMA-262標準的、強類型的面嚮對象語言，和其他編程語言——java和C#很相似，因此也很易於上手。

總而言之，當編寫一個Flex的應用時，需要用MXML來設置用戶界面，並用ActionScript來編寫響應用戶交互的邏輯。

作爲一個開發者，你可以根據自己的喜好，用自己所熟悉的IDE（比如Eclipes或Intellij）手工編寫MXML，也可以使用Flex支持的“所見即所得”開發環境（目前開發代號爲Brady）。即使你選擇手工編寫MXML，仍可使用Flex提供的XML schema，在IDE中爲你提供代碼提示（code hinting）和代碼自動填充（code completion）的功能.

下面例子是一個名爲HelloWord.mxml的簡單Flex應用的源代碼。該應用程序有兩個TextInput組件，當點擊Copy時， source TextInput的內容就會顯示在destination TextInput域中。以下例子顯示如何用MXML和ActionScript來創建應用：用MXML定義用戶界面，再用ActionScript爲 Button組件的事件監聽器編寫拷貝邏輯。

<?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開發與部署模型

要開發並部署這個應用，一般要經過以下步驟：
1. 用你熟悉的IDE或Flex的“所見即所得”開發工具編寫HelloWold.mxml文件。
2. 把該文件部署到應用服務器上。一般可以通過拷貝HelloWorld.mxml到某個web應用的目錄下，或將HelloWorld.mxml作爲應用的一部分打包到WAR文件中去。

當一個用戶首次請求HelloWorld.mxml的時候，服務器會將MXML代碼編譯爲Flash字節碼（一個SWF文件）。然後服務器將產生的 SWF文件發往客戶端，讓Flash播放器執行。對同一個MXML文檔的併發請求，服務器將跳過編譯過程，直接返回相同的編譯結果。

如果你對JavaServer Pages比較熟悉，就會發現它們的模型非常相似。就像JSPs被編譯爲Java字節碼(servlets)一樣，MXML文件將被編譯爲Flash字節碼。二者的主要不同在於：在Flex中，產生的字節碼是在客戶端執行的，而由JSP產生的Java字節碼（servlet）是在服務器端執行的。通過 Flex，你可以將複雜客戶端應用無縫的集成到已有的商業邏輯中。

使用MXML用戶界面組件

擁有豐富的用戶組件是Flex的一大特色。除了傳統的數據輸入控件（Text InputTextArea，CheckBox，RadioButton，ComboBox等等），MXML還包括了一些高級組件，用於維護結構化數據（Tree 組件）和大數據集（DataGrid 組件）。爲了清晰的組織數據及其處理過程，Flex還提供了導航組件（Tab，ViewStack，Accordion等等）。

爲了更易於組織用戶界面，Flex容器還定義了佈局管理策略，用於指明一個組件相對與另一個組件的位置。Flex組件庫提供了大量的、可實現不同佈局策略的容器。比如，在HBox中的組件將被水平排列，而在VBox中的組件會被垂直排列，而在Grid中組件將以行列的方式進行排列，就象HTML的 table一樣。View容器中沒有定義任何佈局管理策略，因此你可以用x，y座標來指定組件的位置。

下面給出一個在Flex環境下、具有三個面板的傳統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創建的e-mail應用。

編寫ActionScript代碼

Flex語言是事件驅動的。MXML將事件作爲標籤的屬性，你可以爲它編寫事件監聽器。比如，Button組件有一個click屬性，ComboBox，List和Tree組件有一個change屬性，等等。

對於簡單的交互，可以在標籤的事件屬性上直接編寫ActionScript語句。例如，在HelloWorld應用中，存在Button的 click事件監聽器中的ActionScripts語句，能把source TextInput 的內容拷貝到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函數，然後在組件的事件監聽器中調用。例如，你可以象下面一樣，重寫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>

創建一個MXML文件，實際上是創建了一個類。定義在<mx:script>標籤中的ActionScript函數是該類的方法。你可以在MXML文件或獨立的文件中定義ActionScript函數。選擇哪種方法，取決你所在的組織，後一種方法可以對開發團隊進行更好的分工。

定義自己的組件

在Flex中，你可以從頭開始，或通過擴展Flex組件庫中已有的組件，來創建自己的組件。創建組件就象創建一個應用一樣：用MXML排布用戶界面，用ActionScript編寫用界面邏輯。

下面的一個例子是，通過擴展VBox類來創建簡單的信用卡選擇組件。

<?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，這樣，這個標籤名就可以用了。下面的例子就用上了剛纔創建的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應用

界面開發者還能在Macromedia Flash開發環境中創建複雜的可視化組件，並存爲SWC文件。

當然，也可以只用ActionScript定義來整個組件，這種方法一般用於定義應用中的非可視組件。你可能會爲這樣商業對象創建非可視組件——例如，包含客戶端邏輯的購物車，或是應用中helper類。

數據訪問

Macromedia Flex爲面向服務器架構（SOA – service-oriented architecture）而開發。在這一模型中，應用通過與分散在不同地方的服務進行交互，來完成自己的任務。例如，如果創建一個在線旅行應用，你需要與不同的服務進行交互：全球旅館預定服務，目的信息服務，天氣服務等等。這些服務可能以不同的機制來提供，並且來自不同的地方。Flex使你能在客戶端彙集信息，並提供三種不同的數據服務組件，以滿足對服務提供者進行特定數據訪問的需求：WebService組件，HTTPService組件（一般使用 XML通過HTTP進行數據訪問）以及RemoteObject組件。MXML允許你用相應的WebService, HTTPService, and RemoteObject標籤來設置與服務的連接。
　

數據綁定

在許多語言中，如何在用戶界面控件中顯示後臺數據，是件令人頭疼的事情，而且非常容易出錯。收集用戶在控件中輸入的數據，並傳給遠程服務也常常是件乏味的事情。

Flex的特色之一，就是提供了雙向的數據綁定機制：你可以將用戶界面控件綁定到服務調用的數據結果集上，反過來，也可以將服務的參數綁定到用戶界面控件輸入的值上。

下面是一個簡單的股票報價應用。例子使用了WebService標籤來設置與XMMethods提供的股價web服務進行連接。這個例子闡明瞭 Flex的雙向綁定功能。getQuote方法的symbol輸入參數被綁定到symbol TextInput組件上。quote標籤被綁定到getQute方法的調用結果上。

<?xml version="1.0" encoding="iso-8859-1"?>
 
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
 
<mx:WebService id="wsStock"
wsdl="http://services.xmethods.net/soap/urn:xmethods-delayed-quotes.wsdl">
 
<mx:operation name="getQuote">
<mx:request>
<symbol>{symbol.text}</symbol>
</mx:request>
</mx:operation>
</mx:WebService>
 
<mx:Label text="Enter a symbol:"/>
<mx:HBox>
<mx:TextInput id="symbol"/>
<mx:Button label="Get Quote" click='wsStock.getQuote.send()'/>
</mx:HBox>
 
<mx:Label id="quote" fontWeight="bold">{wsStock.getQuote.result}</mx:Label>
 
</mx:Application>

圖4.股價應用
實際上，Flex數據綁定機制比傳統的重取/顯示（retrieve/display）方式更勝一籌：在Flex應用中，你可以將任意對象的任意屬性綁定到另一任意對象的任意屬性值上。

使用層級樣式表（CSS）

Flex使用層級樣式表標準來保證用戶界面的一致性，並使應用更易於維護。就像在HTML中一樣，你可以在應用中嵌入一個指向外部的樣式表，或在特定的標記元素下將某種風格定義爲其屬性。樣式表還允許定義字體。所需字體定義內嵌於應用的字節碼中，即使用戶的機器上沒有這樣的字體，也能被正確的渲染出來。

下面是一個名爲main.css的外部樣式表。

@font-face {

src: url("LucidaSansRegular.ttf");

font-family: mainFont;

}

.error {

color: #FF0000;

font-size: 12;

}

.title {

font-family: mainFontBold;

font-size: 18;

}
　

TextArea {

backgroundColor: #EEF5EE;

}

下面的例子通過使用<mx:style>標籤聲明瞭一個外部樣式表，並對不同的控件使用了不同的樣式。

<?xml version="1.0" encoding="iso-8859-1"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:style src="main.css"/>

<mx:Label styleName="error" text="This is an error"/>

<mx:Label styleName="title" text="This is a title"/>

<mx:TextArea width="200" height="100" wordWrap="true">

This is a TextArea

</mx:TextArea>

</mx:Application>

圖5.使用外部樣式表的應用

特效

複雜Internet應用常常被拿來和客戶/服務器應用進行比較。因爲它們提供了同一級別的用戶體驗。但是，容易忽視的區別是，兩者的用戶各具特點。使用客戶/服務器應用的客戶通常是備受折磨後，最終適應了他們需要面對的用戶界面。而複雜Internet應用的客戶通常是臨時性的用戶。在這樣的條件下，一個不直觀的用戶界面將會喪失機會。

適當的使用特效，如浮動提示和進度狀態，有助於客戶直觀的瞭解當前內容。在MXML中，你可以通過設置動畫達到這一目的。

下面的例子使用了Flex特性庫中的prebuilt特效，在這個例子中，當square組件顯示時，使用WipeRight特效，而消失時則使用了WipeLeft特效。

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:View id="square" width="100" height="100" backgroundColor="#666699" showEffect="WipeRight" hideEffect="WipeLeft"/>

<mx:HBox>
<mx:Button label="Display" click="square.visible=true"/>
<mx:Button label="Hide" click="square.visible=false"/>
</mx:HBox>
</mx:Application>

總結

Flex語言包含了一個豐富的用戶界面組件庫，MXML（一種基於XML的標記語言）和ActionScript（基於ECMA 262的、強類型面向對象編程語言）。MXML用於排布用戶界面和處理應用中其他方面的問題，而ActionScript用來處理用戶交互邏輯。由於 Flash平臺的普及，Flex使開發者可以開發廣泛的應用程序。開發者可以使用工業標準（如XML，CSS和SVC）和他們所熟悉的模式和範例來創建應用。Flex的分離協作方式和Macromedia公用組件模型也使得開發者和界面設計者能更好的進行協作，在可靠的、易於維護的架構上生產出在用戶體驗方面有突破性的產品。

關於作者

從1994-2000年，Christophe Coenraets 服務於Powersoft公司，該公司現在已被Sybase併購。他用Java工作始於1996年，併成爲綣ava and Internet Application 部門的技術專員。Christophe後來加入Macromedia公司成爲公司J2EE應用服務器JRun的技術專員。Christophe在這一職位上開始研究複雜Internet應用，着手將Flash前端與J2EE後端進行集成，Christophe目前是Macromedia的 new developer-centric Rich Internet Applications initiative的高級專員。過去的十年間，Christophe經常在全球範圍的研討會中發言。