采用flex的RemoteObject与后端java通信（demo版）

  到新公司已经一个礼拜了，今天刚好是第七个工作日，十一之前已经写好的demo，今天来总结一下。

 初次接触flex，公司采用pureMVC和BlazeDS框架，在一个即将开始做的项目里面，我参照PM写的登录功能，在这个工程里面做了一个很简单的功能，填写一个表单，向数据库里面增加一条数据，然后列出这张表里面的所有数据。在做这个小功能时，慢慢地体会到了flex的强大与pureMVC的思想，完全使界面与操作，模型处理以及控制分开。

 

首先介绍一个这个工程的架构：

分为flex工程和java工程。在两个IDE里面coding，从flex端直接运行，java端服务开启，以debug模式启动tomcat.

java端采用spring,ibatis框架

flex采用pureMVC,BlazeDS框架

 

我先不介绍pureMVC的东西了，这个我现在还在体会中，以后有时间了写下详细介绍，今天算是做一个简单的总结。因为才接触，有些地方可能不准确，能提出改进建议就更期待了。

 

首先，在ApplicationFacade的initializeController方法中注册Controller的类，我这里叫作feeCommand。最开始取名时没想到，flex是完全面象对象的，这个feeCommand也是一个类，最好是大写开头。

注册这个feeCommand代码：

	registerCommand(GlobalCommandNots.FEE_DEMO_COMMAND,feeCommand);
//feeCommand是一个类名

 

GlobalCommandNots是一个类，专门存放全局变量。这里面是定义控制参数。

public static const FEE_DEMO_COMMAND:String ="Facade.fee_demo";

 

程序run的时候，最先到ApplicationFacade里面找到注册的command,然后在command里面会有proxy代理，proxy负责与后端通信。

public class feeCommand extends SimpleCommand implements ICommand
	{
		//得到FeeProxy对象。
		public function get feeProxy():FeeProxy
		{
		  var proxy:FeeProxy;
		  if(this.facade.hasProxy(FeeProxy.PROXY_NAME)){
		  	proxy = this.facade.removeProxy(FeeProxy.PROXY_NAME) as FeeProxy;
		  }else{
		 	proxy=new FeeProxy();
		    this.facade.registerProxy(proxy);
		  }
		  
		  return proxy;
		
		}
		
		
		override public function execute(notification:INotification):void
		{
		 switch(notification.getType()){
		 	case GlobalNotifications.TO_ADD_FEE:
		 	var fe:fee=notification.getBody() as fee;
		 	if(fe==null) break ;
		 	var param:Object=new Object();
		 	param.moduleId=StringUtil.trim(fe.moduleId.text);
		 	param.moduleType=StringUtil.trim(fe.moduleType.text);
		 	param.moduleName=StringUtil.trim(fe.moduleName.text);
		 	param.parentId=StringUtil.trim(fe.parentId.text);
		 	
		 	feeProxy.addOne(param);//这里调用proxy里面的方法，而在proxy里面，又与后台java端通信，调用java里面的方法。
		 	
		 	break;
		 	
		 	default:
			break;
		 }
		
		}

	}

 

FeeProxy.as代码：

public class FeeProxy extends Proxy
	{
		public static const PROXY_NAME:String="com.tongcard.tcc.main.model.proxy.FeeProxy";
		private var tccRemote:TccRemoteObject;
		
		public function FeeProxy(proxyName:String=null, data:Object=null)
		{
			super(PROXY_NAME, data);
			tccRemote = new TccRemoteObject();
			tccRemote.destination = 'feeServiceRemoting'; //这里对应spring的<bean id="feeServiceRemoting" class="org.springframework.flex.remoting.RemotingDestinationExporter">
		}
		
		public function addOne(param:Object):void
		{
			tccRemote.addOne(param);//调用后台的FeeService里面的addOne方法。
			tccRemote.addEventListener(ResultEvent.RESULT,addOneResultHandler);
		  
		}


	 	private function addOneResultHandler(e:ResultEvent):void
	 	{
	 	  
	 	  if(e.result.status=="success"){
	 	     this.sendNotification(GlobalNotifications.QUERY_FEE_LIST,e.result.feeList as ArrayCollection,null);
	 	  }else{
	 	  Alert.show("fail to add one ");
	 	  }
	 	 // tccRemote.getFeeList();//调用后台的的的FeeService里面的getFeeList方法。
	 	 // tccRemote.addEventListener(ResultEvent.RESULT,feeListResultHandler);
	 	
	 	}

 feeproxy主要负责与java后端通信，如果添加成功就发通知，通知会发给专门负责处理界面的类FeeMediator

 if(e.result.status=="success"){
	 	     this.sendNotification(GlobalNotifications.QUERY_FEE_LIST,e.result.feeList as ArrayCollection,null);

注意，这里是指添加一条数据成功后，返回了一个状态，当状态为成功时，发送一个通知，这里是将返回的feeList在发通知时一起发出去的。然后FeeMediator处理通知

case GlobalNotifications.QUERY_FEE_LIST:
	   				var array: ArrayCollection	=notification.getBody() as ArrayCollection;
	   				fe.removeAllChildren();
	   				var flist:FeeList =new FeeList();
	   				fe.addChild(flist);
	   			
	   				flist.feeDataGrid.dataProvider=array;

 这里的var array: ArrayCollection    =notification.getBody() as ArrayCollection;就是feeProxy里面的

 this.sendNotification(GlobalNotifications.QUERY_FEE_LIST,e.result.feeList as ArrayCollection,null);//这里是将返回的feeList在发通知时一起发出去的。

 

并且，这里面的flist.feeDataGrid.dataProvider=array;是将得到的ArrayList集合赋值给FeeList.mxml里面的DataGrid组件，我这里没有用绑定。

 

FeeList.mxml代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
	<mx:HBox id="sss"/>
	<mx:DataGrid x="20" y="52" height="168" width="357" id="feeDataGrid">
		<mx:columns>
			<mx:DataGridColumn headerText="编号ID" dataField="moudleId"/>
			<mx:DataGridColumn headerText="费用名称" dataField="moduleName"/>
			<mx:DataGridColumn headerText="费用类别" dataField="feeType"/>
			<mx:DataGridColumn headerText="父级ID" dataField="moduleParentId"/>
		</mx:columns>
	</mx:DataGrid>
	
</mx:Canvas>

 

 

FeeMediator.as的代码：

 

public class FeeMediator extends Mediator
	{
		public static const MEDAITOR_NAME:String = "com.tongcard.tcc.main.view.firstdemo.FeeMediator";
		
		public function FeeMediator(mediatorName:String=null, viewComponent:Object=null)
		{
			super(mediatorName, viewComponent);
			fe.submitBut.addEventListener(MouseEvent.CLICK,insert);
			//fe.viewList.addEventListener(MouseEvent.CLICK,onClickToFeeList);
		}

		public  function get fe():fee
		{
		   return this.getViewComponent() as fee;
		}
		
		private function insert(e:MouseEvent):void
		{
			//Alert.show("add add");
			this.sendNotification(GlobalCommandNots.FEE_DEMO_COMMAND,
                      fe,GlobalNotifications.TO_ADD_FEE);
		}
		
		override public function listNotificationInterests():Array
		{
			return [GlobalNotifications.TO_ADD_FEE,GlobalNotifications.QUERY_FEE_LIST];
		}
		
		override public function handleNotification(notification:INotification):void
		{
			switch(notification.getName()){
				case GlobalNotifications.TO_ADD_FEE:
					this.sendNotification(GlobalCommandNots.FEE_DEMO_COMMAND,new Object(),"addFee");
					break;
				case GlobalNotifications.QUERY_FEE_LIST:
	   				var array: ArrayCollection	=notification.getBody() as ArrayCollection;
	   				fe.removeAllChildren();
	   				var flist:FeeList =new FeeList();
	   				fe.addChild(flist);
	   			
	   				flist.feeDataGrid.dataProvider=array;
		 			break;	
				default:
					break;
			}
		}
	
		

	}

 

 

 FeeMediator构造方法里面就注册了监听，

fe.submitBut.addEventListener(MouseEvent.CLICK,insert);

 表示点击fee.mxml页面上的提交按钮时调用insert方法。而insert方法里面将添加的通知发给FeeCommand,在FeeCommand里面的

 

override public function execute(notification:INotification):void
		{
		 switch(notification.getType()){
		 	case GlobalNotifications.TO_ADD_FEE:
		 	var fe:fee=notification.getBody() as fee;
		 	if(fe==null) break ;
		 	var param:Object=new Object();
		 	param.moduleId=StringUtil.trim(fe.moduleId.text);
		 	param.moduleType=StringUtil.trim(fe.moduleType.text);
		 	param.moduleName=StringUtil.trim(fe.moduleName.text);
		 	param.parentId=StringUtil.trim(fe.parentId.text);
		 	
		 	feeProxy.addOne(param);//这里调用proxy里面的方法，而在proxy里面，又与后台java端通信，调用java里面的方法。
		 	
		 	break;
		 	
		 	default:
			break;
		 }

 这里是将表单中的信息封装到一个Object的param里面，然后调用feeProxy里面的addOne.

而feeProxy里面的addOne又是什么样的？

 

public function addOne(param:Object):void
		{
			tccRemote.addOne(param);//调用后台的FeeService里面的addOne方法。
			tccRemote.addEventListener(ResultEvent.RESULT,addOneResultHandler);
		  
		}

 feeProxy负责与后端通信。tccRemote.addOne(param);//调用后台的FeeService里面的addOne方法。

 

那再看看后端这个方法：

public Map addOne(Map<String,Object> map){
		resultMap.clear();
		String moduleId=(String)map.get("moduleId");
		String moduleName=(String)map.get("moduleName");
		String moduleType=(String)map.get("moduleType");
		String parid=(String)map.get("parentId"); //从这里取出前端flex传来的param里面的parentId的参数。
		FeeMoudel feem=new FeeMoudel();
		feem.setMoudleId(moduleId);
		feem.setFeeType(moduleType);
		feem.setModuleName(moduleName);
		feem.setModuleParentId(parid);
		try {
			if(feeManager!=null){
			feeManager.addOne(feem);
			
			List feeList=getFeeList();
			resultMap.put("feeList", feeList);
			resultMap.put("status", "success");
			
			
			}else{
				resultMap.put("status", "fail");
			  System.out.println("feemanager is null");
			}
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
		return resultMap;
	
		
	}

 这里的

String moduleId=(String)map.get("moduleId");
		String moduleName=(String)map.get("moduleName");
		String moduleType=(String)map.get("moduleType");
		String parid=(String)map.get("parentId"); //从这里取出前端flex传来的param里面的parentId的参数。

 与flex端的

	var param:Object=new Object();
		 	param.moduleId=StringUtil.trim(fe.moduleId.text);
		 	param.moduleType=StringUtil.trim(fe.moduleType.text);
		 	param.moduleName=StringUtil.trim(fe.moduleName.text);
		 	param.parentId=StringUtil.trim(fe.parentId.text);
		 	
		 	feeProxy.addOne(param);//这里调用proxy里面的方法，而在proxy里面，又与后台java端通信，调用java里面的方法。

 是根据key关联起来的。

 

 

这里的模型数据类是FeeMoudel,它有以下几个属性：

	private String moudleId;
	private String moduleName;
	private String feeType;
	private String moduleParentId;

 

 

spring的配置：

<bean id="feeManager" class="com.tongcard.tcc.feedemo.manager.impl.FeeManagerImpl"></bean>
	<bean id="feeService" class="com.tongcard.tcc.feedemo.FeeService"></bean>
	<bean id="feeServiceRemoting" class="org.springframework.flex.remoting.RemotingDestinationExporter">
	<property name="messageBroker" ref="_messageBroker"></property>
	<property name="service" ref="feeService"></property>
	</bean>

其中，<bean id="feeServiceRemoting" class="org.springframework.flex.remoting.RemotingDestinationExporter">就是与flex通信的RemoteObject关联的配置。

 

 Ibatis的配置

<sqlMap namespace="feesql">

	<typeAlias alias="fee" type="com.tongcard.tcc.feedemo.moudel.FeeMoudel" />

	<resultMap class="fee" id="feeListMap">
	<result property="moudleId" column="module_id"/>
	<result property="moduleName" column="module_name"/>
	<result property="feeType" column="fee_type"/>
	<result property="moduleParentId" column="parent_module_id"/>
	</resultMap>



	<select id="getFeeList" resultMap="feeListMap">
		select * from fee_module
	</select>

	<insert id="addOnefee" parameterClass="fee">
		insert into fee_module
		(module_id,module_name,fee_type,parent_module_id)
		values
		(#moudleId#,#moduleName#,#feeType#,#moduleParentId#)
</insert>


</sqlMap>

 

评论

3 楼 远去的渡口 2011-10-31  

lv12312 写道

架构和我公司的很类似，基于Flex和Java后台；表示开发起来还是比较轻松的……

嗯，是的，这个Demo是我第一个基于BlazeDS的工程，现在再来看，感觉其实写的过于复杂了，现在开发起来是挺方便

2 楼 lv12312 2011-10-29  

架构和我公司的很类似，基于Flex和Java后台；表示开发起来还是比较轻松的……

1 楼 pch272215690 2010-12-29  

flex这个东西给我的感觉概括成一句话：flex，浮云也。