houwei

Flex 开发架构系列的源代码

houwei — Wed, 06 Aug 2008 04:26:19 +0800

作者: houwei 链接：http://houwei.javaeye.com/blog/224825 发表时间: 2008年08月06日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

写完这个系列blog后，接到一些朋友的站内消息，希望得到相关源代码。因为修改每一篇blog，总发现会出现已有格式被破坏所以将所有源代码打包放在这里，共有兴趣的朋友下载，所有项目文件都是建立在FlexBuilder3 下。清单如下：

java： flexmvcRemoting

Flex-all-in-one: FlexChaos

Flex-Central Management: FlexCentralManagement

Flex MVC-Cairngorm: FlexCairngorm

Flex Cairngorm without frontcontroller: Flex_No_FC

Flex Mate : Flex-Mate.

任何问题，欢迎探讨。enjoy

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

Flex 开发架构(五): Mate－基于标签的框架

houwei — Tue, 05 Aug 2008 06:28:57 +0800

作者: houwei 链接：http://houwei.javaeye.com/blog/224084 发表时间: 2008年08月05日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

Mate 将会成为Flex领域的另一个热点。它使用设置（configuration）来调用Service，处理结果，同样也使用设置文件来更新绑定对象（Bindable object）。从某个角度来说：Mate是Flex领域的“springframework”。

Mate有两个架构层面的图表。一个是来自Yakov Fain of Farata Systems，另一个来自ASFusion。我更喜欢后者，其构架图如下：

http://mate.asfusion.com/assets/content/diagrams/two_way_view_injection.png

来看看用Mate的编程方式来建立buddyList应用程序。

1，建立Mate的核心组件：EventMap。

EventMap是Mate的心脏，它黏着了所有的组件和控件。其代码如下：

BuddyListEventMap.mxml:

其它内容稍后再填写，现在我们需要告诉主程序（Main Application）初始化EventMap：

主程序 Flex_Mate.mxml:

2. 建立LoginView :



 
	var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
				loginEvent.loginUser = loginUser;
				dispatchEvent(loginEvent);
			}   
		}
	]]>

从上面可以看出在方法login()中发送(dispatch)了LoginEvent, 来看看LoginEvent代码：

package com.ny.flex.mate.event
{
	import com.ny.flex.mate.vo.User;
	
	import flash.events.Event;

	public class LoginEvent extends Event
	{
		public static const LOGIN:String = "login";
		public var  loginUser:User;
		public function LoginEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		
	}
}

在代码中“bubbles”属性必须为“true”，以使得上层的组件（EventMap）可以处理它。

Mate的魔法完全存在于EventMap中，LoginEvent在这里被标签化处理：

…..
 

     
 
         
               LoginService}” 
                                         method=”onResult_Authenticate” 
                                                    arguments=”{resultObject}“/>
        
    
 
……

在EvevntHandler代码中，用户可以定义service函数（RemoteObjectInvoker），同时也定义了结果处理的类、方法和参数。

来看看 LoginService.as代码：:

package com.ny.flex.mate.service
{
	import com.ny.flex.mate.vo.User;
	
	public class LoginService
	{
		[Bindable]
		public var authUserName:String;
		[Bindable]
		public var viewStackSelectedIndex:int ;

		public function  onResult_Authenticate(user:User):void{
			authUserName = user.userName;
			viewStackSelectedIndex = 1;
		}
		
	}
}

Service类处理结果，返回绑定的对象。然后我们就需要更新目标视窗。

Mate另一个闪光点就是注射（Injecting）可绑定的对象到目标视窗！用户只需要在EventMap类中增加另一个标签Injector。（Coolest 部分）：

在此定义目标视窗、目标关键词，资源服务对象和资源关键词。你根本不需要写任何glue code。

最后定义目标视窗： BuddyListView.mxml：

整个开发流程是这样的：

Action–>Dispatch Event–>Config Handler–>create service–>Inject Bindable Object –>another Action….

整个项目结构图见附件

总结：

在我5篇blog中讨论过的Flex编程框架中，哪一个是最好的呢？

我认为中央管理（central management）最适合进阶水准的小型项目。因为无须学习新的框架，并且也一样有清晰的架构。而且他也是走向框架的起点。

对于Mate和Cairngorm，在我看来Mate略占上风，原因如下：

对于Cairngorm：

1，Cairngorm过于复杂，学习曲线较高

2，我觉得Cairngorm有一些垃圾代码（例如Frontcontroller，event 和Command）。

对于Mate：

1，比Cairngorm更简单易学，貌似继承和发扬了Flex的特质。

2，从EventMap中得益，因为无须编写在事件和服务之间的黏着代码。

但另一个方面， EventMap也会带来痛苦，试想一下，用户有50个行为和100个对象需要绑定，那就需要在EventMap中写入大量的configration代码。那么EventMap就成为一个灾难。

因此，如果用户使用Cairngorm，就可以选用 Cairngorm without FrontContoller的方案。

对于Mate，如果使用Meta标签来代替EventMap，就无须设置太多的东西，示例如下：

[EventHadler ={name ="myHandler", serviceclass="myservice" result , taget ...}]

MateDispatch(myevent).

我在期待着它的来临。

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

Flex 开发架构(四): 去除FrontController 的Cairngorm

houwei — Sun, 03 Aug 2008 02:55:24 +0800

作者: houwei 链接：http://houwei.javaeye.com/blog/223520 发表时间: 2008年08月03日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

正如在使用Cairngorm时，视图中的每一个动作都播送一个事件，每个播送出去的事件都需要建立相应的命令代码来处理事件。并且需要在FrontController中对应他们的关系。例如下面的简单流程：

Loginvew.xml —> action login() —>dispatch LoginEvent —>Handled by LoginCommand —>mapping LoginEvent and LoginCommand in FrontController.

在不考虑商务层代码的情况下，当用户建立然后新的动作时，就需要建立2个新的代码，修改Controller代码。

那么如何简化Cairngorm，我的方法是去掉FrontController，取而代之的是Service Façade，其框架图如下所示：

在上图中，视图不再播送如何事件，而是直接调用Service Façade。而Service Façade则直接调用商务委托层与服务器端通讯（如Remote Object等），然后商务委托处理结果并更新Model Locator，最后Model Locator通过绑定（Binding）更新视窗中的结果。

看一下被改变的代码：

ServiceFacade.as:

package com.ny.flex.cairngorm.no_fc.service
{
	import com.ny.flex.cairngorm.no_fc.vo.User;
	
	public class ServiceFacade
	{
		private static var _serviceFacade:ServiceFacade = null;
		
		public function ServiceFacade(privateClass:PrivateClass)
		{
			if(ServiceFacade._serviceFacade == null){
				ServiceFacade._serviceFacade = this;
			}
		}
		public static function getInstance():ServiceFacade {
			if(_serviceFacade == null){
				_serviceFacade = new ServiceFacade(new PrivateClass);
			}
			return _serviceFacade;
		}
		
		public function authenticate(user:User):void{
			LoginDelegate.getInstance().authenticate(user);
		}
		public function  getBuddyList():void{
			BuddyListDelegate.getInstance().getBuddyList();
		}
	}
}

class  PrivateClass{}

ServiceFacade提供了对所有商务逻辑为一体的界面，视窗的行为(Action)仅仅调用façade，例如下面代码中的Login的动作。

Loginvew.xml ：

	private function login():void{
			if(Validator.validateAll(validators).length == 0){
				var loginUser:User = new User();
				loginUser.userName=username.text;
				loginUser.password=password.text;
				serviceFacade.authenticate(loginUser);
			}   
		}

函数 serviceFacade.authenticate(loginUser)如下:

		public function authenticate(user:User):void{
			LoginDelegate.getInstance().authenticate(user);
		}

ServiceFacade使用LoginDelegate 来真正实现Business Logic：

LoginDelegate.as:

package com.ny.flex.cairngorm.no_fc.service
{
	import com.ny.flex.cairngorm.no_fc.*;
	import com.ny.flex.cairngorm.no_fc.vo.User;
	
	import mx.rpc.IResponder;
	import mx.rpc.Responder;
	import mx.rpc.events.ResultEvent;
	
	public class LoginDelegate extends BaseDelegate 
	{
		private static  var _loginDelegate:LoginDelegate = null;
		
		public function LoginDelegate(privateClass:PrivateClass){
			if(LoginDelegate._loginDelegate == null ){
				LoginDelegate._loginDelegate = this;
			}
		
		}
		
		public  static function  getInstance():LoginDelegate{
			if(_loginDelegate == null){
				_loginDelegate = new LoginDelegate(new PrivateClass);
			}
			return  _loginDelegate;
		}
		
		public function  authenticate(user:User):void{
			var responder:IResponder = new Responder(onResult_Authenticate,fault);
			var call:Object = service.authenticate(user);
			call.addResponder(responder);
		}
		
		private function onResult_Authenticate(event:ResultEvent):void{
			var authUser:User = event.result as User;
			model.loginUser = authUser;
			model.viewStackSelectedIndex = 1;
		}
	
	}
}

class PrivateClass{}

上面的authenticate(user) 实现于后台通讯并处理结果，更新Model Locator。

其他的视图和相应的处理方法与上面类似。

这个解决方案简化了Cairngorm的框架，使得代码更易于理解。而且，彻底摆脱了无味的dispatcher,frontcontroller 和command。编码效率会提高并且易于调试。

但其弱点是显而易见的：它违犯了解耦的（就是使得设计程序耦合性尽可能的降低）设计规范，使得界面上的行为（Action）和Serivce Façade产生了耦合关系。

在最后一篇中我将讨论下一个Flex 开发的热点：Mate－标签化的框架。

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

Flex 开发架构(三): MVC框架－Flex Cairngorm

houwei — Tue, 29 Jul 2008 02:24:50 +0800

作者: houwei 链接：http://houwei.javaeye.com/blog/220853 发表时间: 2008年07月29日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

有没有听说过这个奇怪的词汇：“Cairngorm”？如果你的回答是“No” && 你是Flex程序员，哪你就看看自己是不是住在一个井底。J

Cairngorm是Flex的一个MVC框架结构，名字取自苏格兰的一个山脉。（kao，如果是我建立一个自己的框架结构，我就取名叫：“天安门”。）

有关这个框架，在网络上有很多图表用来讨论。下面是我所理解的框架图表：

使用Cairngorm的第一步是建立框架结构的骨架，包括了三个对象：

Model Locater；

Service Locator；

Front Controller；

Model Locator：承载了组件之间的所有的传递的信息和数据，这是一个Bindable（可绑定的）对象。

Service Locator：定义了与数据源（Httpservice，Webservice，Remoteobject）之间通讯的界面。

Front Controller：建立播送事件（Dispatch event）和命令层（command）之间的对应关系（mapping）。

看一下相关的代码：

BuddyAppModelLocator.as:

package com.ny.flex.cairngorm.model
{
      import com.ny.flex.cairngorm.vo.User;
      
      import mx.collections.ArrayCollection;
      
      [Bindable]
      public class BuddyAppModelLocator
      {
            public var buddyList:ArrayCollection=new ArrayCollection();
            public var loginUser:User=new User();
            public var viewStackSelectedIndex :int = 0;
            
            static private var __instance:BuddyAppModelLocator=null;
            
            static public function getInstance():BuddyAppModelLocator
            {
                  if(__instance == null)
                  {
                        __instance=new BuddyAppModelLocator();
                  }
                  return __instance;
            }
      }
}

在Model Locator代码中，定义了三个public的变量，buddyList：用来存放由数据库获取的密友列表；loginUser：定义一个User类型对象；viewStackSelectedIndex：定义viewStack指向的视窗。

几乎所有的服务层返回的信息都需要在Model Locator中有一个相应的对象。

BuddyServiceLocator.mxml:

上述代码定义了程序将要调用的RemoteObject ，RemoteObject 所调用的Destination需要和remote_config.xml文件中的Destination相一致。在此，Destination的值为“flexmvcRO”。

BuddyListController.as:

package com.ny.flex.cairngorm.control
{
      import com.adobe.cairngorm.control.FrontController;
      import com.ny.flex.cairngorm.command.GetBuddyListCommand;
      import com.ny.flex.cairngorm.command.LoginCommand;
      import com.ny.flex.cairngorm.event.GetBuddyListEvent;
      import com.ny.flex.cairngorm.event.LoginEvent;
 
      public class BuddyListController extends FrontController
      {
            public function BuddyListController()
            {
                  super();
                  addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);      
                  addCommand(GetBuddyListEvent.GET_BUDDY_LIST_EVENT,
GetBuddyListCommand);
            }
            
      }
}

很显然，上述的Controller代码是事件和命令的对应处理的地方。

如何能将这些乱七八糟的东西结合在一起？其Magic的地方是在主页（Main application）上，代码如下：

BuddList_Main_Cairngorm.mxml:

现在用户可以建立视图组件，并从这些组件中播送事件:

LoginView.mxml:

每一个动作都需要建立一个相应的事件：

LoginEvent.as:

package com.ny.flex.cairngorm.event
{
      import com.adobe.cairngorm.control.CairngormEvent;
      import com.ny.flex.cairngorm.vo.User;
      
      import flash.events.Event;
 
      public class LoginEvent extends CairngormEvent
      {
            public static var LOGIN_EVENT:String = “loginEvent”
            public  var  loginUser:User ;
            
            public function LoginEvent()
            {
                  super(LOGIN_EVENT);
            }
 
            override public function clone() : Event
            {
                  return new LoginEvent();
            }
      }
}

每一个事件都要对应于一个命令：

LoginCommand.as:

package com.ny.flex.cairngorm.command
{
      import com.adobe.cairngorm.commands.ICommand;
      import com.adobe.cairngorm.control.CairngormEvent;
      import com.ny.flex.cairngorm.event.LoginEvent;
      import com.ny.flex.cairngorm.model.BuddyAppModelLocator;
      import com.ny.flex.cairngorm.service.LoginDelegate;
      import com.ny.flex.cairngorm.vo.User;
      
      import mx.controls.Alert;
      import mx.rpc.IResponder;
 
      public class LoginCommand implements ICommand, IResponder
      {
            public function LoginCommand()
            {
            }
 
            public function execute(event:CairngormEvent):void
            {
                  var loginEvent:LoginEvent = LoginEvent(event);
                  var user:User = loginEvent.loginUser;
                  var lgoinService :LoginDelegate 
=  new LoginDelegate(this);
                  lgoinService.authenticate(user);
            }
            
            public function result(event:Object):void
            {
                  var authUser:User = User(event.result);
                  BuddyAppModelLocator.getInstance().loginUser = authUser;
                  BuddyAppModelLocator.getInstance().viewStackSelectedIndex=1;
            }
            
            public function fault(info:Object):void
            {
                  Alert.show(“Login Fail Error “);
            }
            
      }
}

然后，在Front Controller（前端控制器）中build对应关系：

addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);

命令层需要完成商务逻辑，用户需要在执行方法中加入商务逻辑代码：

                  var lgoinService :LoginDelegate =  
                                            new LoginDelegate(this);
                  lgoinService.authenticate(user);

Delegate（代表）用来通过服务层（Service Locator）调用数据源：

LoginDelegate.as:

package com.ny.flex.cairngorm.service
{
      import com.adobe.cairngorm.business.ServiceLocator;
      import com.ny.flex.cairngorm.vo.User;
      
      import mx.rpc.IResponder;
      
      public class LoginDelegate
      {
            private var responder:IResponder;
            private var service:Object;
            
            public function LoginDelegate(responder :IResponder){
              this.service = 
                           ServiceLocator.getInstance()
                                        .getRemoteObject(“buddyRo”);
              this.responder = responder;
            }
            
            public function  authenticate(user:User):void{
                  var call:Object = service.authenticate(user);
                  call.addResponder(responder);
            }
      }
}

返回的结果将回复到命令层(LoginCommand.as)的结果方法中，在此方法中Model被更新，然后数据被绑定到结果视图上：

LoginCommand.as:

            public function result(event:Object):void
            {
                  var authUser:User = User(event.result);
                  BuddyAppModelLocator.getInstance().loginUser
                                                                                    = authUser;
                        BuddyAppModelLocator.getInstance().viewStackSelectedIndex=1;
            }

其它的视图工作流程同上，整个密友列表项目的结构如下图所示：

使用Cairngorm开发应用项目Layer，测试性高。并且使得程序员更专业化。

但这个框架的确很不容易学习和维护，那么有没有更好的方法简化它？

来看看：咔嚓Front Controller的Cairngorm。

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

Flex 开发架构(二): 中央管理－Flex Central Managerment

houwei — Fri, 25 Jul 2008 21:34:41 +0800

作者: houwei 链接：http://houwei.javaeye.com/blog/219666 发表时间: 2008年07月25日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

Flex Chaos-All-in-one这一节中所提到的，在大型项目中，将所有的代码放在一起并非明智之举，确切的讲：正确的方法是将商业逻辑层与UI层分离开来。

中央管理的理念是使用一个远程对象管理器来控制Flex与后端的通讯。其构建体系如下图所示

图中每一个UI组件都将调用一个服务（Service），服务类将调用中央管理器（Central Manager），中央管理器类将调用服务器端的解决方案。而图中全局对象管理器（Global Object Manager）将用来在UI之间传递数据。

现在来看看简单密友列表应用的实现。

首先是LoginView.xml

其功能的核心是：

LoginService.getInstance().login(username.text,password.text);

它的作用是有效的分离了商务逻辑层和视图组件。在此服务类程序不需支持任何状态，因此我们保持其单件模式（singleton）。

LoginService类文件如下：

import com.ny.flex.centralManagement.event.DataManagerResultEvent;
 import com.ny.flex.centralManagement.manager.GlobalObjectManager;
 import com.ny.flex.centralManagement.manager.RemoteObjectManager;
 
 public class LoginService
 {
  public var roManager:RemoteObjectManager = null; 
  public var gom:GlobalObjectManager = GlobalObjectManager.getInstance();
  private static var _instance:LoginService =null;
  
  public static function getInstance():LoginService{
   if(_instance == null){
    _instance =  new LoginService(new PrivateClass)
   }
   return _instance;
   
  }
  public function LoginService(privateclass:PrivateClass)
  {
   if(LoginService._instance == null){
    LoginService._instance =  this;
   }
  }
  public function login(userName:String,password:String):void{
 roManager = RemoteObjectManager.getRemoteObjectManager(”flexmvcRO”);
   roManager.addEventListener(”getLoginUser”,loginHandler);
   var params:Array = new Array(userName,password);
   
   roManager.makeRemoteCall(”getLoginUserName”,”getLoginUser”,params);
  }
  private function loginHandler(event:DataManagerResultEvent):void {
   var userName:String = event.result as String;
   if(userName){
    gom.loginUserName = userName;
    gom.viewStackSelectedIndex=1;
   }
  }
 }

代码中有两个特别的对象：

RemoteObjectManager

GlobalObjectManager

RemoteObjectManager是一个单件的类，用来实现中央管理所有的远程对象通讯。原始的代码来自于Jeff Tapper的博客：

Creating a Remote Object DataManager in ActionScript 3.0 for Flex 2.0

RemoteObjectManager.as:

package com.ny.flex.centralManagement.manager
{
	import com.ny.flex.centralManagement.event.DataManagerResultEvent;
	
	import flash.events.EventDispatcher;
	
	import mx.core.Application;
	import mx.resources.ResourceManager;
	import mx.rpc.AbstractOperation;
	import mx.rpc.AsyncToken;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.mxml.RemoteObject;
	
	public class RemoteObjectManager extends EventDispatcher {
		public var ro:RemoteObject;        
		private var eventName:String;         
		
		private static var instanceMap:Object = new Object();    
		     
		public function RemoteObjectManager(pri:PrivateClass,dest:String){            
			this.ro = new RemoteObject();            
			ro.destination = dest;
		}  
		       
		public static function getRemoteObjectManager(dest:String):RemoteObjectManager{
			if(RemoteObjectManager.instanceMap[dest] == null){               
				RemoteObjectManager.instanceMap[dest] = new RemoteObjectManager(new PrivateClass(),dest);          
			}          
			var dm:RemoteObjectManager= RemoteObjectManager.instanceMap[dest];          
			return dm;        
		}
		public function makeRemoteCall(methodName:String,eventName:String,args:Array=null):void{
			this.eventName = eventName;            
			var op:mx.rpc.AbstractOperation = ro[methodName];  
			ro.addEventListener("result", doResults);            
			ro.addEventListener("fault", doFault);    
			var token:AsyncToken = null;        
			if(args && args.length >0){                 
				token = op.send.apply(null,args);            
			}  
			else {
				token = op.send();            
			} 
			token.eventName = eventName;       
		}
		private function doResults(event:ResultEvent):void{             
			var e:DataManagerResultEvent = new DataManagerResultEvent(event.token.eventName, event.result); 
			this.dispatchEvent(e);        
		}         
		private function doFault(fault:FaultEvent):void{             
			this.dispatchEvent(fault);         
		} 
	       
		public override function toString():String{             
			return "RemoteObjectDataManager";         
		}    
	 }
}
 /**   PrivateClass is used to make    DataManager constructor private  */   
  class PrivateClass{
    public function PrivateClass() {} 

 }

“GlobalObjectManager”用来在UI之间传递信息，例如，我们使用ViewStack的selectedIndex来决定显示ViewStack中的哪一个视图，则使用全局对象viewStackSelectedIndex ，其代码如下面的黑体部分：

再回头看看在

LoginService 代码中的loginHandler方法，在此viewStackSelectedIndex 全局对象被更新。

LoginService

代码中的loginHandler方法，在此viewStackSelectedIndex 全局对象被更新。

 private function loginHandler(event:DataManagerResultEvent):void {
   var userName:String = event.result as String;
   if(userName){
    gom.loginUserName = userName;
    gom.viewStackSelectedIndex=1;
   }
  }

[Bindable]元标签使得其值的改变立刻生效。

BuddyList.mxml代码：

BuddyService是另一个服务类代码用来和远程对象通讯。

这是最符合本人喜好的Flex程序的框架结构。它的优点是非常的清晰，没有累赘的发送和监听事件的工作，并且代码非常容易维护。遗憾的是，在此还没有获得足够的理论支持这一框架理论。

再来看看MVC框架的代表：MVC-Cairngorm。

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐