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

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。