亚洲欧洲天堂在线_ InfoQ: Flex與JSON及XML的互操作

InfoQ: Flex與JSON及XML的互操作

Source: http://www.jackherrington.com/screencasts/FlexAndJSON.mov

Flex之于Java，就像美麗之于大腦，或者還有別的說(shuō)法？誰(shuí)能告訴我？我所知道的是，Flex和Java真的是能配合得很好，能創(chuàng )建出難以置信的富 Internet應用（RIA）。你會(huì )問(wèn)Flex是什么？Flex是一個(gè)開(kāi)源框架，你可以通過(guò)基于標簽的MXML語(yǔ)言（以及ActionScript 3）來(lái)構建Flash應用。

請觀(guān)看：Jack有關(guān)Flex與JSON及XML互操作的演講（QuickTime格式，33MB）。

你可以從Adobe的站點(diǎn)下載（http://adobe.com/flex）Flex IDE即所謂Flex Builder，并由此開(kāi)始你的開(kāi)發(fā)之旅。Flex Builder是個(gè)商業(yè)產(chǎn)品，但它有很長(cháng)的免費試用階段，能讓你有足夠時(shí)間想清楚是不是值得掏這個(gè)錢(qián)。在這篇文章中，我會(huì )演示如何一起使用Flex和 Java。Java會(huì )運行在服務(wù)器端，而Flex運行在客戶(hù)端。這兩端間的通信協(xié)議可以是任何你想要的協(xié)議。但在這里，我會(huì )先使用XML，然后再使用 JSON，因為這兩種技術(shù)是我們在Web 2.0的世界里最常見(jiàn)的。

創(chuàng )建服務(wù)器代碼

XML示例由列表1中顯示的簡(jiǎn)單JSP文件開(kāi)始：

 列表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>

這個(gè)服務(wù)會(huì )每三十天為兩家公司（compa和compb）導出一些隨機的股票數據。第一家公司的數值從1000美元開(kāi)始，第二家從900美元開(kāi)始，而JSP代碼會(huì )每天為這兩個(gè)數值增加一個(gè)隨機數。

當我從命令行使用curl客戶(hù)端去訪(fǎng)問(wèn)這個(gè)服務(wù)時(shí)，我獲得的是下面這樣的結果：

 % 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>標簽，它包含了一個(gè)<day>標簽的集合。每個(gè)<day>標簽都有一個(gè)<num>標簽來(lái)表示天數，一個(gè)<compa>值來(lái)表示公司A的股票價(jià)格，以及<compb>值來(lái)表示公司B 的股票價(jià)格。兩只股票的數值隨著(zhù)每次請求而不同，因為它們是隨機生成的。

構建界面

現在我們已經(jīng)有了一個(gè)web服務(wù)來(lái)輸出股票的價(jià)格，我們還需要一個(gè)客戶(hù)端應用來(lái)展現它。我們要構建的第一個(gè)界面是表格風(fēng)格的界面，用它來(lái)簡(jiǎn)單的顯示數字。為了創(chuàng )建Flex項目，我們在Flex Builder IDE的新建菜單中選擇Flex Project。顯示如圖1：

圖1. 新Flex項目對話(huà)框

在這我們要做的就是給項目起個(gè)名字。我把它叫做xmldg，意思是XML數據表格。這樣就會(huì )創(chuàng )建出一個(gè)名叫xmldg.mxml的文件，其中只包含一個(gè)空白標簽。下面我會(huì )使用列表2中的代碼來(lái)代替這個(gè)空白標簽。

列表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應用程序代碼有兩個(gè)主要的組件。第一個(gè)是<mx:XML>標簽，它告訴Flex這是個(gè)XML數據源，并提供了URL。這樣就會(huì )創(chuàng )建一個(gè)叫做stockData（由id屬性指定）的局部變量，而<mx:DataGrid>組件可以把它當作dataProvider來(lái)使用。

代碼的剩余部分就是界面了。<mx:Panel>對象為表格提供了一個(gè)簡(jiǎn)潔的包裝。而<mx:DataGrid>用來(lái)顯示數據。在<mx:DataGrid>中，是一串<mx:DataGridColumn>對象，來(lái)告訴表格顯示什么數據。

如果我們從Flex Builder運行這個(gè)界面，你就會(huì )看到像圖2的這個(gè)樣子：

圖2. xmldg應用運行界面

我們可以拉動(dòng)滾動(dòng)條，改變窗口大小，并且看到數據表格也會(huì )改變大小。如果需要添加一點(diǎn)過(guò)濾的功能，我們就需要使用<mx:HSlider>控件來(lái)更新代碼，為它添加一個(gè)水平的滑塊，來(lái)指定表格從哪一天開(kāi)始顯示數據。

比如，如果我們設置滑塊到6，它就會(huì )只顯示從第六天開(kāi)始的數據。代碼如列表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還包含著(zhù)<mx:Label>和<mx:HSlider>控件。slider用于<mx:DataGrid>的dataProvider字段。

讓我們來(lái)更進(jìn)一步看看dataProvider屬性：

{stockData..day.(num >= daySlider.value )}

這里使用的是ActionScript的E4X語(yǔ)法來(lái)減少<mx:DataGrid>控件的數據集合，使其只包含那些<num>值大于或等于滑塊值的標簽。Flex非常智能，它能觀(guān)察到滑塊的變化事件，并自動(dòng)更新數據表格。

當我們從Flex Builder運行這個(gè)界面時(shí)，它看起來(lái)就像是圖3這樣：

圖3. 可過(guò)濾性網(wǎng)格

我們可以調整滑塊的位置，并查看到表格中的數據如何變化。圖4顯示的是我把滑塊設到12時(shí)的樣子：

圖4. 滑塊設為12時(shí)的顯示界面

這只是個(gè)使用ActionScript中E4X的簡(jiǎn)單例子。E4X語(yǔ)法使得處理XML變得非常容易，以至于你不會(huì )再愿意使用任何其他辦法來(lái)處理XML了。

畫(huà)圖表

數據表格有點(diǎn)讓人厭倦了，至少對我來(lái)說(shuō)是這樣。我喜歡有圖像的。那么讓我們來(lái)干點(diǎn)什么——在界面上放置一張圖表。我們創(chuàng )建了一個(gè)新的名叫xmlgph（意思是XML圖表）的項目，并用列表4中的代碼來(lái)代替自動(dòng)生成的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" 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:LineChart id="chart" 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>控件，用來(lái)顯示一張數值圖表，而不是一個(gè)表格。另外還有個(gè)<mx:Legend>控件來(lái)顯示不同顏色線(xiàn)條代表的公司名稱(chēng)。而兩個(gè)<mx:LineSeries>對象就類(lèi)似于<mx:DataGridColumn>的功能。它們讓線(xiàn)性圖表知道在哪個(gè)軸上顯示什么數據。

當我們從Flex Builder運行這個(gè)界面是，看到的會(huì )是圖5這個(gè)樣子：

圖5. 線(xiàn)形圖例

還不錯吧？因為<mx:HSlider>控件還在那里，所以我們可以移動(dòng)滑塊的位置來(lái)改變圖表的起始日期。

事實(shí)上，只需要一點(diǎn)點(diǎn)小的改變，我們就可以為用戶(hù)在滑塊上提供兩個(gè)滑動(dòng)桿，這樣它們就能獨立移動(dòng)來(lái)讓這個(gè)圖表只顯示一段日期內的數據。代碼顯示如列表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" 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="Date Range " />
 <mx:HSlider minimum="0 " maximum="30 " id="daySlider " snapInterval="1 "
 thumbCount="2 " values="[0,30] " />
 </mx:HBox>

 <mx:LineChart id="chart"
 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中的部分實(shí)體進(jìn)行編碼。如果從Flex Builder運行這段代碼，我們會(huì )看到圖6顯示的那樣：

圖6.窗口型線(xiàn)形圖

以上這些就是范例演示的XML部分。下面開(kāi)始我會(huì )演示如何構建一個(gè)能調用JSON服務(wù)的Flex應用程序。

構建JSON服務(wù)器

我們由創(chuàng )建一個(gè)JSON數據源作為開(kāi)端，來(lái)創(chuàng )建JSON閱讀應用程序。同樣，我們還是使用可靠的JSP來(lái)給構建JSON編碼的數據流。這段服務(wù)器上的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服務(wù)一樣，但我們創(chuàng )建的不是XML標簽，而是JSON編碼的數據。

當我從命令行運行curl時(shí)，得到的頁(yè)面如下所示：

 % curl "http://localhost:8080/jsp-examples/flexds/json.jsp"
 [{"compa":992.2139849199265,"compb":939.89135379532}, ...]

而這恰恰是JavaScript客戶(hù)端能夠理解的東西。

使用JSON服務(wù)

Flex是用Flash播放器的編程語(yǔ)言ActionScript 3編寫(xiě)的。它和JavaScript很類(lèi)似，但它沒(méi)有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 id="jsonservice"
 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 id="dg" width="100%" height="100%">
 <mx:columns>
 <mx:DataGridColumn dataField="compa " />
 <mx:DataGridColumn dataField="compb " /> </mx:columns>
 </mx:DataGrid>
 </mx:Panel>
 </mx:Application>

因為服務(wù)器返回的是JSON文本，我們無(wú)法使用<mx:XML>標簽來(lái)取得數據。因此我們用的是<mx:HTTPService>標簽。它的工作原理跟<mx:XML>很像。你需要給它一個(gè)服務(wù)的URL，并且告訴它結果的格式（比如文本）以及HTTP服務(wù)發(fā)回響應數據時(shí)需要調用的ActionScript方法。

在這個(gè)例子中，我為結果處理方法指定的是在<mx:Script>標簽中定義的onJSONResult方法。這個(gè)方法會(huì )去掉所有空格，并把 JSON文本傳遞給JSONDecoder對象。接著(zhù)它將<mx:DataGrid>控件的dataProvider設置成 JSONDecoder返回的處理結果。

所有這些都是安全的，因為ActionScript不支持eval方法。JSONDecoder類(lèi)是個(gè)簡(jiǎn)單狀態(tài)機解析器，來(lái)實(shí)時(shí)地從文本構建出對象。最糟糕的情況可能是這樣的過(guò)程會(huì )需要一段比較長(cháng)的時(shí)間，如果JSON文本太大的話(huà)。

下面干什么

Flex是基于Flash的，而Flash可以跟任何技術(shù)進(jìn)行交互。它可以直接與基于SOAP的web服務(wù)交互。它甚至能跟AMF（Adobe Message Format）這樣的協(xié)議進(jìn)行二進(jìn)制數據的通信。

如果這是你第一次使用Flex，你可能會(huì )想著(zhù)如何用Flex來(lái)構建一個(gè)Flash小部件，放到自己的網(wǎng)站上以更吸引人的方式來(lái)顯示數據。為了確保 Flash應用的尺寸足夠小方便下載，記得一定要使用新版本Flash播放器中的運行時(shí)共享庫（Runtime Shared Library，RSL）。這可以讓你在客戶(hù)端緩存大尺寸的庫（比如Flex庫），并在不同的Flash應用中重用這些庫。

Flex和Java是一個(gè)強大的組合。Java提供了優(yōu)秀的的服務(wù)器后端支持。而Flex和ActionScript 3提供的是一個(gè)易于編寫(xiě)和采用的通用跨平臺的GUI層。

查看英文原文：Flex for XML and JSON。

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久