初学FLEX做的小练习（二）-数据服务（用RemoteObject与后台交互）

qq1013712290

浏览: 203809 次
性别:
来自: 广州

最近访客更多访客>>

u012363178

devcang

itace

mjm13

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

三、数据服务（用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("asdf@adf");
       emp.setPhone("7654321");
       map.put(emp.getId(), emp);
       emp = new Process();
       emp.setId("222221");
       emp.setName("aaaa1");
       emp.setGender("Fmale1");
       emp.setEmail("asdf@adf1");
       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> 

   </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()
       {

       }
   }
}