Flex使用BlazeDs與Java互動及自定義對象轉換

       前天接到上司分發的新任務，需要将之前用JAVA Swing實作的報表前端移植到Flex端，背景不變依然采用JAVA代碼，這樣就涉及到前端Flex如何同JAVA背景通信的問題。在網上查了下，主要有如下三種方式：

     1、通過HTTPService：你通路一個XML或者Servlet，然後Flex接收傳回的XML資料。

     2、通過WebService：你通路一個WebService服務，然後獲得文本資訊。

     3、通過RemoteObject：可以通過BlazeDs來通路遠端Service接口方法，Flex接收一個對象。

這裡我隻是研究了一下第三種方式，因為JAVA背景已經把資料封裝到了一個對象裡面，這樣就服務端的程式可以不用動，隻管把服務端傳過來的這個對象轉換成AS對象，然後解析處理裡面的資料并展示到Flex前端即可。

這裡需要對RemoteObject做一下簡單的介紹，首先我們需要在服務端的remote- 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="UserManager">
		<properties>
			<source>com.rocd.flex.biz.UserManager</source>
		</properties>
	</destination>
 </service>
           

  然後在用戶端執行個體化RemoteObject元件對象。建立RemoteObject元件對象的MXML标簽文法如下： <mx:RemoteObject id="UserManager" destination="UserManager" showBusyCursor="true" />id屬性指定了RemoteObject元件執行個體名稱，在接下來調 用該服務對象及處理遠端服務響應時使用。destination屬性指定了要連接配接的遠端服務的目标，該值必須與伺服器端remote- config.xml檔案中配置的目标id屬性相比對。

下面開始動手實踐一下

首先就是去下載下傳Blazeds的壓縮包，這個可以從官網上下到。解壓縮這個包，将裡面的Blazeds.war解壓，後面建立工程時要使用。 在Eclipse中建立一個web工程，名為FlexTest。 将剛才解壓的Blazeds.war包中的“META-INF”與“WEB-INF”檔案夾以及檔案夾中的内容拷貝到工程的WebRoot下。WEB-INF中包含有Flex的配置檔案以及Blazeds需要的Jar包。這時我們就可以在這個工程中寫入Java代碼了。本文以一個使用者清單為例，建立使用者實體類。代碼如下：

package com.rocd.flex.entity;

 import java.io.Serializable;

 public class UserBean implements Serializable {
 private String userName;
 private String password;
 private int age;
 private String email;

 public String getUserName() {
 return userName;
 }

 public void setUserName(String userName) {
 this.userName = userName;
 }

 public String getPassword() {
 return password;
 }

 public void setPassword(String password) {
 this.password = password;
 }

 public int getAge() {
 return age;
 }

 public void setAge(int age) {
 this.age = age;
 }

 public String getEmail() {
 return email;
 }

 public void setEmail(String email) {
 this.email = email;
 }
 }
           

注意：由于這個實體類需要當做Java代碼中方法的傳回值傳遞給Flex中的AS代碼，是以需要繼承Serializable接口，否則将導緻異常的發生。  然後，在建立一個供Flex調用的Java類。代碼如下:

package com.rocd.flex.biz;

 import java.util.ArrayList;
 import java.util.List;

 import com.rocd.flex.entity.UserBean;

 public class UserManager {
  public List<UserBean> getUserList() {
   List<UserBean> list = new ArrayList<UserBean>();
    for (int i = 0; i < 10; i++) {
      UserBean user = new UserBean();
      user.setUserName("使用者" + i);
      user.setPassword("123");
      user.setAge(20 + i);
      user.setEmail("user" + i + "@aaa.com");
      list.add(user);
     }
    return list;
  }
}
           

這裡就不連接配接資料庫去操作了，我們把重點放在Flex調用Java上，是以寫個死資料用以測試。

寫完了這兩個類，就需要在WebRoot/WEB-INF/flex/remoting-config.xml中配置用以調用這個Java類的信道了。具體代碼上面已經謝過了。 其中destination就是信道，properties是可以配置多個Java類，source是配置要調用Java類的包路徑。

到此，Java部分的代碼就寫完了。下面是Flex中的代碼。

在Flex Builder中建立一個Flex工程。名稱為FlexApp。如圖所示：

注意Project Location的Folder要選擇Eclipse建立的Web工程的WebContent下。Server technology選擇J2EE

點選[Next]按鈕進入下一頁。如圖

注意Server location中Root folder要選擇Java Web工程的WebRoot路徑。Root URL是Java web工程的通路路徑，由于使用的是Tomcat伺服器，工程名為FlexTest，是以路徑是http://localhost:8080/FlexTest/，而

Context root則是Java Web項目的工程名。完成後點選那個[Validate Configuration]進行驗證，如果視窗上方顯示如上圖所示的“黃三角”就說明可以進行下一步操作了。

順利建立完Flex工程後，需要注意是否報錯，如果報錯，請注意調整Flex SDK的版本。

沒問題後，就要建立一個AS的類，用來接收Java程式的傳回值了，也就是那個UserBean。

package com.rocd.flex.entity
{
  [Bindable]
  [RemoteClass(alias="com.rocd.flex.entity.UserBean")]
  public class UserBean
  {
    public var userName:String;
    public var password:String;
    public var age:int;
    public var email:String;
  }
}

           

這裡[Bindable]是可綁定的，[RemoteClass(alias="com.rocd.flex.entity.UserBean")]是和Java代碼中的UserBean類關聯起來。這樣就可以利用類型轉換來将Java對象轉換為AS對象了。 現在讓我們在Flex中調用這個Java代碼吧。代碼如下：

<?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
     fontSize="12" initialize="init()">
     <mx:Script>
         <![CDATA[
             import com.rocd.flex.entity.UserBean;
             import mx.collections.ArrayCollection;
             import mx.rpc.events.ResultEvent;
            
             private function init():void
             {
                 UserManager.getUserList();
                 UserManager.addEventListener(ResultEvent.RESULT,getUserList);
             }
            
            private function getUserList(event:ResultEvent):void
             {
                 var userList:ArrayCollection = ArrayCollection(event.result);
                 var userList_FlexData:ArrayCollection = new ArrayCollection();
                 for (var i:int = 0; i < userList.length; i++)
                 {
                     var user:UserBean = UserBean(userList.getItemAt(i));
                     userList_FlexData.addItem(user);
                 }
                 dataGrid.dataProvider = userList_FlexData;
             }
         ]]>
     </mx:Script>
     <mx:RemoteObject id="UserManager" destination="UserManager"
         showBusyCursor="true" />

     <mx:Panel x="32" y="20" width="399" height="285" layout="absolute" title="使用者清單">
         <mx:DataGrid x="0" y="0" width="379" height="243" id="dataGrid">
            <mx:columns>
                 <mx:DataGridColumn headerText="使用者名" dataField="userName"/>
                 <mx:DataGridColumn headerText="密碼" dataField="password"/>
                    <mx:DataGridColumn headerText="年齡" dataField="age"/>
                 <mx:DataGridColumn headerText="郵件" dataField="email"/>
             </mx:columns>
         </mx:DataGrid>
     </mx:Panel>
 </mx:Application>

           

啟動Tomcat伺服器後運作這個Flex程式，如下圖所示：

經過了各種重新開機，各種clean總算得到了上面的結果，唉，不容易啊。 關于BlazeDs的體系結構，請參考文檔 http://wenku.baidu.com/view/aaa241f9aef8941ea76e05a1.html ，這裡不再贅述。