Flex与外部的数据通信
視頻課：https://edu.csdn.net/course/play/7621
本章簡介
第3章講解了視圖狀態、Flex頁面間的跳轉、Flex應用的模態窗體、數據綁定、使用拖放，圖表等知識。本章將學習Flex與外部的數據通信。在實際開發過程中，Flex應用的數據往往來自于業務邏輯數據提供的服務器端。雖然Flex是用于開發富客戶端界面的強大平臺，可以編寫業務邏輯，但從架構的角度看，仍然需要將核心的業務邏輯放在Flex程序之外。Flex與外部程序的數據通信主要包括HTTPService. WebService和Remoting 3種方式。
核心技能部分
?
?
從分層角度來看，企業應用系統主要分為三個層次，如表4-1-1所示。
表5-1-1企業應用主要分層
企業應用層次 ? | 職責簡介 ? |
展現層 | 主要負責信息展示和人機交互的相關邏輯 |
領域層 | 主要完成企業應用業務邏輯，是系統的核心部分 |
數據源層 | 負責數據的提取和持久化 |
展現層主要負責信息展示以及用戶與軟件之間的交互邏輯，“展現層”接受用戶輸入并將用戶的意圖轉換為對“領域層’或“數據源層’邏輯的調用。
領域層也被稱為“業務邏輯層”，主要解決應用所針對業務領域的問題。該層負責校驗來自“展現層”的輸人數據，根據“展現層’用戶指令進行業務邏輯處理，調用“數據源層’的邏輯實現數據的訪問和持久化。
數據源層主要負責數據訪問和持久化，數據可能來自于數據庫或者消息系統。對干絕大多數企業應用來說，數據源層主要負責同數據庫系統的交互。
Flex+Java企業應用中，“展現層’邏輯完全運行在客戶端的Flash虛擬機中，而“領域層”和“數據源層”邏輯則運行在服務器端的Java虛擬機中，如圖5.1.1所示。
?
圖5.1.1 Flex+java企業應用層次邏輯分布圖
???
?從圖5.1.1中可以看出，客戶端系統與服務端系統完全用不同的語言實現，因此系統是異構的。同時，客戶端代碼運行在客戶端的ActionScript虛擬機中。而服務器端代碼則運行在服務器上的Java虛擬機中，因此系統又是分布式的。這與我們開發傳統Web應用完全不同，
傳統Web應用中所有Java代碼，包括業務邏輯代碼和生成人機界面的代碼都在服務器Java虛擬機中執行，如圖5.1.2所示。
?
圖5.1.2 傳統web應用層次邏輯分布圖
????基于傳統Web技術進行開發，很多開發者已經習慣了“接受客戶端的請求，然后執行業務邏軾，最后輸出人機界面”這種工作模式。基于Jsp技術的MVC框架，比如Struts,Jsf等，都是基于這種工作模式開發的。
????因此、Flex+Java所開發的BS應用與傳統Web所開發的B/S系統最大的區就是:使用Flex+Java開發的B/S應用系統中，B系統(客戶端系統)和S系統(服務器端系統)完全分離、各自獨立地運行在不同的CPU和虛擬機中。B系統主要負責“展現層”邏輯，而S系統主要負責“領域層”和“數據源層”邏輯。因此，Flex+J ava所開發的企業應用系統是異構的分布式系統，這種異構分布式系統給我們帶來了以下需要思考的問題:
??異構的客戶端系統和服務器端系統如何通信?
??如何保持分布式的客戶端系統和服務器端系統之間的狀態一致性?
????我們在進行架構設計時，必須要清楚并解決這些問題，才能順利進行企業應用開發，下面兩個小節主要針對以上兩個問題進行闡述，并給出解決方案。
1.1?確定Flex客戶端系統和Java服務器端通信框架
????開發異構系統時，如何進行通信和傳遞數據是我們比較關注的問題。使用Flex+Java開發基于B/S結構企業應用，客戶端和服務器端的通信協議是我們所熟知的HTTP協議。在Flex中，基于HTTP協議訪問服務器的通信組件有三個:
?????HttpService(mx.rpc.http.mxml.HTTPService)
?????WebService(mx.rpc.soap.mxml.WebService)
?????RemoteObject(mx.rpc.remoting.mxml.RemoteObject)
HttpService組件可以調用很多不同技術的服務端頁面，比如JSP,ASP ,PHP,Servlet等在大多數情況下，使用HttpService訪問服務器端頁面來完成Flex客戶端與服務器端的數據交互，服務器端返回的結果一般都是XML格式的數據。下面是Adobe官方關于HTTPService組件的例子應用:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
???creationComplete="feedRequest.send()" layout="absolute">
???<mx:HTTPService id="feedRequest"
??????url="http://weblogs.macromedia.com/mchotin/index.xml"
??????useProxy="false" />
???<mx:Panel x="10" y="10" width="475" height="400"
????????title="{feedRequest.lastResult.rss.channel.title}">
???????<mx:DataGrid id="dgPosts" x="20" y="20" width="400"
???????????dataProvider="{feedRequest.lastResult.rss.channel.item}">
???????????<mx:columns>
??????????????<mx:DataGridColumn headerText="Posts" dataField="title"/>
??????????????<mx:DataGridColumn headerText="Date"
?????????????? ????dataField="pubDate" width="150" />
???????????</mx:columns>
???????</mx:DataGrid>
???????<mx:LinkButton x="20" y="225" label="Read Full Post"
???????????????????click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/>
???????<mx:TextArea x="20" y="175" width="400"/>
???</mx:Panel>
</mx:Application>
這個例子的運行需要能夠訪問互聯網，在本例中通過調用URL為http://weblogs.macromedia.com/mchotin/index.xml的HTTPService ,返回了一個XML文件，并將這個XML作為Datagrid控件的dataProvider，從而通過Datagrid將XML文件中的數據展示出來。XML中的數據主要是網站最近的發帖記錄。這個例子說明，HTTPService的工作方式主要通過請求URL獲取XML格式數據。
上例運行后 效果如圖5.1.3所示。
?
圖5.1.3 HttpService 示例
????同HTTPService類似，Flex應用可以調用URL所表示WSDL 1.1服務，返回SOAP1.1格式的調用結果。SOAP也是基于XML格式規范，因此。使用HTTPService和WebService組件同服務器之間的交互都是通過XML進行的。下面是Adobe官方關于WebService組件的例子應用。 ?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="wsBlogAggr.getMostPopularPosts.send()">
<mx:WebService id="wsBlogAggr"
?????wsdl="http://weblogs.macromedia.com/mxna/webservices/
mxna2.cfc?wsdl"
?????useProxy="false">
??????<mx:operation name="getMostPopularPosts">
?????????<mx:request>
????????????<daysBack>30</daysBack>
?????????????<limit>{cbxNumPosts.value}</limit>
?????????</mx:request>
?????</mx:operation>
</mx:WebService>
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
????title="Most Popular Posts">
????<mx:ComboBox x="30" y="25" id="cbxNumPosts"
???????change="wsBlogAggr.getMostPopularPosts.send()">
???????<mx:Object label="Top 5" data="5" />
???????<mx:Object label="Top 10" data="10" />
???????<mx:Object label="Top 15" data="15" />
????</mx:ComboBox>
????<mx:DataGrid x="30" y="75" id="dgTopPosts" width="400"
??????dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">
<mx:columns>
<mx:DataGridColumn headerText="Top Posts"
dataField="postTitle"/>
<mx:DataGridColumn headerText="Clicks" dataField="clicks"
width="75"/>
</mx:columns>
</mx:DataGrid>
<mx:LinkButton x="30" y="250"
label="Select an item and click here for full post"/>
</mx:Panel>
</mx:Application>
?
??在這個例子中，通過WebService組件調用了服務器所提供的WebService服務，返回SOAP
格式的XML數據，根據請求參數，XML數據表示網站中最近30天的點擊率排名前5,10或者15的博客。
??通過這兩個例子我們可以看到，使用HTTPService和WebService無需第三方框架，在服務器端直接編寫相應的服務即可，所以比較容易理解和使用。但是，無論使用HTTPService還是WebService訪問服務器，Flex客戶端和服務器之間傳遞的都是XML數據，客戶端和服務器端處理的也是XML數據。對于企業應用來說，客戶端和服務器端交互的數據量往往很大，因此使用XML作為數據交換格式會降低傳輸效率和轉換效率。同時，處理XML數據的代碼也遠比處理對象的代碼繁瑣，并且難以閱讀和調試。因此，在企業應用開發中，客戶端系統和服務器端系統之間采用HTTPService和WebService進行通信的部分較少，即使使用這兩個組件。也應當用來傳遞少量、數據格式不易發生變化的數據。
????在企業應用開發中，Flex客戶端與后臺服務器之間的大量通信都是采用RemoteObject完成的。RemoteObject組件在“第三方軟件”的配合下，能夠調用后臺服務器對象上的方法，比如Java對象或者.net對象上的方法，從而實現客戶端與服務器端的通信。在客戶端使用RemoteObject可以直接將ActionScript對象作為調用的參數和返回結果。這一點聽起來似乎有些神奇，但其實也很容易理解:Adobe公司定義了一種二進制數據格式AMF(Action Message Format)，用于客戶端與服務器端的數據交互。 ???其實，使用AMF格式交換數據與使用XML進行數據交換的主要區別在于: AMF二進制數據的轉換和傳輸效率更高，同時需要“第三方軟件”用于解釋AMF格式數據。Flex客戶端RemoteObject組件與服務器端通過HTTP協議傳遞AMF格式的二進制數據進行通信的大致過程如下:
????1)客戶端RemoteObject將調用參數中的ActionScript對象序列化為AMF數據格式，然后發出調用請求。
????2)服務器的“第三方軟件“獲取HTTP請求流。
????3)服務器的“第三方軟件”對HTTP請求流進行解析，并且建立響應消息。對HTTP請求流進行解析，解析過程包括解釋AMF格式數據，將ActionScript對象的AMF數據按照事先確定的協議“反序列化”為服務器端對象，比如Java對象，然后用這些參數調用客戶端指定的服務器對象上的方法。
????4)服務器的“第三方軟件，將調用的結果“序列化”為AMF格式的數據流。
????5)服務器發送HTTP響應給Fee客戶端。
????6) Flex客戶端解釋AMF格式數據流，將調用結果序列化為ActionScript對象。
下面我們給出一段Flex官方文檔代碼來展示Rernoteobject對象的使用:
<?xml version="1.0"?>
?
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
????<mx:Script>
????????<![CDATA[
????????????import mx.controls.Alert;
????????????import mx.rpc.remoting.RemoteObject;
????????????import mx.rpc.events.ResultEvent;
????????????import mx.rpc.events.FaultEvent;
????????????[Bindable]
????????????public var empList:Object; ?????????
????????????public var employeeRO:RemoteObject;
????????????public function useRemoteObject(intArg:int, strArg:String):void {
????????????????employeeRO = new RemoteObject();
????????????????employeeRO.destination = "SalaryManager";
????????????????employeeRO.getList.addEventListener("result",
???????????????????????????????????????????????????????????getListResultHandler);
????????????????employeeRO.addEventListener("fault", faultHandler);
????????????????employeeRO.getList(deptComboBox.selectedItem.data);
????????????}
????????????public function getListResultHandler(event:ResultEvent):void {
?????????????????// 遠程調用成功所要完成的處理。
????????????????empList=event.result;
????????????}
?
????????????public function faultHandler (event:FaultEvent):void {
?????????????// 調用失敗所要完成的處理。
????????????????Alert.show(event.fault.faultString, 'Error');
????????????}
????????]]>
????</mx:Script>
????<mx:ComboBox id="deptComboBox"/>
</mx:Application>
?
在上面的代碼中首先看一下函數useRemoteObject這個函數中首先使用語句:
??employeeRO = new RemoteObject();
創建了一個RemoteObject對象employeeRo。然后通過語句:
employeeRO.destination = "SalaryManager";
將RemoteObject對象的destination屬性賦值為一個字符串"?SalaryManager?"，destination屬性表示遠程對象調用的“目的地’，請求發送到服務器端后，服務器端的“第三方軟件’接收到請求后會檢查配置文件，找到destination值所映射的“服務器端組件”，從而可以調用該組件上的方法。接下來使用語句:
employeeRO.getList.addEventListener("result", getListResultHandler);????
設置遠程服務調用成功時的處理方法，使用語句:
employeeRO.addEventListener("fault", faultHandler);
設置遠程服務調用失敗時的處理方法。最后，使用語句:
employeeRO.getList(deptComboBox.selectedItem.data);
以deptComboBox.selectedItem.data為參數，調用destination屬性所映射的“服務器端組件”的getList方法，這里，“服務端組件”必須有一個名為getList的公開方法，調用“服務器端組件”的getList方法是異步調用，因此它不會阻塞線程來等待調用結果的返回，調用結果的返回時會在getListResultHandler方法中進行處理。在getListlRsultHandler方法中，我們到語句:
empList=event.result;
????該語句表示遠程調用所返回的結果event.result可以直接賦值給ActionScript對象。當然，
后端返回的對象類型與Flex客戶端的ActionScript對象類型要滿足“第三方軟件’所規定的對象類型之間的“映射”規則，這樣，Flex就可以把后臺返回的AMF數據流自動地序列化為ActionScript對象。
????從上面的代碼分析中我們可以看出:同傳遞XML方式相比，RemoteObject調用方式直接將ActionScript對象作為調用的參數和返回結果，這對于開發者編程特別方便。同時，通過RemoteObject調用遠程方法需要多寫幾行代碼，但通過精巧的封裝可以很好地解決這個問題。
在上面的論述中多次提到了“第三方軟件”，要使用RemoteObject組件進行遠程方法調用，那么必須在服務器上部署和配置相應的“第三方軟件”。“第三方軟件”有兩個最基本的作用:
??服務器端對象序列化為AMF格式數據和將AMF格式數據反序列化為服務器端對象。
??將客戶端的請求映射為服務器端相應對象上的方法調用。
由于AMF規范已經公開，因此，有很多“第三方軟件”支持不同的后臺服務器端語言，在.net平臺下比較著名的“第三方軟件”為Midnight Coders WebORB。
我們所關心的Java平臺“下的“第三方軟件”有Adobe官方商業收費軟件LifeCycle ?Data ?Service(LCDS)和Adobe官方開源軟件BlazeDS。
BlazeDS是LCDS的開源版，只不過BlazeDS不具備LCDS的一些高級功能，比如:
??高級客戶端-服務器數據同步功能。
??沖突檢測/解決。
??Adobe AIR應用的離線數據管理服務。
??由RIA生成PDF等。
使用BlazeDS與LCDS進行企業應用開發的配置完全一樣，因此，在不需要LCDS高級功能的情況下，完全可以使用BlazeDS替換LCDS作為一種廉價方案，必須使用LCDS高級功能時用戶可以追加投資購買LCDS，因此基于BlazeDS企業應用可以很容易升級為基于LCDS的企業應用，這也是我們選擇BlazeDS作為配合RemoteObject遠程調用的“第三方軟件”的主要原因。
因此，使用Flex+Java開發企業應用，我們主要使用RemoteObject+BlazeDS實現Flex端與Java端的通信。
總之，使用RemoteObject+BlazeDS作為Flex端同Java服務器端的通信框架有如下優點:
??以二進制的AMF協議傳遞數據，轉換和傳輸數據的性能高于XML格式。
??使用RemoteObject+BlazeDS能夠實現Flex對象與Java對象之間的自動轉換，更加有利于開發者編程。
??使用開源框架BlazeDS所開發的企業應用可以更容易地升級為采用高端商業軟件LCDS作為數據通信框架的企業應用。
當然，還有一些其他開源框架，比如Hessian。和Granite也能夠完成與BlazeDS類似的功能，開發者可以根據實際情況加以選擇，但是由于它們的原理相同，所以可以使用相同架構方法和設計模式。
1.2?構建一個簡單的BlazeDS應用
????本節的任務是創建一個RemoteObject應用程序，這個應用程序包括兩部分:前端Flex應用和后端Java應用。兩者通過BlazeDS通信,?開發步驟如下。
1.準備軟件環境
在Flex應用中使用Remoting技術時需要以下軟件：?
???MyEclipse 7.5及以上版本。?
??Adobe Flash Builder 4 Plug-in。?
??Tomcat 5.5及以上版本。?
??JDK l.6及以上版本。?
??BlazeDS 3.2及以上版本。?
2.安裝配置軟件
安裝配置軟件需要按照以下順序：?
??安裝MyEclipse 7.5。?
??安裝Adobe Flash Builder 4 Plug-in.
MyEclipse7.5安裝完成后將創建一個Common文件夾和啟動程序所在文件夾(默認命名為“MyEclipse 7.5”)。啟動程序所在文件夾中包含一個dropins文件夾，該文件夾是MyEclipse7.5中安裝Adobe Flash Builder 4 Plug-in時所需的文件夾。選擇“再插入一個Eclipse”項，單擊“選擇”按鈕，選擇MyEclipse啟動程序所在的文件夾進行安裝，如圖5.1.4所示。?
?
圖5.1.4 安裝Adobe Flash Bulider 4 Plug-in
??安裝BlazeDS 3.2。?
通過http://opensource.adobe.com/wiki/display/blazeds/Downloads地址下載Binary Distribution版本的BlazeDS軟件。該版本為最簡版本，解壓后只包含一個blazeds.war文件。在創建Flex項目時，為了在項目中通過BlazeDS使用Remoting技術，需要定位blazeds.war文件。?
??在MyEclipse 7.5中配置Tomcat和JDK。?
3.開發基于Remoting技術的Flex應用程序
開發基于Remoting技術的Flex應用程序步驟如下：?
??啟動MyEclipse 7.5，單擊右上角的【Flash】按鈕，切換至Flex應用開發視圖。選擇“file’
à“new”à“Flex項目”。彈出“新建Flex項目”對話框，按提示進行操作，如圖5.1.5所示。
?
圖5.1.5 新建Flex項目
??在圖5.1.5中單擊“Next”按報，彈出“配置J2EE服務器”對話框，按提示進行操作，?如圖5.1.6所示。?
?
圖5.1.6 配置J2EE服務器
??在圖5.1.6中單擊“Next”按鈕，彈出“新建Flex項目”對話框，為Flex項目設置捌徑，按提示進行操作，如圖5.1.7所示。?
?
圖5.1.7 為Flex項目設置構建路徑
??在圖5.1.7中，單擊【Finish】按鈕，完成創建Flex項目的操作，生成的項目文件結構如圖5.1.8所示。
?
圖5.1.8 Flex項目文件結構圖
??編輯生成的remotingApp.mxml文件，向其中添加以下代碼：?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
???xmlns:s="library://ns.adobe.com/flex/spark"
???xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 將非可視元素（例如服務、值對象）放在此處 -->
</fx:Declarations>
<s:Panel width="564" height="304" verticalCenter="74" horizontalCenter="17" title="Flex Remoting示例">
<s:Rect left="0" right="0" bottom="0" height="30">
<s:fill>
<s:SolidColor color="#E2EDF7"/>
</s:fill>
</s:Rect>
<s:Button id="btnLoad" x="465" y="242" label="加載遠程數據 "/>
<mx:AdvancedDataGrid id="adg1"
?designViewDataType="flat" width="562" height="241" x="0" y="0">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="商品編號 " dataField="shopId"/>
<mx:AdvancedDataGridColumn headerText="商品名稱 " dataField="shopName"/>
<mx:AdvancedDataGridColumn headerText="商晶單價 " dataField="price"/>
<mx:AdvancedDataGridColumn headerText="商品類別 " dataField="catalog"/>
</mx:columns>
</mx:AdvancedDataGrid>
</s:Panel>
</s:Application>
??將remotingApp項目發布到Tomcat容器中，然后選中“remotingApp.mxml”，單擊右鍵選擇“Run As”à“Web應用程序”，運行Flex應用程序，結果如圖5.1.9所示。
?
圖5.1.9 運行Flex應用
?
??單擊MyEclipse右上角的【MyEclipse】按鈕，切換至Java應用開發視圖，創建POJO類，命名為“Shoplnfo.java”。?
package com.soft.flex.pojo;
public class ShopInfo
{
private String shopId;//商品編號
private String shopName;//商品名稱private double price;//商品單價
private String catalog;//商品類別
private double price;//商品價格
public ShopInfo (String shopId, String shopName, double price, String catalog) {
super();
this.shopId=shopId;
this.shopName= shopName;
this.price=price;
this.catalog=catalog;
}
public ShopInfo() {
super();
// TODO Auto-generated constructor stub
}
public String getShopId() {
return shopId;
}
public void setShopId(String shopId) {
this.shopId = shopId;
}
public String getShopName() {
return shopName;
}
public void setShopName(String shopName) {
this.shopName = shopName;
}
public String getCatalog() {
return catalog;
}
public void setCatalog(String catalog) {
this.catalog = catalog;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
?
?
}
??繼續創建業務類，命名為“Service.java”，在其中定義getAllShop方法，用于從數據庫中獲取商品列表并返回商品信息。?
public class Service {
public List<ShopInfo> getAllShop(){
//訪問數據庫代碼
List<ShopInfo> shops = new ArrayList<ShopInfo>();
shops.add(new ShopInfo("S001", "彩電", 1200, "家電"));
shops.add(new ShopInfo("S002", "空調", 1300, "家電"));
shops.add(new ShopInfo("S003", "牛奶", 4.5, "飲料"));
shops.add(new ShopInfo("S004", "可口可樂", 3.8, "飲料"));
return shops;
}
}
??在remoting-config.xml文件中配置遠程調用類Service。使用記事本打開該文件，在根節點中添加一個子節點。?
<destination id="service">
<properties>
<source>com.soft.flex.service.Service</source>
</properties>
</destination>
在remoting-config.xml文件中可以配置多個destination ，每個節點代表一個遠程調用類，使用id屬性加以標識?其值不可重復。?Source代表class文件路徑。
??修改remotingApp.mxml文件代碼，在其中創建RemoteObject對象，并使用該對象訪問遠程調用類Service.修改后的代碼如下：?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
???xmlns:s="library://ns.adobe.com/flex/spark"
???xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
//處理返回結果時間
protected function shopRemotingObject_resultHandler(event:ResultEvent):void
{
//獲取結果并顯示
this.adg1.dataProvider = event.result;
}
//處理訪問錯誤異常信息
protected function shopRemotingObject_faultHandler(event:FaultEvent):void
{
//顯示錯誤信息
Alert.show(event.fault.faultString,"錯誤");
}
?
?
protected function btnLoad_clickHandler(event:MouseEvent):void
{
this.shopRemotingObject.getAllShop();
}
?
]]>
</fx:Script>
<fx:Declarations>
<s:RemoteObject id="shopRemotingObject" destination="service" showBusyCursor="true"
endpoint="http://localhost:8080/remotingApp/messagebroker/amf"
result="shopRemotingObject_resultHandler(event)"
fault="shopRemotingObject_faultHandler(event)">
</s:RemoteObject>
</fx:Declarations>
<s:Panel width="564" height="304" verticalCenter="74" horizontalCenter="17" title="Flex Remoting示例">
<s:Rect left="0" right="0" bottom="0" height="30">
<s:fill>
<s:SolidColor color="#E2EDF7"/>
</s:fill>
</s:Rect>
<s:Button id="btnLoad" x="465" y="242" label="加載遠程數據 " click="btnLoad_clickHandler(event)"/>
<mx:AdvancedDataGrid id="adg1"
?designViewDataType="flat" width="562" height="241" x="0" y="0">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="商品編號 " dataField="shopId"/>
<mx:AdvancedDataGridColumn headerText="商品名稱 " dataField="shopName"/>
<mx:AdvancedDataGridColumn headerText="商晶單價 " dataField="price"/>
<mx:AdvancedDataGridColumn headerText="商品類別 " dataField="catalog"/>
</mx:columns>
</mx:AdvancedDataGrid>
</s:Panel>
</s:Application>
??重新發布remotingApp，再次運行remotingApp.mxml文件，單擊“加載遠程數據”按鈕，?Flex會調用遠程Java類查詢數據庫的商品信息并顯示出來，如圖5.1.10所示。
?
圖5.1.10
1.3?BlazeDS的序列化機制
????為了傳輸對象，BlazeDS和Flex提供了客戶端ActionScript對象和服務器端Java對象之間的序列化功能；對于Web Service，也提供了客戶端ActionScript對象和SOAP對象之間的序列化功能。
????傳輸對象時，我們一般會選用AMF3來進行編碼。AMF3是Adobe在Flash Player 9之后引入的一種用于序列化ActionScript對象的壓縮的二進制格式。由于它非常緊湊，而且支持廣泛的數據類型和復雜的對象關系，所以在企業應用中被大量使用。
????本節以AMF3編碼規則為例，介紹ActionScript對象和Java對象之間的序列化機制。
????1．元標記RemoteClass和Transient
????Flex提供了兩個元標記來幫助序列化。RemoteClass是修飾類的編譯期的元標記，它[[RemoteClass(alias=””)]的形式定義在ActionScript類前，用于顯式映射其修飾的類和遠程類編譯器在遇到[RemoteClass]元標記時，會在其所在應用(Application)或模塊(Module)的初始化代碼中插入flash.net.registerClas sAlias( aliasName，classObject)調用以注冊ActionScript類及其遠程別名。而Transient則是運行期元標記，修飾類的成員變量，用于表明成員變量是瞬態變量，不參與序列化。
????有兩點必須注意：其一，使用[RemoteClass]修飾的ActionScript類必須在代碼中被引用或使用（也就是說，不是孤立的類），否則，從Java對象無法轉換到期望的ActionScript對象。編譯成library的類沒有此限制，因為不論其是否被引用，FlexBuilder都會編譯它；其二，除了[Transient]修飾的成員變量外，非公開變量或屬性、只讀屬性（只有get訪問函數）和靜態變量屬性也不參與序列化，這一點對于ActionScript和Java類是一致的。
??示例5.1給出了兩者的使用范例，代碼第4行通過[RemoteClass]元標記顯式地將自定義ActionScript靜態對象Employee映射到同名的Java對象。代碼第10行使用了元標記[Transient]修飾Employee的成員變量age。
??經過這兩個元標記修飾后，當Flex調用遠程方法傳遞Employee時，BlazeDS會將其轉換成同名的Java對象，但age變量會被Flex序列化機制忽略，反之亦然。
?
示例5.1 Employee.as
???package ?com. flexbook.blazeds
?????{
?????????????[ Bindable ]
???????????????[ Remo teClas s ( alias = " cam. flexbook.blazeds .Employee " ) ?]
????public class Employee
???????????{
???????public var name:String;
???????public var code:String;
???????public var birthday:Date;
??????[Transientl
?????public var age:uint;
????}
?}
?
??2．從ActionScript對象到Java對象
??當Flex應用程序通過RemoteObject調用遠程Java方法時，方法的參數會被自動從ActionScript對象轉換成Java對象。這個過程經歷了兩個階段，首先，Flash Player將ActionScript對象編碼成AMF3格式，然后，BlazeDS將AMF3格式的數據流轉換成Java對象。
??ActionScript中有些類型，如int、Boolean和String，與Java類型精確匹配，而uint和Number 則沒有相應的Java類型與之對應。表4-1-1列出了從ActionScript對象轉換到Java對象時的類型對應關系。
表4-1-1 ?ActionScript對象轉換到Java對象時的類型對應關系
ActionScript 類型 (AMF 3) | 反序列化為 Java | 支持的 Java 類型綁定 |
Array（密集） | java.util.List | java.util.Collection, Object[ ] (本機數組) 如果類型是一個接口，則會映射到下面的接口實現： List 變為 ArrayList SortedSet 變為 TreeSet Set 變為 HashSet Collection 變為 ArrayList 自定義 Collection 實現的新實例會綁定到該類型。 |
Array（稀疏） | java.util.Map | java.util.Map |
Boolean 字符串"true"或"false" | java.lang.Boolean | Boolean、boolean 和 String |
Flash.utils.ByteArray | byte [] | ? |
Flash.utils.IExternalizable | java.io.Externalizable | ? |
Date | java.util.Date （已設置為協調世界時 (UTC) 格式） | java.util.Date、java.util.Calendar、java.sql.Timestamp、java.sql.Time 和 java.sql.Date |
int/uint | java.lang.Integer | java.lang.Double、java.lang.Long、java.lang.Float、java.lang.Integer、java.lang.Short、java.lang.Byte、java.math.BigDecimal、java.math.BigInteger、String，以及基元類型 double、long、float、int、short 和 byte |
Null | null | 基元 |
Number | java.lang.Double | java.lang.Double、java.lang.Long、java.lang.Float、java.lang.Integer、java.lang.Short、java.lang.Byte、java.math.BigDecimal、java.math.BigInteger、String、0（零） 如果發送了 null，則為基元類型 double、long、float、int、short 和 byte |
Object（泛型） | java.util.Map | 如果指定了 Map 接口，則為 java.util.Map 創建一個新的 java.util.HashMap，為 java.util.SortedMap 創建一個新的 java.util.TreeMap。 |
String | java.lang.String | java.lang.String、java.lang.Boolean、java.lang.Number、java.math.BigInteger、java.math.BigDecimal、char[]、以及任何基元數字類型 |
有類型對象 | 有類型對象 在使用 [RemoteClass] 元數據標簽指定遠程類名稱時。Bean 類型必須具有公共的無參數構造函數。 | 有類型對象 |
undefined | null | null（對于對象）和默認值（對于基元） |
XML | org.w3c.dom.Document | org.w3c.dom.Document |
XMLDocument （舊 XML 類型） | org.w3c.dom.Document | org.w3c.dom.Document 可以針對在 services-config.xml 文件中定義的任何通道啟用對于 XMLDocument 類型的舊 XML 支持。此設置僅在將數據從服務器發回到客戶端時很重要，它控制 org.w3c.dom.Document 實例如何發送到 ActionScript。 |
?
??當然，BlazeDS在Java對象中尋找合適的方法簽名時會嘗試對Java類型做出兼容的轉換。比如，Flex應用在調用遠程方法時傳人一個int類型的參數，但遠程Java對象只有一個接受參數的方法，這時，BlazeDS將嘗試將這個int轉換成java.lang.String，然后再調用方法。
??ActionScript中的Array允許兩種方式索引元素，嚴格數組(strict array)使用數字作為索引，索引代表了元素的排列位置，關聯數組(associative array)使用字符串作為索引，索引代表了元素的名稱。一個數組中只要有一個元素使用字符串作為索引，那么它就是關聯數組，這時，數組實際上退化成了ActionScript的動態對象。在嚴格數組中，我們把索引不是從0開始或者索引不連續的數組稱為稀疏數組。關聯數組通過序列化將轉換成java.util.Map，稀疏數組也被轉換成java.util.Map以避免傳遞大量null元素。
對于ActionScript的String類型，由于可以匹配的Java的String類型，因此優先轉換成字符串，但如果遠程Java對象中沒有方法的簽名能夠匹配，BlazeDS將嘗試將字符串轉換成Boolean(如果字符串是true,false)或數值類型(如果字符串表示一個數值)。
如果將ActionScript的null 或者undefined傳給遠程Java方法，他將會被轉化成null(如果目標類型是java.lang.Object或其子類)或轉換成基本類型的默認值(如果目標類型是Java中的基本類型)。
3 從Java對象到ActionScript對象
當服務器需要返回Java對象時，BlazeDS會將Java對象編碼成AMF3格式，并序列化到Flex應用端，Flex應用解析AMF3格式的流數據生成ActionScript對象。表4-1-2列出了Java對象轉換成ActionScript對象的類型對應關系。
表4-1-2 Java對象轉換成ActionScript對象的類型對應關系。
?
Java 類型 | ActionScript 類型 (AMF 3) |
java.lang.String | String |
java.lang.Boolean, boolean | Boolean |
java.lang.Integer, int | int 如果值小于 0xF0000000 且大于 0x0FFFFFFF，則會按照 AMF 編碼要求將值提升為 Number。 |
java.lang.Short, short | int 如果 i 小于 0xF0000000 且大于 0x0FFFFFFF，則會將值提升為 Number。 |
java.lang.Byte, byte[] | int 如果 i 小于 0xF0000000 且大于 0x0FFFFFFF，則會將值提升為 Number。 |
java.lang.Byte[] | flash.utils.ByteArray |
java.lang.Double, double | Number |
java.lang.Long, long | Number |
java.lang.Float, float | Number |
java.lang.Character, char | String |
java.lang.Character[], char[] | String |
java. math.BigInteger | String |
java.math.BigDecimal | String |
java.util.Calendar | Date 日期按照協調世界時 (UTC) 時區的時間進行發送。客戶端和服務器必須根據時區相應地調整時間。 |
java.util.Date | Date 日期按照 UTC 時區的時間進行發送。客戶端和服務器必須根據時區相應地調整時間。 |
java.util.Collection（例如，java.util.ArrayList） | mx.collections.ArrayCollection |
java.lang.Object[] | Array |
java.util.Map | Object（無類型）。例如，將 java.util.Map[] 轉換為對象的 Array。 |
java.util.Dictionary | Object（無類型） |
org.w3c.dom.Document | XML 對象 |
Null | null |
java.lang.Object（以前列出的類型除外） | 有類型 Object 通過使用 JavaBean 內部檢查規則將對象進行序列化，并且對象包括公共字段。不包括靜態字段、瞬態字段、非公共字段，以及非公共 bean 屬性或靜態 bean 屬性。 |
?
如果沒有使用[RemoteClass]標簽，則轉換成動態對象，否則轉換成自定義的靜態對象。
4．自定義序列化機制
?以上討論的是BlazeDS的標準序列化機制。如果標準規則不能滿足要求，BlazeDS還提供了擴展機制，允許編寫代碼自定義序列化規則。在Flex端，我們可以使目標類實現接口flash.net.IExternalizable，在Java端實現接口java.io.Externalizable。
??自定義序列化機制有很多應用場景，比如壓縮數據、隱藏敏感數據等。示例5.2定義了一個DataRow類，它是所有數據行對象的基類，每個數據行都有一個唯一標示符rowID，通過rowID客戶端和服務器端可以識別它們操作的對象，通常，我們期望rowID由服務器端負責生成，并且一旦分配給對象就不能被外部更改，因此它需要被定義成只讀屬性。而BlazeDS標準的序列化機制是不序列化只讀屬性的，但rowID是如此重要，以至于如果不傳遞給客戶端，那么在客戶端處理完DataRow后，服務器端就不知道是哪個DataRow對象被處理了。
??自定義序列化機制可以幫助實現我們的愿望：讓DataRow實現接口IExternalizable，然后在WriteExternal和readExternal中分別向序列化流寫入和從序列化流讀出rowID。這樣，即使我們將rowID定義成只讀屬性，絲毫不影響rowID的序列化。
示例5.2DataRow.as
package com.flexbook.blazeds
?{
???import flash.utils.IDataInput;
???import ?flash.utils .IDataOutput ;
???import ??flash.utils .IExternalizable ;
?
??[ RemoteClass ( alias = " cam. flexbook.blazeda .DataRow " ) ]
public class DataRow implemente IExternalizable
?{
??private var _rowID:Object;
??public function DataRow() {
?????????}
???public function get rowID():Object{
???????return _rowID;
?????????}
???public function writeExternal(output:IDataOutput)
???????????????output.writeObject (_rowID) ;
????????}
????public function readExternal(input:IDataInput) {
?????????????????rowID=input.readObject ( ) ,
?
?}
}
????flash.utils.IDataInput和flash.utils.IDataOutput代表了序列化的輸入流和輸出流，當Flex序列化對象時，會調用對象的writeExternal，并傳入IDataOutput以便對象輸出其屬性；當Flex反序列化對象時，則調用對象的readExternal，并傳入IDatalnput以便對象從流中讀取其屬性IDataInput和IDataOutput提供了讀取和寫入各種類型ActionScript對象的函數，來幫助我們序列化和反序列化。
????示例5.3是DataRow對象在服務器端的定義，它與前端代碼基本相似，唯一不同的是它有兩個構造函數，默認構造函數用于反序列化（因為反序列化必須要有無參構造函數），：另一構造函數用于服務器端創建DataRow對象時為它指定rowID（這也是可以修改rowID的唯一的機會）。
?
示例5.3 ?DataRow.java
public class DataRow implements Externalizable{
?
private Object rowID,
????public ?DataRow() ?{
????super();
????) ???
????public DataRow(Object rowID) ?{
????super();
????this.rowID=rowID;
????)
????public ?Object ?getRowID()(
????return rowID;
????)
????public void readExternal(ObjectInput in) throws IOException,
????ClassNotFoundException {
????rowID=in.readObject();
????)
????public voicl writeExternal(ObjectOutput.ut) throws IOException ?{
????out.writeObiect(rowID);
????)
????)
????如此，我們就得到了一個安全的DataRow對象，除了構造時可以為它分配rowID，其他時毫無論在服務器端還是客戶端都無法對rowID進行修改。從它繼承的類都可以獲得這項好處，前提是服務器端的Java類和客戶端的ActionScript都需要繼承相應的DataRow。
1.4?BlazeDS和Spring整合
如果需要BlazeDs與Spring框架整合使用，是非常簡單的事情，因為，SpringSource和Adobe已經合作為BlazeDS提供了Spring支持，即Spring BlazeDS Integration，關于這個項目的更多信息可以訪問http://www.springsource.org/spring-flex。
Spring BlazeDS Integration 是 SpringSource 的開源項目，用于整合 Spring 與 BlazeDS。不使用 Spring BlazeDS Integration 同樣可以整合 Spring 與 BlazeDS。但這種整合方式不自然，需要額外維護一個 BlazeDS 配置文件，Spring BlazeDS Integration 會改善這種處境。
Spring BlazeDS Integration 需要的軟件環境：
??Java 5 或更高
??Spring 2.5.6 或更高
??BlazeDS 3.2 或更高
Spring BlazeDS Integration 特征
??MessageBroker（BlazeDS 的核心組件）被配置為 Spring 管理的 Bean
??Flex 客戶端發出的 HTTP 消息通過 Spring 的 DispatcherServlet 路由給 MessageBroker
??Remote objects 以 Spring 的方式配置在 Spring 配置文件內
?
下面我們演示BlazeDS和Spring的整合。
（1）準備所需 jar 包
下載 Spring Framework dependencies和Spring BlazeDS Integration解壓備用，在項目中添加Spring支持，并將以下 2 部分 jar 包拷貝到項目的 lib 下：
??Spring Framework dependencies
org.aopalliance 內的 com.springsource.org.aopalliance-1.0.0.jar
edu.emory.mathcs.backport 內的 com.springsource.edu.emory.mathcs.backport-3.0.0.jar
net.sourceforge.cglib 內的 com.springsource.net.sf.cglib-2.2.0.jar
??Spring BlazeDS Integration
org.springframework.flex-1.0.3.RELEASE.jar
（2）：修改 web.xml 文件
將 web.xml 內所有 Flex 相關配置刪除掉，添加以下內容（改用 Spring web 應用的前端控制器處理所有應用請求）
?
<servlet>
??<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
??<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
??<init-param>
????<param-name>contextConfigLocation</param-name>
????<param-value>/WEB-INF/web-application-config.xml</param-value>
??</init-param>
??<load-on-startup>1</load-on-startup>
</servlet>
?
<servlet-mapping>
??<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
??<url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>
（3）：配置 web-application-config.xml
1）創建應用上下文配置文件 web-application-config.xml
?
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
???????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
???????xsi:schemaLocation="http://www.springframework.org/schema/beans ??????http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">
?
</beans>
2）為了使用 Spring BlazeDS Integration 的 tag，增加命名空間
?
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
???????xmlns:flex="http://www.springframework.org/schema/flex"
???????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
???????xsi:schemaLocation="http://www.springframework.org/schema/beans ??????http://www.springframework.org/schema/beans/spring-beans-3.0.xsd ??????http://www.springframework.org/schema/flex ??????http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">
?
</beans>
3）為了把請求路由給 MessageBroker，添加以下 tag
?
<flex:message-broker />
4）定義 Bean，并用 remoting-destination tag 把它暴露給 Flex
?
<bean id="employeeServiceDest" class="com.sample.EmployeeService">
??<flex:remoting-destination />
</bean>
?
至此BlazeDS與Spring的整合就完成了。
?
1.5?BlazeDS的消息服務
BlazeDS消息服務(Message Service )提供發布(publish)/訂閱(subscribe)機制，允許 Flex 應用程序發布消息、訂閱消息終端(messaging destination)，從而實現實時數據的推動和協作傳送。
?
（1）Message Service
?
Message Service 提供發布(publish)/訂閱(subscribe)機制允許Flex 應用 程序發布消息、訂閱消息終端(messaging destination)，從而實現數據的實時 推動和協作傳送。
消息終端在messaging-config.xml配置，其中頻道(channel)是其關鍵元素， 它用來實現客戶端和服務器端交換數據。使用BlazeDS，消息終端通常用作 streaming頻道或者polling頻道。
使用streaming頻道，服務器端會一直響應HTTP請求直到該頻道連接被關閉， 它允許服務器向客戶端不斷傳送大量的數據。因為HTTP連接是獨一無二的，這實 現數據的雙向傳送，每個streaming AMF或者HTTP頻道事實上需要兩個瀏覽器 HTTP連接， 一個連接需要不斷處理服務器端與頻道緊密相關的客戶端的響應。 另外需要一個短暫連接,只有當數據需要傳送到服務器時，它才脫離瀏覽器連接 池；當短暫連接不再需要時，它立即被釋放回瀏覽器連接池。
polling頻道可以通過簡單的時間間隔或者使用服務器等待來配置，如果數據 不馬上可用 (長輪循)的話。另外，每次輪循響應完成請求。默認下瀏覽器HTTP 1.1的連接是持續的，瀏覽器輪循已有的連接，發送并發的輪循請求，以此來減 輕輪循的開銷。
當需要準實時通信時，streaming 頻道是最好選擇。
?
（2）IE 與 Firefox瀏覽器下的不同
瀏覽器對每個session都有連接數限制。不同的瀏覽器，連接最大數以及對 session的處理方式都不一樣。
IE中每個session的最大連接數為2。 但如果從開始菜單或快捷方式打開多個 IE實例，每個IE實例開啟不同的進程并擁有各自session。另外，如果我們通過 CTRL+N 開啟對已有的IE實例一個新的IE窗口，該窗口將與創建它的IE實例共用 一個session 。也就是說，如果程序實例開啟不同的進程，我們可以通過HTTP streaming建立不限量應用取得服務器端數據；如果通過CTRL+N開啟多個窗口， 每個session最多建立2個連接。
Firefox中每個session最多建立8個連接。如果從開始菜單或快捷方式打開多 個Firefox實例，所有實例開啟使用同一進程并共用一個session。既然瀏覽器對 普通的HTTP請求通常只需要一個連接， 理論上我們可以最多可以建立7個HTTP streaming連接。
?
（3）messaging-config.xml
另外，如果每個session到達最大連接數，使用streaming channel連接到服務器的下一次嘗試將失敗并拋出以下異常：
Endpoint with id 'my-streaming-amf' cannot grant streaming connection to FlexClient with id 'D640B86F-6B1D-92DF- 8288-1B737A371AFE' because max-streaming-connections-per-session limit of '1' has been reached。
不過，BlazeDS提供一種優雅的退后機制來處理這種情況：
客戶端始終會嘗試使用頻道表(messaging-config.xml中為服務終端定義) 中的第一個頻道來連接。如果該連接失敗, 客戶端將自動退后到頻道表中的下一頻道。我們可以為所有的服務終端定義了如下默認的ChannelSet：
?
<default-channels>
<channel ref="my-streaming-amf"/>
<channel ref="my-polling-amf"/>
</default-channels>
?
也就是說，客戶端應用會首先嘗試使用streaming channel連接，如果連接失 敗會使用polling channel。
?
在客戶端，Flex提供了 Producer和Consumer這兩個組件，讓你用來向目標地址發送或訂閱消息。如果要訂閱消息，你就使用Consumer類的 subscribe()方法。當有消息發送到你訂閱了的目標地址時，Consumer上就會觸發message事件。
示例5.4
客戶端代碼：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
???xmlns:s="library://ns.adobe.com/flex/spark"
???creationComplete="consumer.subscribe();"
???xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.messaging.events.MessageFaultEvent;
import mx.messaging.messages.AsyncMessage;
import mx.messaging.messages.IMessage;
private function send():void ?
{ ??
???var message:IMessage?= new AsyncMessage(); ??
???message.body.chatMessage = msg.text+consumer.clientId; ??
????producer.send(message); ??
????msg.text = ""; ??
???????
??} ??
??????????
???private function messageHandler(message:IMessage):void ?
???{ ??
????log.text += message.body.chatMessage + "\n"; ???
???} ??
?
?
protected function consumer_faultHandler(event:MessageFaultEvent):void
{
Alert.show(event.faultDetail);
}
?
?
protected function producer_faultHandler(event:MessageFaultEvent):void
{
Alert.show(event.faultDetail);
}
?
]]>
</fx:Script>
<fx:Declarations>
<mx:ChannelSet id="cs"> ??
??<mx:StreamingAMFChannel url="http://localhost:8400/MsgService/messagebroker/streamingamf"/> ??
??</mx:ChannelSet> ??
??<mx:Producer id="producer" ?fault="producer_faultHandler(event)" destination="chat" channelSet="{cs}"/> ??
??<mx:Consumer id="consumer" destination="chat" channelSet="{cs}" message="messageHandler(event.message)" fault="consumer_faultHandler(event)"/> ??
?
</fx:Declarations>
<s:Panel title="Chat Test!" ??x="20" y="19" width="518" height="295"> ??
??<s:TextArea id="log" x="19" y="11" width="473" height="166"/> ??
?????
??<s:TextInput id="msg" x="19" y="191" width="377" height="46" enter="send()"/> ??
??<s:Button x="411" y="192" label="發送消息" height="43" width="77" click="send()"/> ??
????
?</s:Panel> ??
?
</s:Application>
?
服務器端services-config.xml定義Streaming通道：
<?xml version="1.0" encoding="UTF-8"?>
<service id="message-service"
????class="flex.messaging.services.MessageService">
?
????<adapters>
????????<adapter-definition id="actionscript" class="flex.messaging.services.messaging.adapters.ActionScriptAdapter" default="true" />
???????<adapter-definition id="jms" class="flex.messaging.services.messaging.adapters.JMSAdapter"/>
????</adapters>
?
??? <!-- ??<default-channels>
????????<channel ref="my-polling-amf"/>
????</default-channels>-->
<destination id="chat"> ??
??????????
????????<properties> ??
???????????<network> ??
????????????????<session-timeout>0</session-timeout> ??
????????????</network> ??
????????????<server> ??
???????????????<max-cache-size>1000</max-cache-size> ??
????????????????<message-time-to-live>0</message-time-to-live> ??
????????????????<durable>false</durable> ??
???????????</server> ??
????????</properties> ??
????????<channels> ??
????????<channel ref="my-streaming-amf" /> ??
????????</channels> ??
????</destination> ??
?
</service>
?
服務器端messaging-config.xm中定義目標并指定通道:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
?
????<services>
????????<service-include file-path="remoting-config.xml" />
????????<service-include file-path="proxy-config.xml" />
????????<service-include file-path="messaging-config.xml" /> ???????
???
?
?????
??????</services>
????<security>
????????<login-command class="flex.messaging.security.TomcatLoginCommand" server="Tomcat"/>
????????<!-- Uncomment the correct app server
????????<login-command class="flex.messaging.security.TomcatLoginCommand" server="JBoss">
<login-command class="flex.messaging.security.JRunLoginCommand" server="JRun"/> ???????
????????<login-command class="flex.messaging.security.WeblogicLoginCommand" server="Weblogic"/>
????????<login-command class="flex.messaging.security.WebSphereLoginCommand" server="WebSphere"/>
????????-->
?
????????<!--
????????<security-constraint id="basic-read-access">
????????????<auth-method>Basic</auth-method>
????????????<roles>
????????????????<role>guests</role>
????????????????<role>accountants</role>
????????????????<role>employees</role>
????????????????<role>managers</role>
????????????</roles>
????????</security-constraint>
?????????-->
????</security>
?
????<channels>
?
?<channel-definition id="my-streaming-amf" class="mx.messaging.channels.StreamingAMFChannel"> ??
????????????<endpoint url="http://localhost:8400/MsgService/messagebroker/streamingamf" class="flex.messaging.endpoints.StreamingAMFEndpoint"/> ??
????????????<properties> ??
???????????????<idle-timeout-minutes>0</idle-timeout-minutes> ??
????????????????<max-streaming-clients>50</max-streaming-clients> ??
????????????????<server-to-client-heartbeat-millis>5000</server-to-client-heartbeat-millis> ??
???????????????<user-agent-settings> ??
????????????????????<user-agent match-on="MSIE" kickstart-bytes="2048" max-streaming-connections-per-session="1"/> ??
???????????????????<user-agent match-on="Firefox" kickstart-bytes="2048" max-streaming-connections-per-session="1"/> ??
????????????????</user-agent-settings> ??
???????????</properties> ??
????????</channel-definition>
????????<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
????????????<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
????????</channel-definition>
?
????????<channel-definition id="my-secure-amf" class="mx.messaging.channels.SecureAMFChannel">
????????????<endpoint url="https://{server.name}:{server.port}/{context.root}/messagebroker/amfsecure" class="flex.messaging.endpoints.SecureAMFEndpoint"/>
????????????<properties>
????????????????<add-no-cache-headers>false</add-no-cache-headers>
????????????</properties>
????????</channel-definition>
?
????????<channel-definition id="my-polling-amf" class="mx.messaging.channels.AMFChannel">
????????????<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amfpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
????????????<properties>
????????????????<polling-enabled>true</polling-enabled>
????????????????<polling-interval-seconds>4</polling-interval-seconds>
????????????</properties>
????????</channel-definition>
?
??????
????????<channel-definition id="my-http" class="mx.messaging.channels.HTTPChannel">
????????????<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/http" class="flex.messaging.endpoints.HTTPEndpoint"/>
????????</channel-definition>
??<!--
????????<channel-definition id="my-secure-http" class="mx.messaging.channels.SecureHTTPChannel">
????????????<endpoint url="https://{server.name}:{server.port}/{context.root}/messagebroker/httpsecure" class="flex.messaging.endpoints.SecureHTTPEndpoint"/>
????????????<properties>
????????????????<add-no-cache-headers>false</add-no-cache-headers>
????????????</properties>
????????</channel-definition>
????????-->
????</channels>
?
????<logging>
????????<target class="flex.messaging.log.ConsoleTarget" level="Error">
????????????<properties>
????????????????<prefix>[BlazeDS] </prefix>
????????????????<includeDate>false</includeDate>
????????????????<includeTime>false</includeTime>
????????????????<includeLevel>false</includeLevel>
????????????????<includeCategory>false</includeCategory>
????????????</properties>
????????????<filters>
????????????????<pattern>Endpoint.*</pattern>
????????????????<pattern>Service.*</pattern>
????????????????<pattern>Configuration</pattern>
????????????</filters>
????????</target>
????</logging>
?
????<system>
????????<redeploy>
????????????<enabled>false</enabled>
????????????<!--
????????????<watch-interval>20</watch-interval>
????????????<watch-file>{context.root}/WEB-INF/flex/services-config.xml</watch-file>
????????????<watch-file>{context.root}/WEB-INF/flex/proxy-config.xml</watch-file>
????????????<watch-file>{context.root}/WEB-INF/flex/remoting-config.xml</watch-file>
????????????<watch-file>{context.root}/WEB-INF/flex/messaging-config.xml</watch-file>
????????????<watch-file>{context.root}/WEB-INF/flex/data-management-config.xml</watch-file>
????????????<touch-file>{context.root}/WEB-INF/web.xml</touch-file>
?????????????-->
????????</redeploy>
????</system>
?
</services-config>
運行應用效果如圖5.1.11所示，輕松實現了數據的推送：
?
?
圖5.1.11 Flex數據推送
任務實訓部分?
?
實訓任務1：使用HttpServcie方式與后臺通信
訓練技能點
HttpServcie
需求說明
使用HttpService對象開發Flex應用程序 按條件查詢數據庫中某張表的數據并顯示在表格中。
實現思路
（1）創建Flex項目，將此項目的服務器技術選擇為J2EE服務器（無需使用遠程對象訪問服務）。
（2）切換到MyEclipese java 開發視圖，創建一個POJO類用于描述奧運會各個國家獲得的獎牌情況。
package com.soft.flex.flex4sj.pojo;
?
public class Cup {
private int id;
//國家代號
private String countryId;
//國家名稱
private String countryName;
//金牌數
private int goldMedal;
//銀牌數
private int silverMedal;
//銅牌數
private int bronzeMedal;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getCountryId() {
return countryId;
}
public void setCountryId(String countryId) {
this.countryId = countryId;
}
public String getCountryName() {
return countryName;
}
public void setCountryName(String countryName) {
this.countryName = countryName;
}
public int getGoldMedal() {
return goldMedal;
}
public void setGoldMedal(int goldMedal) {
this.goldMedal = goldMedal;
}
public int getSilverMedal() {
return silverMedal;
}
public void setSilverMedal(int silverMedal) {
this.silverMedal = silverMedal;
}
public int getBronzeMedal() {
return bronzeMedal;
}
public void setBronzeMedal(int bronzeMedal) {
this.bronzeMedal = bronzeMedal;
}
public Cup(String countryId, String countryName, int goldMedal,
int silverMedal, int bronzeMedal) {
super();
this.countryId = countryId;
this.countryName = countryName;
this.goldMedal = goldMedal;
this.silverMedal = silverMedal;
this.bronzeMedal = bronzeMedal;
}
public Cup() {
super();
// TODO Auto-generated constructor stub
}
}
（3）創建業務類，在該類 中定義根據國家查詢獲取獎牌情況的方法。
package com.soft.flex.flex4sj.service;
?
?
import java.util.*;
?
import com.soft.flex.flex4sj.pojo.Cup;
?
?public class CupService {
private List<Cup> cupList;
//模擬數據庫數據
public CupService(){
cupList ?= new ArrayList();
Cup cup1 = new Cup("china", "中國",30 ,20 ,10 );
Cup cup2 = new Cup("america", "美國",20 ,23 ,12 );
Cup cup3 = new Cup("japan", "日本",25 ,27 ,15 );
Cup cup4 = new Cup("france", "法國",10 ,18 ,20 );
Cup cup5 = new Cup("russia", "俄羅斯",16 ,30,25 );
Cup cup6 = new Cup("singapore", "新加坡",12 ,25 ,18 );
cupList.add( cup1);
cupList.add( cup2);
cupList.add( cup3);
cupList.add( cup4);
cupList.add( cup5);
cupList.add( cup6);
}
public List getAll(){
return cupList;
}
public Cup getCupByCountryId(String countryId){
Cup c = null;
for(Cup cup : cupList){
if(countryId.equals(cup.getCountryId())){
c = cup;
break;
}
}
return c;
?
}
?
?
}
?
（4）創建servlet 路徑為/query, 該servlet根據傳入的cid 調用業務類獲取結果，并轉化為xml格式返回。
public class QueryServlet extends HttpServlet {
?
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
?
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//構造xml頭標記
String xml="<?xml version=\"1.0\" encoding=\"utf-8\"?><cups>";
???? String method = request.getParameter("method");
???? CupService service = new CupService();
???? //如果是查詢所有
???? if("all".equals(method)){
???? List<Cup> list = service.getAll();
????????
????????
????????
???????? for(Cup cup : list){
????????
???????? String cid = cup.getCountryId();
???????? String cname = cup.getCountryName();
???????? int gm = cup.getGoldMedal();
???????? int sm = cup.getSilverMedal();
???????? int bm = cup.getBronzeMedal();
???????? //構造xml節點
???????? xml += "<cup countryId='"+cid+"' countryName='"+cname+"' goldMedal='"+gm+"' silverMedal='"+sm+"' bronzeMedal='"+bm+"'/>";
????????
????????
???????? }
????
???? }else{
???? String countryId = ?request.getParameter("cid");
???? Cup cup = service.getCupByCountryId(countryId);
???? String cid = cup.getCountryId();
???? String cname = cup.getCountryName();
???? int gm = cup.getGoldMedal();
???? int sm = cup.getSilverMedal();
???? int bm = cup.getBronzeMedal();
????
???? xml += "<cup countryId='"+cid+"' countryName='"+cname+"' goldMedal='"+gm+"' silverMedal='"+sm+"' bronzeMedal='"+bm+"'/>";
????
????
???? }
????
????
????
????
????
???? xml+="</cups>";
???? //輸出結尾標志
???? out.print(xml);
out.flush();
out.close();
}
?
}
?
（5）創建MXML界面，通過HttpService對象訪問servlet 并獲取查詢結果。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
???xmlns:s="library://ns.adobe.com/flex/spark"
???xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
???initialize="application1_initializeHandler(event)"
???>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import spark.events.IndexChangeEvent;
private var flag:int;
protected function application1_initializeHandler(event:FlexEvent):void
{
this.flag=0;
this.myhttp.url = "/sj41/query?method=all&cid=all";
this.myhttp.send();
}
?
?
protected function myhttp_resultHandler(event:ResultEvent):void
{
//如果是初始化時返回的結果
if(flag==0){
this.ddl.dataProvider=event.result.cups.cup;
this.ddl.labelField = "countryName";
this.adg1.dataProvider=event.result.cups.cup;
}
else{//如果是選擇下拉列表返回的結果
this.adg1.dataProvider=event.result.cups.cup;
}
}
?
?
protected function myhttp_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString);
}
?
?
protected function ddl_changeHandler(event:IndexChangeEvent):void
{
var cid:String = this.ddl.selectedItem.countryId;
this.flag=1;
this.myhttp.url = "/sj41/query?method=getById&cid="+cid;
this.myhttp.send();
}
?
]]>
</fx:Script>
<fx:Declarations>
<s:HTTPService id="myhttp" ?showBusyCursor="true" result="myhttp_resultHandler(event)" fault="myhttp_faultHandler(event)"/>
</fx:Declarations>
<s:Panel width="557" height="376" title="使用HttpService 與后臺通信" horizontalCenter="0" verticalCenter="0">
<mx:AdvancedDataGrid x="2" y="9" id="adg1" designViewDataType="flat" width="545" height="274">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="代號" dataField="countryId"/>
<mx:AdvancedDataGridColumn headerText="國家" dataField="countryName"/>
<mx:AdvancedDataGridColumn headerText="金牌數" dataField="goldMedal"/>
<mx:AdvancedDataGridColumn headerText="銀牌數" dataField="silverMedal"/>
?
<mx:AdvancedDataGridColumn headerText="銅牌數" dataField="bronzeMedal"/>
?
</mx:columns>
</mx:AdvancedDataGrid>
<s:Label x="216" y="305" text="選擇國家：" height="23" verticalAlign="middle"/>
?
<s:Button x="475" y="305" label="顯示全部" click="application1_initializeHandler(event as FlexEvent)"/>
<s:DropDownList x="306" y="305" id="ddl" prompt="請選擇國家" change="ddl_changeHandler(event)"></s:DropDownList>
</s:Panel>
</s:Application>
?
（6）運行應用程序，效果如圖5.2.1所示。
?
圖5.2.1 HttpService 示例
實訓任務2：使用RemotingObject 與后臺通信
訓練技能點
RemotingObject。
需求說明
使用RemotingObject 重構任務1。
實現思路：
（1）創建Flex項目，將此項目的服務器技術選擇為J2EE服務器（使用遠程對象訪問服務）。 如圖5.2.2所示。
?
圖5.2.2 創建Flex項目
（2）修改WebRoot/WEB-INFO/flex/remoting-config.xml，配置業務類：
<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service"
????class="flex.messaging.services.RemotingService">
?
????<adapters>
????????<adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
????</adapters>
?
????<default-channels>
????????<channel ref="my-amf"/>
????</default-channels>
<destination id="service">
<properties>
<source>com.soft.flex.flex4sj.service.CupService</source>
</properties>
</destination>
</service>?
（1）修改MXML應用程序?添加RemotingObject對象。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
???xmlns:s="library://ns.adobe.com/flex/spark"
???xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
???initialize="application1_initializeHandler(event)"
???>
<fx:Script>
<![CDATA[
import mx.collections.IList;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import spark.events.IndexChangeEvent;
private var flag:int;
protected function application1_initializeHandler(event:FlexEvent):void
{
this.flag=0;
this.myremoting.getAll();
}
?
?
?
?
protected function ddl_changeHandler(event:IndexChangeEvent):void
{
var cid:String = this.ddl.selectedItem.countryId;
this.flag=1;
this.myremoting.getCupByCountryId(cid);
}
?
?
protected function myremoting_resultHandler1(event:ResultEvent):void
{
this.ddl.dataProvider=event.result as IList;
this.ddl.labelField = "countryName";
this.adg1.dataProvider=event.result;
}
?
protected function myremoting_resultHandler2(event:ResultEvent):void
{
this.adg1.dataProvider=event.result;
}
protected function myremoting_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString);
}
?
]]>
</fx:Script>
<fx:Declarations>
<s:RemoteObject id="myremoting" showBusyCursor="true" destination="service"
endpoint="http://localhost:8080/sj42/messagebroker/amf"
fault="myremoting_faultHandler(event)"
>
<s:method name="getAll" result="myremoting_resultHandler1(event)" />
<s:method name="getCupByCountryId" result="myremoting_resultHandler2(event)"/>
</s:RemoteObject>
</fx:Declarations>
<s:Panel width="557" height="376" title="使用HttpService 與后臺通信" horizontalCenter="0" verticalCenter="0">
<mx:AdvancedDataGrid x="2" y="9" id="adg1" designViewDataType="flat" width="545" height="274">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="代號" dataField="countryId"/>
<mx:AdvancedDataGridColumn headerText="國家" dataField="countryName"/>
<mx:AdvancedDataGridColumn headerText="金牌數" dataField="goldMedal"/>
<mx:AdvancedDataGridColumn headerText="銀牌數" dataField="silverMedal"/>
?
<mx:AdvancedDataGridColumn headerText="銅牌數" dataField="bronzeMedal"/>
?
</mx:columns>
</mx:AdvancedDataGrid>
<s:Label x="216" y="305" text="選擇國家：" height="23" verticalAlign="middle"/>
?
<s:Button x="475" y="305" label="顯示全部" click="application1_initializeHandler(event as FlexEvent)"/>
<s:DropDownList x="306" y="305" id="ddl" prompt="請選擇國家" change="ddl_changeHandler(event)"></s:DropDownList>
</s:Panel>
</s:Application>
?
?
運行應用，效果如圖5.2.1所示。
?
?
實訓任務3：RemotingObject 整合Hibernate Spring
訓練技能點
??RemotingObject。
??整合Spring框架。
需求說明
使用RemotingObject 整合Hibernate Spring 重構任務1。
實現思路：
（1）創建Flex項目，將此項目的服務器技術選擇為J2EE服務器（使用遠程對象訪問服務）。
（2）創建數據庫表tb_cup 表字段與實體類屬性對應 如圖5.2.3所示。
?
圖5.2.2 tb_Cup表
（3）切換到MyEclipes視圖，分別添加hibernate支持和spring支持，并使用逆向工程生成視圖類，映射文件等。
（4）創建業務類，在該類 中定義根據國家查詢獲取獎牌情況的方法。
package com.soft.flex.flex4sj.service;
?
import java.util.List;
?
import com.soft.flex.flex4sj.dao.Cup;
import com.soft.flex.flex4sj.dao.CupDao;
?
public class CupService {
private CupDao dao;
?
public List<Cup> getAll(){
return dao.findAll();
}
public List<Cup>?getCupByCountryId(String cid){
return dao.findByCountryId(cid);
}
public CupDao getDao() {
return dao;
}
?
public void setDao(CupDao dao) {
this.dao = dao;
}
}
?
（5）添加整合Spring框架的響應jar包 并在applicationContext.xml中配置業務類。
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
???????xmlns:flex="http://www.springframework.org/schema/flex"
???????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
???????xsi:schemaLocation="http://www.springframework.org/schema/beans
?????????http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
?????????http://www.springframework.org/schema/flex ??????
?????????http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">
?????????<flex:message-broker />
<bean id="service" class="com.soft.flex.flex4sj.service.CupService">
??<flex:remoting-destination />
??<property name="dao" ref="CupDAO"></property>
</bean>
<!--其他配置省略-->
</beans>
（6）修改工程的web.xml文件如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>sj43</display-name>
?
<context-param>
<param-name>flex.class.path</param-name>
<param-value>/WEB-INF/flex/hotfixes,/WEB-INF/flex/jars</param-value>
</context-param>
?
<!-- Http Flex Session attribute and binding listener support -->
<listener>
<listener-class>flex.messaging.HttpFlexSession</listener-class>
</listener>
?
<!-- MessageBroker Servlet -->
<servlet>
??<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
??<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
??<init-param>
????<param-name>contextConfigLocation</param-name>
????<param-value>classpath:applicationContext.xml</param-value>
??</init-param>
??<load-on-startup>1</load-on-startup>
</servlet>
?
<servlet-mapping>
??<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
??<url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
?
</web-app>
（7）修改MXML代碼如下：
<s:RemoteObject id="myremoting" showBusyCursor="true" destination="service"
endpoint="http://localhost:8080/sj43/messagebroker/amf"
fault="myremoting_faultHandler(event)"
>
其中destination=“service” service要與applicationContext.xml中業務bean的id一致。
運行應用程序，效果如圖5.2.1.所示(注意要在服務器中將重復的cglib.jar刪去)。
實訓任務4：實現分頁
訓練技能點
??RemotingObject。
??整合Spring框架。
需求說明
在任務3的基礎上實現分頁功能。
實現步驟：
（1）切換到MyEclipse視圖 創建Page.java用來封裝分頁數據。
import java.util.List;
?
public class Page {
private List data;
private int currentPage;
private int totalPage;
private int pageSize;
private int totalClum;
public List getData() {
return data;
}
public void setData(List data) {
this.data = data;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalClum() {
return totalClum;
}
public void setTotalClum(int totalClum) {
this.totalClum = totalClum;
this.totalPage=( totalClum%pageSize==0 ??totalClum/pageSize:totalClum/pageSize+1);
?
}
}
?
（2）在dao類中添加分頁查詢的方法
public List findByPage(Page page) {
??????
????????String hql = "from Cup";
????????try {
???????? Session session = getSession();
???????? Query query = session.createQuery(hql);
???????? query.setFirstResult((page.getCurrentPage()-1)*page.getPageSize());
???????? query.setMaxResults(page.getPageSize());
???????? List list = query.list();
???????? releaseSession(session);
???????? return list;
???????????
????????} catch (RuntimeException re) {
????????????log.error("delete failed", re);
????????????throw re;
????????}
????}
public int count() {
????????log.debug("deleting User instance");
????????String hql = "select count(cup) from Cup as cup";
????????try {
???????? Session session = getSession();
???????? Query query = session.createQuery(hql);
????????
???????? long l = (Long)query.uniqueResult();
???????? return (int)l;
???????????
????????} catch (RuntimeException re) {
????????????log.error("delete failed", re);
????????????throw re;
????????}
????}
（3）在service類中添加相應的方法。
public Page findByPage(Page page){
List data= dao.findByPage(page);
int count = dao.count();
page.setData(data);
page.setTotalClum(count);
return page;
}
?
（4）切換回Flash視圖 開發與Java端Page類對應的as類。
package com.oa.vo
{
import mx.collections.ArrayCollection;
[RemoteClass(alias="com.soft.flex.flex4sj.dao.Page")]
public class Page
{
public function Page()
{
}
public var data :ArrayCollection;
public var ?currentPage:int;
public var ?totalPage:int;
public var ?pageSize:int;
public var ?totalClum:int;
}
}
?
?
（5）修改主程序的MXML文件 添加分頁欄 。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
???xmlns:s="library://ns.adobe.com/flex/spark"
???xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
???initialize="application1_initializeHandler(event)"
????xmlns:ns1="*">
<fx:Script>
<![CDATA[
import com.oa.vo.Page;
import mx.collections.IList;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import spark.events.IndexChangeEvent;
[Bindable]
private var pageData:Page;
public ?function loadData(currentPage:int):void{
var page:Page = new Page();
page.currentPage=currentPage;
page.pageSize=this.setPageSize.selectedItem.data;
this.myremoting.findByPage(page);
}
protected function application1_initializeHandler(event:FlexEvent):void
{
loadData(1);
}
protected function ddl_changeHandler(event:IndexChangeEvent):void
{
var cid:String = this.ddl.selectedItem.countryId;
this.myremoting.getCupByCountryId(cid);
}
protected function myremoting_resultHandler1(event:ResultEvent):void
{
?pageData =Page( event.result) ;
Alert.show(pageData.currentPage+'c');
Alert.show(pageData.totalPage+'t');
this.ddl.dataProvider=pageData.data;
this.ddl.labelField = "countryName";
this.adg1.dataProvider=pageData.data;
}
protected function myremoting_resultHandler2(event:ResultEvent):void
{
this.adg1.dataProvider=event.result;
}
protected function myremoting_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.toString());
}
]]>
</fx:Script>
<fx:Declarations>
<s:RemoteObject id="myremoting" showBusyCursor="true" destination="service"
endpoint="http://localhost:8080/sj43/messagebroker/amf"
fault="myremoting_faultHandler(event)"
>
<s:method name="findByPage" result="myremoting_resultHandler1(event)" />
<s:method name="getCupByCountryId" result="myremoting_resultHandler2(event)"/>
</s:RemoteObject>
</fx:Declarations>
<s:Panel width="741" height="427" title="使用HttpService 與后臺通信" horizontalCenter="0" verticalCenter="25">
<mx:AdvancedDataGrid x="2" y="9" id="adg1" designViewDataType="flat" width="727" height="274">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="代號" dataField="countryId"/>
<mx:AdvancedDataGridColumn headerText="國家" dataField="countryName"/>
<mx:AdvancedDataGridColumn headerText="金牌數" dataField="goldMedal"/>
<mx:AdvancedDataGridColumn headerText="銀牌數" dataField="silverMedal"/>
<mx:AdvancedDataGridColumn headerText="銅牌數" dataField="bronzeMedal"/>
</mx:columns>
</mx:AdvancedDataGrid>
<s:Label x="215" y="361" text="選擇國家：" height="23" verticalAlign="middle"/>
<s:Button x="475" y="361" label="顯示全部" click="application1_initializeHandler(event as FlexEvent)"/>
<s:DropDownList x="306" y="361" id="ddl" prompt="請選擇國家" change="ddl_changeHandler(event)"></s:DropDownList>
<!--以下為分頁欄-->
<mx:HBox cornerRadius="0" borderStyle="solid" horizontalAlign="left" verticalAlign="middle" width="722" x="7" y="305" height="27">
<mx:Text fontSize="12" text="{' 第'+pageData.currentPage+'頁/共'+pageData.totalPage+'頁'+' 共'+pageData.totalClum+'條記錄'}"/>
<mx:LinkButton id="lbtnFirst" label="首頁" ?click="loadData(1)" ?enabled="{lbtnPrevious.enabled}" fontSize="12"/>
<mx:LinkButton id="lbtnPrevious" label="上一頁" click="loadData(pageData.currentPage-1)" ??enabled="{pageData.currentPage!=1?true:false}" ?fontSize="12"/>
<mx:LinkButton id="lbtnNext" label="下一頁" ??click="loadData(pageData.currentPage+1)" enabled="{pageData.totalPage>=(pageData.currentPage+1)?true:false}" ?fontSize="12"/>
<mx:LinkButton id="lbtnLast" label="尾頁" click="loadData(pageData.totalPage)" enabled="{lbtnNext.enabled}" fontSize="12"/>
<mx:Label ??text="每頁顯示："/>
<mx:ComboBox id="setPageSize" ?width="71" change="loadData(1)">
<mx:dataProvider>
<mx:ArrayList ?>
<fx:Object label="5" data="5" /> ????????????????????????????????????????????????????????????????????????????????????????????????????????
<fx:Object label="10" data="10" />
<fx:Object label="20" data="20" /> ???
</mx:ArrayList>
</mx:dataProvider>
</mx:ComboBox>
<mx:Label ??text="條"/>
<mx:NumericStepper id="nsPageNum" stepSize="1" minimum="1" maximum="{pageData.totalPage}" ?enabled="{lbtnJump.enabled}" cornerRadius="0" width="54"/>
<mx:LinkButton id="lbtnJump" label="跳轉" ?click="loadData(nsPageNum.value)" enabled="{pageData.totalPage>1?true:false}" ?fontSize="12"/>
</mx:HBox>
</s:Panel>
</s:Application>
?
（6）運行應用程序，效果如圖5.2.4所示。
?
圖5.2.4 ?分頁
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
鞏固練習
選擇題
1. ?Flex與外部進行數據通信的方式有（）
A. ?HTTPService。
B. ?WebService。
C. ?Remoting。
D. ?HttpRequest。
2. ?以下關于Flex中Remoting數據通信方式的說法，正確的是（）
A. ?Remoting使用AMF二進制信息格式化傳遞數據。
B. ?在Flex應用中使用Remoting 技術需要有第三方軟件支持。
C. ?數據量越大，Remoting方式傳輸效率越高。
D. ?Remoting不支持序列化與反序列化。
3. ?以下關于remoting-config.xml文件配置信息的描述 正確的是（）。
A. ?使用destination節點配置遠程調用類的標示。
B. ?Source節點代表遠程調用類的class文件路徑。
C. ?一個remoting-config.xml文件只允許配置一個destination節點。
D. ?一個remoting-config.xml文件只允許配置多個destination節點。
簡答題
（1）什么Remoting數據通信技術？
操作題
開發一個WebService ,用于查詢Oracle數據庫中的商品信息表，并返回結果。然后通過Flex的WebService組件調用webservice,將獲取到的結果顯示在表格組件中。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Flex与外部的数据通信的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 游标和触发器
- 下一篇： Oracle代码大全.从入门到熟练