Flex4系列教程之十 – 整合Cairngorm2

Cairngorm 2 概述

1. Cairngorm 2 是什么？
   Cairngorm 2 是一个简单规范的 MVC 模式框架。
2. Cairngorm 2 的两个版本
   Cairngorm 2 分为“普通版“和“企业版“，后者依赖于 LiveCycle Data Services ，所以我们只探讨普通版（因为我们用的是 BlazeDS

   

   ）。
3. Cairngorm 2 原理图示
   

   

4. Cairngorm 2 教程
   • Introduction to Cairngorm2
   • Developing Flex RIAs with Cairngorm microarchitecture

?

为什么不整合 Cairngorm 3 ？
Cairngorm 3 已经不是 Cairngorm 2 的升级。它由跨框架的“指导原则”、“工具”和“库”三部分组成，目的在于帮助开发者应用 Flex 和第三方框架。

?

开始整合

1. 注意事项：
   以下内容基于“Flex4系列教程之九”中最后形成的 sampleApp 项目。
2. 准备所需组件
   下载 Cairngorm 2 普通版，将解压后的 Cairngorm.swc 拷贝到 flex_libs 文件夹。
3. 在 flex_src 下创建以下文件夹
   • business ：放置 Delegate 类和 ServiceLocator 文件
   • command ：放置 Command 类
   • event ：放置 Event 类
   • vo ：放置 VO 类
   • util ：放置工具类
   • model ：放置 Model 类
   • view ：放置视图文件（即 mxml 文件）
   • controller：放置 Controller 类
4. 在继续之前，还是回顾一下 Cairngorm 2 的原理吧（总觉得 Cairngorm 2 概述中的图示有点乱

   

   ）
   记住一点： Cairngorm 2 是事件驱动的。
   
   所以要显示存储在数据库中的职员信息需经过以下过程：
   • 触发一个 Event；
   • 控制器依据 Event ID 找到对应的 Command；
   • Command 调用 Delegate（Delegate 又调用 Server 端对象），并把返回的职员信息存储到 Model 中的某个属性；
   • 把 Mxml 文件中的 DateGrid 组件与上述 Model 中的属性绑定。因为绑定是动态的，所以一旦属性值发生变化 DateGrid 内容会立即体现。
5. 在 business 下创建 Services.mxml，以统一管理远程对象
   

   <?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="employeeServiceRO" destination="employeeServiceDest" />
   
   </cairngorm:ServiceLocator>

6. 在 business 下创建 LoadEmployeesDelegate 代理，调用远程对象
   

   package business
   {
       import com.adobe.cairngorm.business.ServiceLocator;
   
       import mx.rpc.AsyncToken;
       import mx.rpc.IResponder;
   
       public class LoadEmployeesDelegate
       {
           private var responder:IResponder;
           private var service:Object;
   
           public function LoadEmployeesDelegate(responder:IResponder) {
               this.responder = responder;
               this.service = ServiceLocator.getInstance().getRemoteObject("employeeServiceRO");
           }
   
           public function load():void {
               var token:AsyncToken = service.getList();
               token.addResponder(responder);
           }
       }
   }

7. 在 model 下创建 EmployeesModelLocator（单例模式），用于存储返回的雇员信息
   

   package model
   {
       import com.adobe.cairngorm.model.IModelLocator;
       import com.adobe.cairngorm.CairngormMessageCodes;
       import com.adobe.cairngorm.CairngormError;
   
       import mx.collections.ArrayCollection;
   
       [Bindable]
       public class EmployeesModelLocator implements IModelLocator
       {
           public var employeesList:ArrayCollection;
   
           private static var _instance:EmployeesModelLocator;
   
           public function EmployeesModelLocator() {
               if (_instance != null ) {
                   throw new CairngormError(CairngormMessageCodes.SINGLETON_EXCEPTION,"EmployeesModelLocator");
               }
   
               _instance = this;
           }
   
           public static function getInstance():EmployeesModelLocator {
               if (_instance == null) {
                   _instance = new EmployeesModelLocator();
               }
   
               return _instance;
           }
       }
   }

8. 在 event 下创建 LoadEmployeesEvent 事件
   

   package event
   {
       import com.adobe.cairngorm.control.CairngormEvent;
   
       public class LoadEmployeesEvent extends CairngormEvent
       {
           static public var EVENT_ID:String = "loadEmployees";
   
           public function LoadEmployeesEvent() {
               super(EVENT_ID);
           }
       }
   }

9. 在 command 下创建 BaseCommand，作为所有 Commmand 类的基类，以便统一处理 fault 事件。
   

   package command
   {
       import com.adobe.cairngorm.commands.ICommand;
       import com.adobe.cairngorm.control.CairngormEvent;
   
       import mx.rpc.IResponder;
       import mx.controls.Alert;
   
       public class BaseCommand implements ICommand,IResponder
       {
           public function execute(event:CairngormEvent):void {
           }
   
           public function result(data:Object):void {
           }
   
           public function fault(info:Object):void {
               Alert.show("We are sorry,a system error has occurred.
                           Please try again later.");
           }
       }
   }

10. 在 command 下创建 BaseCommand 的子类 LoadEmployeesCommand。调用 LoadEmployeesDelegate，并把取得的雇员信息保存到 EmployeesModelLocator。
    

    package command
    {
        import com.adobe.cairngorm.control.CairngormEvent;
    
        import business.LoadEmployeesDelegate;
        import model.EmployeesModelLocator;
    
        public class LoadEmployeesCommand extends BaseCommand
        {
            public override function execute(event:CairngormEvent):void {
                var delegate:LoadEmployeesDelegate = new LoadEmployeesDelegate(this);
                delegate.load();
            }
    
            public override function result(data:Object):void {
                var employeesModelLocator:EmployeesModelLocator = EmployeesModelLocator.getInstance();
                employeesModelLocator.employeesList = data.result;
            }
        }
    }

11. 到目前你可能比较疑惑：LoadEmployeesEvent 和 LoadEmployeesCommand 是怎样关联上的呢？这就需要控制器了，在 control 下创建 FSController。
    

    package controller
    {
        import com.adobe.cairngorm.control.FrontController;
    
        import event.LoadEmployeesEvent;
        import command.LoadEmployeesCommand;
    
        public class FSController extends FrontController
        {
            public function FSController() {
                addCommand(LoadEmployeesEvent.EVENT_ID,LoadEmployeesCommand);
            }
        }
    }

12. 是不是觉得都 OK 了？呵呵，别高兴的太早。我们还需要把 Services.mxml 和 FSController.as 引入到主应用文件（即 <s:Application> 标签所在的文件 ）。
    把 sampleApp.mxml 文件的 29~30 行替换为以下内容：

    <rds:Services xmlns:rds="business.*"/>
    <router:FSController xmlns:router="controller.*"/>

13. 触发 LoadEmployeesEvent 事件
    替换 sampleApp.mxml 的 8~25 行：

    import event.LoadEmployeesEvent;
    
     private function init():void {
         var loadEmployeesEvent:LoadEmployeesEvent = new LoadEmployeesEvent();
         loadEmployeesEvent.dispatch();
     }

14. 终于到最后一步了：绑定数据源
    引入 EmployeesModelLocator

    import model.EmployeesModelLocator;

    把以下内容

    dataProvider="{employeeList}"

    替换为

    dataProvider="{EmployeesModelLocator.getInstance().employeesList}"

15. 运行

?

附件：