Flex之于Java，就像美麗之于大腦，或者還有別的說法？誰能告訴我？我所知道的是，Flex和Java真的是能配合得很好，能創建出難以置信的富 Internet應用（RIA）。你會問Flex是什么？Flex是一個開源框架，你可以通過基于標簽的MXML語言（以及ActionScript 3）來構建Flash應用。
相關
請觀看：Jack有關Flex與JSON及XML互操作的演講 （QuickTime格式，33MB）。
你可以從Adobe的站點下載（http://adobe.com/flex）Flex IDE即所謂Flex Builder，并由此開始你的開發之旅。Flex Builder是個商業產品，但它有很長的免費試用階段，能讓你有足夠時間想清楚是不是值得掏這個錢。在這篇文章中，我會演示如何一起使用Flex和 Java。Java會運行在服務器端，而Flex運行在客戶端。這兩端間的通信協議可以是任何你想要的協議。但在這里，我會先使用XML，然后再使用 JSON，因為這兩種技術是我們在Web 2.0的世界里最常見的。
創建服務器代碼
XML示例由列表1中顯示的簡單JSP文件開始：
列表1. xml.jsp
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="1.2">
<jsp:directive.page import="java.text.*"/>
<jsp:directive.page import="java.lang.*"/>
<jsp:directive.page contentType="text/xml"/>
<days><jsp:scriptlet>
<![CDATA[
double compa = 1000.0;
double compb = 900.0;
for (int i = 0; i<=30; i++) {
compa += ( Math.random() * 100 ) - 50;
compb += ( Math.random() * 100 ) - 50;
]]>
</jsp:scriptlet>
<day>
<num><jsp:expression>i</jsp:expression></num>
<compa><jsp:expression>compa</jsp:expression></compa>
<compb><jsp:expression>compb</jsp:expression></compb>
</day>
<jsp:scriptlet>
<![CDATA[ }
]]>
</jsp:scriptlet>
</days>
</jsp:root>
這個服務會每三十天為兩家公司（compa和compb）導出一些隨機的股票數據。第一家公司的數值從1000美元開始，第二家從900美元開始，而JSP代碼會每天為這兩個數值增加一個隨機數。
當我從命令行使用curl客戶端去訪問這個服務時，我獲得的是下面這樣的結果：
% curl "http://localhost:8080/jsp-examples/flexds/xml.jsp"
<days><day><num>0</num><compa>966.429108587301</compa>
<compb>920.7133933216961</compb>
</day>...</days>
根標簽是<days>標簽，它包含了一個<day>標簽的集合。每個<day>標簽都 有一個<num>標簽來表示天數，一個<compa>值來表示公司A的股票價格，以及<compb>值來表示公司B 的股票價格。兩只股票的數值隨著每次請求而不同，因為它們是隨機生成的。
構建界面
現在我們已經有了一個web服務來輸出股票的價格，我們還需要一個客戶端應用來展現它。我們要構建的第一個界面是表格風格的界面，用它來簡單的顯示數字。為了創建Flex項目，我們在Flex Builder IDE的新建菜單中選擇Flex Project。顯示如圖1：
圖1. 新Flex項目對話框
在這我們要做的就是給項目起個名字。我把它叫做xmldg，意思是XML數據表格。這樣就會創建出一個名叫xmldg.mxml的文件，其中只包含一個空白標簽。下面我會使用列表2中的代碼來代替這個空白標簽。
列表2. xmldg.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:XML source="http://localhost:8080/jsp-examples/flexds/xml.jsp" id="stockData" />
<mx:Panel title="Stock Data" width="100%" height="100%">
<mx:DataGrid dataProvider="{stockData..day}" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="compa" />
<mx:DataGridColumn dataField="compb" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
xmldg應用程序代碼有兩個主要的組件。第一個是<mx:XML>標簽，它告訴Flex這是個XML數據源，并提供了URL。這樣就會創建一個叫做stockData（由id屬性指定）的局部變量，而<mx:DataGrid>組件可以把它當作dataProvider來使用。
代碼的剩余部分就是界面了。<mx:Panel>對象為表格提供了一個簡潔的包裝。而<mx:DataGrid>用來顯示數據。在<mx:DataGrid>中，是一串<mx:DataGridColumn>對象，來告訴表格顯示什么數據。
如果我們從Flex Builder運行這個界面，你就會看到像圖2的這個樣子：
圖2. xmldg應用運行界面
我們可以拉動滾動條，改變窗口大小，并且看到數據表格也會改變大小。如果需要添加一點過濾的功能，我們就需要使用<mx:HSlider>控件來更新代碼，為它添加一個水平的滑塊，來指定表格從哪一天開始顯示數據。
比如，如果我們設置滑塊到6，它就會只顯示從第六天開始的數據。代碼如列表3所示：
列表3. xmldg2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:XML source="http://localhost:8080/jsp-examples/flexds/xml.jsp" id="stockData" />
<mx:Panel title="Stock Data" width="100%" height="100%" layout="vertical"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:HBox>
<mx:Label text="Start Day" />
<mx:HSlider minimum="0" maximum="30" id="dayslider" snapInterval="1" />
</mx:HBox>
<mx:DataGrid dataProvider="{stockData..day.(num >= daySlider.value )}" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="num" headerText="day" />
<mx:DataGridColumn dataField=="compa" headerText="Company A" />
<mx:DataGridColumn dataField=="compb" headerText="Company B" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
還有其他的一些標簽，但規則基本上還是一樣的。<mx:Panel>標簽可以包含所有內容。其中可以是<mx:HBox>（水平 格）標簽，并且box還包含著<mx:Label>和<mx:HSlider>控件。slider用于<mx:DataGrid>的dataProvider字段。
讓我們來更進一步看看dataProvider屬性：
{stockData..day.(num >= daySlider.value )}
這里使用的是ActionScript的E4X語法來減少<mx:DataGrid>控件的數據集合，使其只包含那些<num>值大于或等于滑塊值的標簽。Flex非常智能，它能觀察到滑塊的變化事件，并自動更新數據表格。
當我們從Flex Builder運行這個界面時，它看起來就像是圖3這樣：
圖3. 可過濾性網格
我們可以調整滑塊的位置，并查看到表格中的數據如何變化。圖4顯示的是我把滑塊設到12時的樣子：
圖4. 滑塊設為12時的顯示界面
這只是個使用ActionScript中E4X的簡單例子。E4X語法使得處理XML變得非常容易，以至于你不會再愿意使用任何其他辦法來處理XML了。
畫圖表
數據表格有點讓人厭倦了，至少對我來說是這樣。我喜歡有圖像的。那么讓我們來干點什么——在界面上放置一張圖表。我們創建了一個新的名叫xmlgph（意思是XML圖表）的項目，并用列表4中的代碼來代替自動生成的xmlgph.xml文件。
列表4. xmlgph.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:XML source="http://localhost:8080/jsp-examples/flexds/xml.jsp" />
<mx:Panel title="Stock Data" width="100%" height="100%" layout="vertical"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:HBox>
<mx:Label text="Start Day" />
<mx:HSlider? minimum="0" maximum="30" snapInterval="1" />
</mx:HBox>
<mx:LineChart dataProvider="{stockData..day.(num >= daySlider.value )}"
width="100%" height="100%">
<mx:series>
<mx:LineSeries xField="num" yField="compa" displayName="Company A" />
<mx:LineSeries xField="num" yField="compb" displayName="Company B" />
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{chart}" />
</mx:Panel>
</mx:Application>
代碼就跟xmldb2一樣，但<mx:LineChart>控件替代了<mx:DataGrid>控件，用來顯示一張數值圖表， 而不是一個表格。另外還有個<mx:Legend>控件來顯示不同顏色線條代表的公司名稱。而兩 個<mx:LineSeries>對象就類似于<mx:DataGridColumn>的功能。它們讓線性圖表知道在哪個軸上顯 示什么數據。
當我們從Flex Builder運行這個界面是，看到的會是圖5這個樣子：
圖5. 線形圖例
還不錯吧？因為<mx:HSlider>控件還在那里，所以我們可以移動滑塊的位置來改變圖表的起始日期。
事實上，只需要一點點小的改變，我們就可以為用戶在滑塊上提供兩個滑動桿，這樣它們就能獨立移動來讓這個圖表只顯示一段日期內的數據。代碼顯示如列表5所示：
列表5. xmlgph2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:XML source="http://localhost:8080/jsp-examples/flexds/xml.jsp" />
<mx:Panel title="Stock Data " width="100% " height="100% " layout="vertical "
paddingBottom="10 " paddingLeft="10 " paddingRight="10 " paddingTop="10 ">
<mx:HBox>
<mx:Label text="Date Range " />
<mx:HSlider minimum="0 " maximum="30 " snapInterval="1 "
thumbCount="2 " values="[0,30] " />
</mx:HBox>
<mx:LineChart
dataProvider="{stockData..day.(num>=daySlider.values[0] &&
num<=daySlider.values[1])}"
width="100%" height="100%">
<mx:series>
<mx:LineSeries xField="num" yField="compa" displayName="Company A" />
<mx:LineSeries xField="num" yField="compb" displayName="Company B" />
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{chart}" />
</mx:Panel>
</mx:Application>
我們需要做的就是為<mx:HSlider>標簽添加thumbCount和values屬性，并更 新<mx:DataGrid>標簽中的dataProvider。因為這是段XML，我必須對dataProvider中的部分實體進行編 碼。如果從Flex Builder運行這段代碼，我們會看到圖6顯示的那樣：
圖6.窗口型線形圖
以上這些就是范例演示的XML部分。下面開始我會演示如何構建一個能調用JSON服務的Flex應用程序。
構建JSON服務器
我們由創建一個JSON數據源作為開端，來創建JSON閱讀應用程序。同樣，我們還是使用可靠的JSP來給構建JSON編碼的數據流。這段服務器上的JSP代碼顯示如列表6：
列表6. json.jsp
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="1.2">
<jsp:directive.page import="java.text.*"/>
<jsp:directive.page import="java.lang.*"/>
<jsp:directive.page contentType="text/json"/>
[<jsp:scriptlet>
<![CDATA[
double compa = 1000.0;
double compb = 900.0;
for (int i = 0; i<=30; i++) {
compa += ( Math.random() * 100 ) - 50;
compb += ( Math.random() * 100 ) - 50;
if ( i > 0 ) out.print( "," );
]]> </jsp:scriptlet>{"compa":<jsp:expression>compa</jsp:expression>,"compb":<jsp:expres
sion>compb</jsp:expression>}<jsp:scriptlet>
<![CDATA[ }
]]>
</jsp:scriptlet>]
</jsp:root>
這就跟XML服務一樣，但我們創建的不是XML標簽，而是JSON編碼的數據。
當我從命令行運行curl時，得到的頁面如下所示：
% curl "http://localhost:8080/jsp-examples/flexds/json.jsp"
[{"compa":992.2139849199265,"compb":939.89135379532}, ...]
而這恰恰是JavaScript客戶端能夠理解的東西。
使用JSON服務
Flex是用Flash播放器的編程語言ActionScript 3編寫的。它和JavaScript很類似，但它沒有eval方法。那么我們如何將JSON文本轉換成ActionScript數據呢？幸運的是，免費的ActionScript 3核心庫(http://as3corelib.googlecode.com)包含了JSON解碼器和JSON編碼器。
列表7中的代碼演示了JSONDecoder對象的用法：
列表7. jsondg.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="jsonservice.send()">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import com.adobe.serialization.json.JSONDecoder;
private function onJSONResult( event:ResultEvent ) : void {
var data:String = event.result.toString();
data = data.replace( /\s/g, '' );
var jd:JSONDecoder = new JSONDecoder( data );
dg.dataProvider = jd.getValue();
}
]]>
</mx:Script>
<mx:HTTPService
url="http://localhost:8080/jsp-examples/flexds/json.jsp"
resultFormat="text" result="onJSONResult(event)" />
<mx:Panel title="Stock Data " width="100% " height="100% ">
<mx:DataGrid width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="compa " />
<mx:DataGridColumn dataField="compb " />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
因為服務器返回的是JSON文本，我們無法使用<mx:XML>標簽來取得數據。因此我們用的 是<mx:HTTPService>標簽。它的工作原理跟<mx:XML>很像。你需要給它一個服務的URL，并且告訴它結果的格式（比如文本）以及HTTP服務發回響應數據時需要調用的ActionScript方法。
在這個例子中，我為結果處理方法指定的是在<mx:Script>標簽中定義的onJSONResult方法。這個方法會去掉所有空格，并把 JSON文本傳遞給JSONDecoder對象。接著它將<mx:DataGrid>控件的dataProvider設置成 JSONDecoder返回的處理結果。
所有這些都是安全的，因為ActionScript不支持eval方法。JSONDecoder類是個簡單狀態機解析器，來實時地從文本構建出對象。最糟糕的情況可能是這樣的過程會需要一段比較長的時間，如果JSON文本太大的話。
下面干什么
Flex是基于Flash的，而Flash可以跟任何技術進行交互。它可以直接與基于SOAP的web服務交互。它甚至能跟AMF（Adobe Message Format）這樣的協議進行二進制數據的通信。
如果這是你第一次使用Flex，你可能會想著如何用Flex來構建一個Flash小部件，放到自己的網站上以更吸引人的方式來顯示數據。為了確保 Flash應用的尺寸足夠小方便下載，記得一定要使用新版本Flash播放器中的運行時共享庫（Runtime Shared Library，RSL）。這可以讓你在客戶端緩存大尺寸的庫（比如Flex庫），并在不同的Flash應用中重用這些庫。
Flex和Java是一個強大的組合。Java提供了優秀的的服務器后端支持。而Flex和ActionScript 3提供的是一個易于編寫和采用的通用跨平臺的GUI層。