初學FLEX做的小練習（二）-數據服務（用RemoteObject與後臺交互）

三、數據服務（用RemoteObject與後臺交互）代碼編寫

這部分將完成FLEX與後臺JAVA代碼的通信（增刪改查），

首先在MyEclipse5.5 裏建立一個JAVA Web Project，項目名dataGridDemo，建立好工程之後，要想FLEX和JAVA通信，我們使用blazeds，下載blazeds-turnkey-4.0.0.14931.zip,解壓找到blazeds.war,然後再解壓，找到WEB-INF文件夾,用這個WEB-INF覆蓋JAVA web Project 的WEB-INF文件夾。

建立com.vo.Process.java

1）package com.vo;

public class Process {

    private String id;
    private String name;
    private String gender;
    private String email;
    private String phone;
    
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPhone() {
        return phone;
    }
    public void setPhone(String phone) {
        this.phone = phone;
    }

}

2）com.test.ProcessInfo.java

package com.test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Set;
import  java.util.Map.Entry;

import com.vo.Process;

public class ProcessInfo {
    static Map map = new HashMap();
    static { //靜態代碼塊模擬數據庫中的數據
        
        Process emp = new Process();
        emp.setId("22222");   
        emp.setName("aaaa");   
        emp.setGender("Fmale");   
        emp.setEmail("[email protected]");   
        emp.setPhone("7654321");   
        map.put(emp.getId(), emp);
        emp = new Process();
        emp.setId("222221");   
        emp.setName("aaaa1");   
        emp.setGender("Fmale1");   
        emp.setEmail("[email protected]");   
        emp.setPhone("76543211");   
        map.put(emp.getId(), emp);
    }
    public  List<Process>  query(Process empvo){    //查
        List<Process> list = new ArrayList<Process>();   
        
        
        list.add((Process)map.get(empvo.getId()));
        return list;
    }
    
    public void addProcess(Process empvo){ //增
        map.put(empvo.getId(), empvo);
    }
    
    private void del(Process empvo){ //刪
        map.remove(empvo.getId());
    }
    
    public List<Process> delProcess(Process empvo){ //刪
        del(empvo);
        return query(empvo);
    }
}

3)修改工程中的 文件，增加destination節點

WebRoot/WEB-INF/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="ProcessInfoRemoting">   //重要
      <properties>    
          <source>com.test.ProcessInfo</source>    
      </properties>    
     </destination>
     <destination id="helloJavaFlex">   
      <properties>    
          <source>com.test.HelloJavaFlex</source>    
      </properties>    
     </destination>
< /service>

 

縱覽下最終的文件結構

 

四、啓動TOMCAT,並部署JAVA WEB項目

我的TOMCAT的配置如下：

點擊下面圖片上的那個部署小圖標，出現Project Deployments部署對話框，選擇要部署的工程和部署到的TOMCAT上，部署，Successfully deployed,OK

 

五、與JAVA通信FLEX部分的代碼

1）src/ui/dp/ro.mxml

 

<?xml version="1.0" encoding="utf-8"?>

< mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"  
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:sf="http://www.spicefactory.org/parsley"
           xmlns:mx="library://ns.adobe.com/flex/mx"  width="100%" height="100%">
    <fx:Script>
        <![CDATA[
            import model.*;
            import model.vo.*;
            
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.PropertyChangeEvent;
            import mx.managers.PopUpManager;
            import mx.rpc.AsyncToken;
            import mx.rpc.events.ResultEvent;
            
            [Bindable]
            public var pDM:ProcessHandler = new ProcessHandler();//在ProcessHandler.as的類裏的構造函數裏聲明一個調用JAVA WEB 項目的遠程對象。
            
            
         
//            public function queryProcess1():void{
//                var nameText:String = nameInputText.text;
//                var p:Process  = new Process();
//                p.id = nameText ;
//                remoteQueryProcess.query(p);//另一種比較直觀的 調用JAVA WEB 項目的後臺方法。
//                remoteQueryProcess.addEventListener(ResultEvent.RESULT,getRemoteMessage);//當後臺正確返回記錄的LIST智慧，調用的函數getRemoteMessage(),
//            }
//            private function getRemoteMessage(event:ResultEvent):void{
//                dg.dataProvider= event.result;
//                
//            }
//            
//      
            
            public function queryProcess():void{
                var nameText:String = nameInputText.text;
                var p:Process  = new Process();
                p.id = nameText ;
                pDM.queryProcess(p);
            }
            
            public function addProcess():void{
                var mywindow:Object ;
                mywindow=PopUpManager.createPopUp(this,AddPopupWindow,false);//彈出增加窗口
            }
            
            public function updateProcess():void{
                var mywindow:Object ;
                var p:Process  = new Process();
                p.id = dg.selectedItem.id ;
                p.name = dg.selectedItem.name;
                p.gender = dg.selectedItem.gender;
                p.email = dg.selectedItem.email;
                p.phone = dg.selectedItem.phone;
                 var updateWin:AddPopupWindow = new AddPopupWindow();//聲明一個彈出窗口
                updateWin.p = p;//把選中表格中的記錄的值初始化到修改窗口中的文本框中
                
                PopUpManager.addPopUp(updateWin, this, true);  
                PopUpManager.centerPopUp(updateWin);  //居中彈出一個修改窗口
//                mywindow=PopUpManager.createPopUp(this,AddPopupWindow,false);
                
            }
            
            
            public function delProcess():void{
                 var p:Process  = new Process();
                 p.id = dg.selectedItem.id ;
                 pDM.delProcess(p); //根據ID從後臺刪除記錄
                
            }
              
    
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 將非可視元素（例如服務、值對象）放在此處 -->
        <mx:RemoteObject destination="ProcessInfoRemoting" id="remoteQueryProcess" endpoint="/dataGridDemo/messagebroker/amf">
            
            
        </mx:RemoteObject>  <!--另一種比較直觀的與JAVA後臺通信的聲明，聲明一個RemoteObject,destination和JAVA WEB project中的Remoting-Config.xml裏的destination節點一致-->
        
    </fx:Declarations>
< mx:Panel title="數據服務" width="100%" height="100%">
    <mx:VBox>
        <mx:HBox>
            <s:Label x="144" y="104" text="查詢流程：" width="47"/>
            <s:TextInput x="218" y="99" id="nameInputText"/>
            <mx:Button x="203" y="143" label="queryBtn" click="queryProcess();"/>  
            <mx:Button label="增加" click="addProcess()"/>
            <mx:Button label="刪除" click="delProcess()"/>
            <mx:Button label="修改" click="updateProcess()"/>
        </mx:HBox>  
        
        <mx:DataGrid y="156" width="674" height="300" horizontalCenter="0" id="dg" dataProvider="{pDM.processArr}">
            <mx:columns>  
                <mx:DataGridColumn headerText="ID" dataField="id"/>
                <mx:DataGridColumn headerText="Name" dataField="name"/>
                <mx:DataGridColumn headerText="Gender" dataField="gender"/>
                <mx:DataGridColumn headerText="Email" dataField="email"/>
                <mx:DataGridColumn headerText="Phone Number" dataField="phone"/>
                
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
< /mx:Panel>
< /mx:Canvas>

2）src/ui/dp/AddPopupWindow.mxml 彈出窗口

 

<?xml version="1.0" encoding="utf-8"?>
< s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" close="closeMe()" creationComplete="init()" >
    <fx:Declarations>
        <!-- 將非可視元素（例如服務、值對象）放在此處 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import model.*;
            import model.vo.*;
            
            import mx.managers.PopUpManager;
            
            private function closeMe():void{
                PopUpManager.removePopUp(this);
            }
            
            public var pDM:ProcessHandler = new ProcessHandler();
            public var p:Process;
            
            
            public function init():void{
                id1.text =p.id;
                name1.text = p.name;
                gender1.text = p.gender;
                email1.text = p.email;
                phone1.text = p.phone;
                
            }
            
            private function addRecord():void{
                var pvo:Process = new Process();
                pvo.id = id1.text;
                pvo.name = name1.text;
                pvo.gender = gender1.text;
                pvo.email = email1.text;
                pvo.phone = phone1.text;
                pDM.addProcess(pvo);
                closeMe();
                
            }
            
            private function updateRecord():void{
                var pvo:Process = new Process();
                pvo.id = id1.text;
                pvo.name = name1.text;
                pvo.gender = gender1.text;
                pvo.email = email1.text;
                pvo.phone = phone1.text;
                pDM.addProcess(pvo);
                closeMe();
                
            }
        ]]>
    </fx:Script>
    
    <mx:VBox x="50" y="50">
    <mx:Grid>
        <mx:GridRow>
            <mx:GridItem colSpan="2" horizontalAlign="right">
                <mx:Button label="確定" click="addRecord()"/>
                <mx:Button label="取消" click="closeMe()"/>
            </mx:GridItem>
            
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Label text="ID"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:TextInput id="id1" width="200"/>
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Label text="name"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:TextInput id="name1"  width="200"/>
            </mx:GridItem>            
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Label text="Gender"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:TextInput id="gender1"  width="200"/>
            </mx:GridItem>            
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Label text="Email"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:TextInput id="email1"  width="200"/>
            </mx:GridItem>            
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Label text="Phone Number"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:TextInput id="phone1"  width="200"/>
            </mx:GridItem>            
        </mx:GridRow>
    </mx:Grid>
    </mx:VBox>
    
< /s:TitleWindow>

2）src/model/vo/Process.as  ，這個AS文件的字段和JAVA工程中的VO的字段一一對應。

package model.vo
{
    [RemoteClass(alias="com.vo.Process")]   //com.vo.Process是對應的後臺JAVA代碼的VO
    public class Process
    {
        
        public var id:String;
        public var name:String;
        public var gender:String;
        public var email:String;
        public var phone:String;
    }
}

 

3） src/model/ProcessHandle.as

 

package model
{
    import model.util.Constants;
    import model.vo.Process;
    
    import mx.collections.ArrayCollection;
    import mx.controls.Alert;
    import mx.events.PropertyChangeEvent;
    import mx.rpc.AsyncToken;
    import mx.rpc.events.FaultEvent;
    import mx.rpc.remoting.RemoteObject;
    
    public class ProcessHandler
        
    {
        [Bindable]
        public var processArr:ArrayCollection ;//設processArr爲綁定變量，前臺ro.mxml的DataGrid數據來源與這個綁定變量的值。
        
        public var pro:RemoteObject;
        public function ProcessHandler()   //在構造函數裏聲明一個遠程對象RemoteObject.然後其他地方就可以使用它了。
        {
            pro = new RemoteObject();
//            pro.addEventListener(FaultEvent.FAULT,showInfo());
            pro.destination=Constants.DESCINATION; 
            pro.endpoint=Constants.ENDPOINT;
        }
        
        public function addProcess(pvo:Process ):void{
            pro.addProcess(pvo);
        }
        
        
        public function queryProcess(pvo:Process ):void{
            var token:AsyncToken=pro.query(pvo);
            token.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,
                function(event:PropertyChangeEvent):void{
                    processArr = ArrayCollection(AsyncToken(event.target).result); //查詢之後，將返回的LIST賦值給processArr，然後反映到ro.mxml的DataGrid控件上。
                }
            );
            
        }
        
        public function delProcess(pvo:Process ):void{
            var token:AsyncToken=pro.delProcess(pvo);
            token.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,
                function(event:PropertyChangeEvent):void{
                    processArr = ArrayCollection(AsyncToken(event.target).result);  //刪除之後，重新將返回結果的LIST返回給這個變量，刷新ro.mxml的DataGrid的數據來源。
                }
            );
            
        }
        
        
        
    }
}

 

4）src/model/util/Constants.as

 

package model.util
{
    public class Constants
    {
        public static const DESCINATION ="ProcessInfoRemoting";
        
        public static const ENDPOINT="/dataGridDemo/messagebroker/amf";
        public function Constants()
        {
            
        }
    }
}

 

六、FLEX工程關聯到JAVA項目的配置

右擊FLEX項目FlexDemo3，彈出屬性窗口，選擇Flex服務器,然後配置應用程序服務器類型爲J2EE，

並選擇BlazeDS,服務器位置選擇D:\apache-tomcat-6.0.35\webapps\dataGridDemo,跟URL爲：http://localhost:8080/dataGridDemo

，上下文根目錄爲：/dataGridDemo，然後點驗證配置按鈕。不出錯就OK。

然後點確定按鈕關閉窗口。

配置如下圖：

 

以上配置好之後，選擇我們建的FlexDemo3的工程，然後點綠色的運行按鈕，就彈出了主頁面main.mxml。測試吧。

 

相關工程代碼請下載 http://download.csdn.net/detail/iamyzs/4284826