Flex系列-6-调整Cairngorm2

Flex系列--6--整合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. 注意事项：
   以下内容基于“?声明式事务?”中最后形成的 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 类
   • 在继续之前，还是回顾一下 Cairngorm 2 的原理吧（总觉得 Cairngorm 2? 概述中的图示有点乱??）
     记住一点： Cairngorm 2 是事件驱动的。
     
     所以要显示存储在数据库中的职员信息需经过以下过程：?

     ?

     • 触发一个 Event；
     • 控制器依据 Event ID 找到对应的 Command；
     • Command 调用 Delegate（Delegate 又调用 Server 端对象），并把返回的职员信息存储到 Model 中的某个属性；
     • 把 Mxml 文件中的 DateGrid 组件与上述 Model 中的属性绑定。因为绑定是动态的，所以一旦属性值发生变化 DateGrid 内容会立即体现。
     • 在 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>

     • 在 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);        }    }}

     • 在 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;        }    }}

     • 在 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);        }    }}

     • 在 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.");        }    }}

     • 在 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;        }    }}

     • 到目前你可能比较疑惑：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);        }    }}

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

       ?

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

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

       ?

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

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

       ?

       import model.EmployeesModelLocator;

       把以下内容

       dataProvider="{employeeList}"

       替换为

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

     • 运行