程序博客网 > 如何做软件开发

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

来源：互联网 发布：如何做软件开发 编辑：程序博客网 时间：2024/05/18 03:47

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

原创作者: houwei   阅读:1455次   评论:0条   更新时间:2009-02-12     收藏

有没有听说过这个奇怪的词汇：“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:

Xml代码 复制代码
  1. <EM>package com.ny.flex.cairngorm.model   
  2. {   
  3.       import com.ny.flex.cairngorm.vo.User;   
  4.          
  5.       import mx.collections.ArrayCollection;   
  6.          
  7.       [Bindable]   
  8.       public class BuddyAppModelLocator   
  9.       {   
  10.             public var buddyList:ArrayCollection=new ArrayCollection();   
  11.             public var loginUser:User=new User();   
  12.             public var viewStackSelectedIndex :int = 0;   
  13.                
  14.             static private var __instance:BuddyAppModelLocator=null;   
  15.                
  16.             static public function getInstance():BuddyAppModelLocator   
  17.             {   
  18.                   if(__instance == null)   
  19.                   {   
  20.                         __instance=new BuddyAppModelLocator();   
  21.                   }   
  22.                   return __instance;   
  23.             }   
  24.       }   
  25. }   
  26. </EM>  



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

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



BuddyServiceLocator.mxml:

Xml代码 复制代码
  1. <EM><EM><?xml version=”1.0″ encoding=”utf-8″?>  
  2. <cairngorm:ServiceLocator xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:cairngorm=”http://www.adobe.com/2006/cairngorm“>  
  3.       <mx:RemoteObject id=”buddyRo“  destination=”flexmvcRO” >  
  4.                
  5.       </mx:RemoteObject>  
  6. </cairngorm:ServiceLocator>  
  7. </EM></EM>  


 

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

 

 

BuddyListController.as:


 

Xml代码 复制代码
  1. <EM><EM><STRONG>package com.ny.flex.cairngorm.control   
  2. {   
  3.       import com.adobe.cairngorm.control.FrontController;   
  4.       import com.ny.flex.cairngorm.command.GetBuddyListCommand;   
  5.       import com.ny.flex.cairngorm.command.LoginCommand;   
  6.       import com.ny.flex.cairngorm.event.GetBuddyListEvent;   
  7.       import com.ny.flex.cairngorm.event.LoginEvent;   
  8.     
  9.       public class BuddyListController extends FrontController   
  10.       {   
  11.             public function BuddyListController()   
  12.             {   
  13.                   super();   
  14.                   addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);         
  15.                   addCommand(GetBuddyListEvent.GET_BUDDY_LIST_EVENT,   
  16. GetBuddyListCommand);   
  17.             }   
  18.                
  19.       }   
  20. }   
  21. </STRONG></EM></EM>  


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

 

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

 

BuddList_Main_Cairngorm.mxml:

Xml代码 复制代码
  1. <EM><EM><STRONG><?xml version=”1.0″ encoding=”utf-8″?>  
  2. <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“  xmlns:service=”com.ny.flex.cairngorm.service.*“  xmlns:controller=”com.ny.flex.cairngorm.control.*” xmlns:views=”com.ny.flex.cairngorm.views.*” layout=”absolute“  width=”100%” height=”100%“>  
  3. <mx:Script>  
  4.       <![CDATA[  
  5.             import com.ny.flex.cairngorm.model.BuddyAppModelLocator;  
  6.       [Bindable]  
  7.       public var myModel:BuddyAppModelLocator = BuddyAppModelLocator.getInstance();  
  8.       ]]>  
  9. </mx:Script>  
  10.     
  11.       <service:BuddyServiceLocator id=”myservice“/>  
  12.       <controller:BuddyListController id=”myController“/>  
  13.     
  14.     <mx:HBox  horizontalAlign=”center” verticalAlign=”top“  width=”100%” height=”100%” y=”0” x=”0“>  
  15.     <mx:ViewStack id=”viewStack“  resizeToContent=”true” selectedIndex=”{myModel.viewStackSelectedIndex}” >  
  16.         <views:LoginView  />  
  17.         <views:BuddyListView/>  
  18.     </mx:ViewStack>  
  19.     </mx:HBox>  
  20. </mx:Application>  
  21. </STRONG></EM></EM>  



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


LoginView.mxml:

 

Xml代码 复制代码
  1. <EM><EM><STRONG><EM>      <![CDATA[  
  2.             import com.ny.flex.cairngorm.event.LoginEvent;  
  3.             import com.ny.flex.cairngorm.vo.User;  
  4.             import mx.validators.Validator;  
  5.             private function login():void{  
  6.                   if(Validator.validateAll(validators).length == 0){  
  7.                         var loginUser:User = new User();  
  8.                         loginUser.userName=username.text;  
  9.                         loginUser.password=password.text;  
  10.                         var loginEvent:LoginEvent = new LoginEvent();  
  11.                         loginEvent.loginUser = loginUser;  
  12.                         loginEvent.dispatch();  
  13.                   }     
  14.             }  
  15.       ]]>  
  16. </mx:Script>  
  17.     
  18.  <!–  Validators–>  
  19.  <mx:Array id=”validators“>  
  20.     <mx:StringValidator  id=”userNameValidator” source=”{username}“  property=”text“  required=”true“/>  
  21.     <mx:StringValidator  id=”passwordValidator” source=”{password}“  property=”text” required=”true” />  
  22.  </mx:Array>       
  23.     
  24.     
  25. <mx:Form id=”loginForm” x=”0” y=”0“>  
  26.           <mx:FormItem label=”Username:” >  
  27.                <mx:TextInput id=”username” />  
  28.            </mx:FormItem>  
  29.            <mx:FormItem label=”Password:” >  
  30.                <mx:TextInput id=”password” displayAsPassword=”true” />  
  31.            </mx:FormItem>  
  32.            <mx:FormItem direction=”horizontal” verticalGap=”15” paddingTop=”5” width=”170“>  
  33.                <mx:Button id=”loginBtn” label=”Login” click=”login()”/>  
  34.            </mx:FormItem>  
  35.     </mx:Form>  
  36.          
  37. </mx:Panel>  
  38. </EM></STRONG></EM></EM>  

 


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


 




LoginEvent.as:

 

Xml代码 复制代码
  1. <EM><EM><STRONG><EM>package com.ny.flex.cairngorm.event   
  2. {   
  3.       import com.adobe.cairngorm.control.CairngormEvent;   
  4.       import com.ny.flex.cairngorm.vo.User;   
  5.          
  6.       import flash.events.Event;   
  7.     
  8.       public class LoginEvent extends CairngormEvent   
  9.       {   
  10.             public static var LOGIN_EVENT:String = “loginEvent”   
  11.             public  var  loginUser:User ;   
  12.                
  13.             public function LoginEvent()   
  14.             {   
  15.                   super(LOGIN_EVENT);   
  16.             }   
  17.     
  18.             override public function clone() : Event   
  19.             {   
  20.                   return new LoginEvent();   
  21.             }   
  22.       }   
  23. }   
  24. </EM></STRONG></EM></EM>  

 


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

LoginCommand.as:

 

 

Xml代码 复制代码
  1. <EM><EM><STRONG>package com.ny.flex.cairngorm.command   
  2. {   
  3.       import com.adobe.cairngorm.commands.ICommand;   
  4.       import com.adobe.cairngorm.control.CairngormEvent;   
  5.       import com.ny.flex.cairngorm.event.LoginEvent;   
  6.       import com.ny.flex.cairngorm.model.BuddyAppModelLocator;   
  7.       import com.ny.flex.cairngorm.service.LoginDelegate;   
  8.       import com.ny.flex.cairngorm.vo.User;   
  9.          
  10.       import mx.controls.Alert;   
  11.       import mx.rpc.IResponder;   
  12.     
  13.       public class LoginCommand implements ICommand, IResponder   
  14.       {   
  15.             public function LoginCommand()   
  16.             {   
  17.             }   
  18.     
  19.             public function execute(event:CairngormEvent):void   
  20.             {   
  21.                   var loginEvent:LoginEvent = LoginEvent(event);   
  22.                   var user:User = loginEvent.loginUser;   
  23.                   var lgoinService :LoginDelegate    
  24. =  new LoginDelegate(this);   
  25.                   lgoinService.authenticate(user);   
  26.             }   
  27.                
  28.             public function result(event:Object):void   
  29.             {   
  30.                   var authUser:User = User(event.result);   
  31.                   BuddyAppModelLocator.getInstance().loginUser = authUser;   
  32.                   BuddyAppModelLocator.getInstance().viewStackSelectedIndex=1;   
  33.             }   
  34.                
  35.             public function fault(info:Object):void   
  36.             {   
  37.                   Alert.show(“Login Fail Error “);   
  38.             }   
  39.                
  40.       }   
  41. }   
  42. </STRONG></EM></EM>  




 




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

 

 addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);

 

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

 

Xml代码 复制代码
  1. <EM><EM><STRONG>                  var lgoinService :LoginDelegate =     
  2.                                             new LoginDelegate(this);   
  3.                   lgoinService.authenticate(user);   
  4. </STRONG></EM></EM>  


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

 

LoginDelegate.as:

Xml代码 复制代码
  1. <EM><EM><STRONG><EM>package com.ny.flex.cairngorm.service   
  2. {   
  3.       import com.adobe.cairngorm.business.ServiceLocator;   
  4.       import com.ny.flex.cairngorm.vo.User;   
  5.          
  6.       import mx.rpc.IResponder;   
  7.          
  8.       public class LoginDelegate   
  9.       {   
  10.             private var responder:IResponder;   
  11.             private var service:Object;   
  12.                
  13.             public function LoginDelegate(responder :IResponder){   
  14.               this.service =    
  15.                            ServiceLocator.getInstance()   
  16.                                         .getRemoteObject(“buddyRo”);   
  17.               this.responder = responder;   
  18.             }   
  19.                
  20.             public function  authenticate(user:User):void{   
  21.                   var call:Object = service.authenticate(user);   
  22.                   call.addResponder(responder);   
  23.             }   
  24.       }   
  25. }   
  26.     
  27. </EM></STRONG></EM></EM>  

 



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

LoginCommand.as:

Xml代码 复制代码
  1. <EM><EM><STRONG>            public function result(event:Object):void   
  2.             {   
  3.                   var authUser:User = User(event.result);   
  4.                   BuddyAppModelLocator.getInstance().loginUser  
  5.                                                                                     = authUser;   
  6.                         BuddyAppModelLocator.getInstance().viewStackSelectedIndex=1;   
  7.             }   
  8. </STRONG></EM></EM>  


 



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

 

 

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

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

 

如何做软件开发 如何做软件开发
原创粉丝点击
热门IT博客
打开移动数据上不了网打开移动数据上不了网
北京久其软件北京久其软件
思博圈 数据解析失败
神奇软件
动画ppt软件
网络运营推广公司
淘宝公益宝贝什么意思
假身份证淘宝怎么搜
17173抢激活码软件
全职在家美工平台
垃圾桶 知乎
淘宝历年logo
淘宝快速刷钻
淘宝王子 删除中差评
机械加工erp软件
linux ntpclient
信永中和最新工资算法
linux磁盘配额
网络管理队伍状况
小米手环2 详细数据
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 晚上喝姜汤红糖水好吗 姜蜂蜜水的功效与作用 生姜水怎么洗头 生姜水加蜂蜜 晚上可以喝生姜水吗 生姜蜂蜜水的做法 喝生姜红糖水会发胖吗 老姜皇姜汁防脱育发洗发水 姜片蜂蜜水 姜蒜水 榨生姜汁 生姜红糖水功效 哪种生姜洗发水好 生姜水洗发 生姜汁怎么做 喝蜂蜜生姜水有什么好处 晚上能喝生姜水吗 含生姜的洗发水有哪些 生姜红糖水止咳吗 生姜水可以洗头吗 姜汁红糖水的功效 姜煮水 姜片水 蜂蜜生姜水的作用 红枣生姜桂圆红糖水 蜂蜜白醋水 空腹能喝生姜水吗 生姜王洗发水 月经期能喝生姜红糖水吗 生姜洗发水好吗 红枣生姜水 老姜汁洗发水 生姜枸杞水的功效 红枣生姜红糖水功效 月经期间喝姜汁红糖水好吗 生姜水可以洗脸吗 生姜水晚上能喝吗 喝生姜红糖水能减肥吗 喝生姜水好吗 红茶生姜水的功效 蜂花生姜洗发水

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里