Macromedia Flex 標記語言簡介

Macromedia Flex 標記語言簡介 
    Macromedia Flex(開發代號為Royale)是一個展現服務器開發者可以用它來開發新一代的復雜Internet應用(RIAs  Rich Internet Applications)復雜Internet應用融合了桌面應用的可用性和web應用的易於管理的優點

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

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

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

Flex 語言簡介

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

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

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

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

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

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

<?xml version= encoding=iso?>
<mx:Application xmlns:mx=>
<mx:TextInput id=source width=/>
<mx:Button label=Copy click=destinationtext=sourcetext/>
<mx:TextInput id=destination width=/>
</mx:Application>

Flex開發與部署模型

    要開發並部署這個應用一般要經過以下步驟

     用你熟悉的IDE或Flex的所見即所得開發工具編寫HelloWoldmxml文件

     把該文件部署到應用服務器上一般可以通過拷貝HelloWorldmxml到某個web應用的目錄下或將HelloWorldmxml作為應用的一部分打包到WAR文件中去

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

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

使用MXML用戶界面組件

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

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

    下面給出一個在Flex環境下具有三個面板的傳統email界面HBox容器中的Tree是水平排列的而VBox容器中的DataGrid和TextArea則是垂直排列的

<?xml version= encoding=iso?>
<mx:Application xmlns:mx=>
<mx:HBox>
<mx:Tree/>
<mx:VBox>
<mx:DataGrid/>
<mx:TextArea/>
</mx:VBox>
</mx:HBox>
</mx:Application>

編寫ActionScript代碼

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

    對於簡單的交互可以在標簽的事件屬性上直接編寫ActionScript語句例如在HelloWorld應用中存在Button的click事件監聽器中的ActionScripts語句能把source TextInput 的內容拷貝到destination TextInput中

<?xml version= encoding=iso?>
<mx:Application xmlns:mx=>
<mx:TextInput id=source width=/>
<mx:Button label=Copy click=destinationtext=sourcetext/>
<mx:TextInput id=destination width=/>
</mx:Application>

    當邏輯更為復雜的時候可以定義獨立的ActionScript函數然後在組件的事件監聽器中調用例如你可以象下面一樣重寫HelloWorld應用

<?xml version= encoding=iso?>
<mx:Application xmlns:mx=>
<mx:script>
function copy() {
destinationtext=sourcetext
}
</mx:script>
<mx:TextInput id=source width=/>
<mx:Button label=Copy click=copy()/>
<mx:TextInput id=destination width=/>
</mx:Application>

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

定義自己的組件

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

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

<?xml version= encoding=iso?>
<mx:VBox xmlns:mx=>
<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>
    組件的名字就是源文件的名字如源文件的名字是CreditCardChoosermxml組件的名字就是CreditCardChooser這樣這個標簽名就可以用了下面的例子就用上了剛才創建的CreditCardChoose組件

<?xml version= encoding=iso?>
<mx:Application xmlns:mx=>
<mx:Label text=Select a credit card:/>
<CreditCardChooser/>
</mx:Application>

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

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

數據訪問

    Macromedia Flex為面向服務器架構（SOA – serviceoriented 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= encoding=iso?>
<mx:Application xmlns:mx=>
<mx:WebService id=wsStock wsdl=>
<mx:operation name=getQuote>
<mx:request>
<symbol>{symboltext}</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=wsStockgetQuotesend()/>
</mx:HBox>
<mx:Label id=quote fontWeight=bold>{wsStockgetQuoteresult}</mx:Label>
</mx:Application>

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

使用層級樣式表（CSS）

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

    下面是一個名為maincss的外部樣式表

@fontface {
src: url(Lf);
fontfamily: mainFont;
}

error {color: #FF; fontsize: ;}
title {fontfamily: mainFontBold;fontsize: ;}
TextArea {backgroundColor: #EEFEE;}

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

<?xml version= encoding=iso?>
<mx:Application xmlns:mx=>
<mx:style src=maincss/>
<mx:Label styleName=error text=This is an error/>
<mx:Label styleName=title text=This is a title/>
<mx:TextArea width= height= wordWrap=true>This is a TextArea</mx:TextArea>
</mx:Application>

特效

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

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

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

<?xml version= encoding=iso?>
<mx:Application xmlns:mx=>
<mx:View id=square width= height= backgroundColor=# showEffect=WipeRight hideEffect=WipeLeft/>
<mx:HBox>
<mx:Button label=Display click=squarevisible=true/>
<mx:Button label=Hide click=squarevisible=false/>
</mx:HBox>
</mx:Application>

總結

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

關於作者:
    從  年Christophe Coenraets 服務於 Powersoft 公司該公司現在已被Sybase並購他用Java工作始於年並成為公司Java and Internet Application 部門的技術專員Christophe後來加入Macromedia公司成為公司JEE應用服務器JRun的技術專員Christophe在這一職位上開始研究復雜Internet應用著手將Flash前端與JEE後端進行集成Christophe 目前是 Macromedia 的 new developercentric Rich Internet Applications initiative的高級專員過去的十年間Christophe經常在全球范圍的研討會中發言 

From:http://tw.wingwit.com/Article/program/yxkf/201401/30226.html