http://www.iteye.com/topic/220853
有没有听说过这个奇怪的词汇:“Cairngorm”?如果你的回答是“No” && 你是Flex程序员,哪你就看看自己是不是住在一个井底。J
Cairngorm是Flex的一个MVC框架结构,名字取自苏格兰的一个山脉。(kao,如果是我建立一个自己的框架结构,我就取名叫:“xxx”。)
有关这个框架,在网络上有很多图表用来讨论。下面是我所理解的框架图表:
使用Cairngorm的第一步是建立框架结构的骨架,包括了三个对象:
Model Locater;
Service Locator;
Front Controller;
Model Locator:承载了组件之间的所有的传递的信息和数据,这是一个Bindable(可绑定的)对象。
Service Locator:定义了与数据源(Httpservice,Webservice,Remoteobject)之间通讯的界面。
Front Controller:建立播送事件(Dispatch event)和命令层(command)之间的对应关系(mapping)。
看一下相关的代码:
BuddyAppModelLocator.as:
- <em>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;
- }
- }
- }
- </em>
在Model Locator代码中,定义了三个public的变量,buddyList:用来存放由数据库获取的密友列表;loginUser:定义一个User类型对象;viewStackSelectedIndex:定义viewStack指向的视窗。
几乎所有的服务层返回的信息都需要在Model Locator中有一个相应的对象。
BuddyServiceLocator.mxml:
- <em><em><?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>
- </em></em>
上述代码定义了程序将要调用的RemoteObject ,RemoteObject 所调用的Destination需要和remote_config.xml文件中的Destination相一致。在此,Destination的值为“flexmvcRO”。
BuddyListController.as:
- <em><em><strong>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);
- }
- }
- }
- </strong></em></em>
很显然,上述的Controller代码是事件和命令的对应处理的地方。
如何能将这些乱七八糟的东西结合在一起?其Magic的地方是在主页(Main application)上,代码如下:
BuddList_Main_Cairngorm.mxml:
- <em><em><strong><?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>
- </strong></em></em>
现在用户可以建立视图组件,并从这些组件中播送事件:
LoginView.mxml:
- <em><em><strong><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>
- </em></strong></em></em>
每一个动作都需要建立一个相应的事件:
LoginEvent.as:
- <em><em><strong><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();
- }
- }
- }
- </em></strong></em></em>
每一个事件都 要对应于一个命令:
LoginCommand.as:
- <em><em><strong>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 “);
- }
- }
- }
- </strong></em></em>
然后,在Front Controller(前端控制器)中build对应关系:
addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);
命令层需要完成商务逻辑,用户需要在执行方法中加入商务逻辑代码:
- <em><em><strong> var lgoinService :LoginDelegate =
- new LoginDelegate(this);
- lgoinService.authenticate(user);
- </strong></em></em>
Delegate(代表)用来通过服务层(Service Locator)调用数据源:
LoginDelegate.as:
- <em><em><strong><em>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);
- }
- }
- }
- </em></strong></em></em>
返回的结果将回复到命令层(LoginCommand.as)的结果方法中,在此方法中Model被更新,然后数据被绑定到结果视图上:
LoginCommand.as:
- <em><em><strong> public function result(event:Object):void
- {
- var authUser:User = User(event.result);
- BuddyAppModelLocator.getInstance().loginUser
- = authUser;
- BuddyAppModelLocator.getInstance().viewStackSelectedIndex=1;
- }
- </strong></em></em>
其它的视图工作流程同上,整个密友列表项目的结构如下图所示:
使用Cairngorm开发应用项目Layer,测试性高。并且使得程序员更专业化。
但这个框架的确很不容易学习和维护,那么有没有更好的方法简化它?
来看看:咔嚓Front Controller的Cairngorm。