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

发架构(三): MVC框架－Flex Cairngorm关键字: flex cairngorm

 

 

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

 

cairngorm 的官方网站:
http://www.cairngormdocs.org/现在也提供了非常详细的文档.可以去下载一些例子来研究一些,并找下中文的文档来读.
cairngorm是一个企业级应用.用在FLEX中会更多的使用这个MVC框架 .原来cairngorm的文档很少,最近才有比较完整的文档,还有中文的文档.主要包含以下几个部分:
1. Business:业务
2. Command:命令
3. Control:控制
4. Model:数据
5. View:界面
6. VO:值对象

 

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. 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. }  

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:

Xml代码

1. <?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>  

<?xml version=”1.0″ encoding=”utf-8″?>
<cairngorm:ServiceLocator xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:cairngorm=”http://www.adobe.com/2006/cairngorm“>
<mx:RemoteObject id=”buddyRo“  destination=”flexmvcRO” >
</mx:RemoteObject>
</cairngorm:ServiceLocator>

 

 

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

BuddyListController.as:

 

 

Xml代码

1. 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. }  

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:

Xml代码

1. <?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>  

<?xml version=”1.0″ encoding=”utf-8″?>
<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%“>
<mx:Script>
<![CDATA[
import com.ny.flex.cairngorm.model.BuddyAppModelLocator;
[Bindable]
public var myModel:BuddyAppModelLocator = BuddyAppModelLocator.getInstance();
]]>
</mx:Script>
<service:BuddyServiceLocator id=”myservice“/>
<controller:BuddyListController id=”myController“/>
<mx:HBox  horizontalAlign=”center” verticalAlign=”top“  width=”100%” height=”100%” y=”0” x=”0“>
<mx:ViewStack id=”viewStack“  resizeToContent=”true” selectedIndex=”{myModel.viewStackSelectedIndex}” >
<views:LoginView  />
<views:BuddyListView/>
</mx:ViewStack>
</mx:HBox>
</mx:Application>

 

 

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

 

LoginView.mxml:

Xml代码

1. <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>  

      <![CDATA[
import com.ny.flex.cairngorm.event.LoginEvent;
import com.ny.flex.cairngorm.vo.User;
import mx.validators.Validator;
private function login():void{
if(Validator.validateAll(validators).length == 0){
var loginUser:User = new User();
loginUser.userName=username.text;
loginUser.password=password.text;
var loginEvent:LoginEvent = new LoginEvent();
loginEvent.loginUser = loginUser;
loginEvent.dispatch();
}
}
]]>
</mx:Script>
<!–  Validators–>
<mx:Array id=”validators“>
<mx:StringValidator  id=”userNameValidator” source=”{username}“  property=”text“  required=”true“/>
<mx:StringValidator  id=”passwordValidator” source=”{password}“  property=”text” required=”true” />
</mx:Array>
<mx:Form id=”loginForm” x=”0” y=”0“>
<mx:FormItem label=”Username:” >
<mx:TextInput id=”username” />
</mx:FormItem>
<mx:FormItem label=”Password:” >
<mx:TextInput id=”password” displayAsPassword=”true” />
</mx:FormItem>
<mx:FormItem direction=”horizontal” verticalGap=”15” paddingTop=”5” width=”170“>
<mx:Button id=”loginBtn” label=”Login” click=”login()”/>
</mx:FormItem>
</mx:Form>
</mx:Panel>

 

 

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

 

 

 

LoginEvent.as:

Xml代码

1. <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>  

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:

Xml代码

1. 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. }  

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);

 

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

 

Xml代码

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

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

 

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

 

LoginDelegate.as:

Xml代码

1. 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.    

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:

Xml代码

1. 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. }  

            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。

 

 

 

 

 

 

 

 

• 02:24
• 浏览 (1126)
• 评论 (4)
• 分类: Flex
• 相关推荐

评论

houwei 2008-08-28   回复

cairngorm的命名空间  是对的， 不知道你需要知道啥？

kenees 2008-08-19   回复

麻烦解释一下下面这部分
<?xml version=”1.0″ encoding=”utf-8″?>
<cairngorm:ServiceLocator xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:cairngorm=”http://www.adobe.com/2006/cairngorm“>
      <mx:RemoteObject id=”buddyRo“  destination=”flexmvcRO” >
           
      </mx:RemoteObject>
</cairngorm:ServiceLocator>


这个cairngorm的命名空间对么？

tj19832 2008-08-05   回复

现在的内存这么便宜，还买不起内存的人那里，能获取的商业价值也不多。

这个架构确实有点复杂

xiaoY 2008-07-29   回复

沙发 ？
今天刚写的啊。呵呵。 我们组里现在也在研究这个。
你说的学习代价高。 我不知道到底有多高。
倒是简化这个词听的很合我意。
FLEX提倡富客户端， 这个框架在客户端做的MVC自成体系， 很符合这种思想。
不过有些小的模块，功能不复杂的， 一个mxml文件写完比劳师动众用个框架还要方便些。加上框架不知道会不会对性能做成影响
理论上不会，因为编译到swf的时候，link后也不会大多少。
不过总感觉前台，特别是Flex，要尽量简化一下，
现在FLEX的性能已经让很多没钱买内存的人痛苦了