基于 Cairngorm MVC 框架的 Flex 程序设计与开发

翟 峰, 开发工程师, IBM
吴 镝, IBM 实习生, IBM
2010 年 8 月 16 日

随着富互联网应用程序 (Rich Internet Application) 的发展，Flex 也得到了迅速的发展，然后随着 Flex 应用的项目的增大，传统的 Flex 开发已经显得层次不清，维护困难，在这样背景下，基于 Flex 的 MVC 框架 Cairngorm 应运而生。本文将介绍系统的讲解 Cairngorm，通过本教程的学习，您可以全面掌握使用 Cairngorm 框架进行 Web 开发。

[b][size=medium]Cairngorm 框架简介[/size][/b]
Cairngorm 是一种 MVC 框架，它可以帮助开发者很好的组织代码，分层，从而使得代码更加清晰易懂，可以使设计者，UI 组件开发者，数据服务开发者并行工作，从而提高开发效率。Cairngorm 由五大组件构成，分别作为存放数据的仓库 (ModelLocator)，存放服务的仓库 (ServiceLocator)，处理业务逻辑的命令 (Command)，自定义的用于触发命令执行的事件 (Event)，用于把事件映射到命令的前端控制器 (FrontController)。它应用了代理模式，命令模式，观察者和单例等几种设计模式。

[b][size=medium]Cairngorm 详解[/size][/b]
ModelLocator: 用于保存应用程序的数据，与 HttpSession 类似，区别主要在于数据是保存客户端，实现时将 ModelLocator 实现为单例，所有的应用数据都存储在唯一的一个 ModelLocator 对象中。
CairngormEvent: 这个类由 Cairngorm 框架提供，位于包 com.adobe.cairngorm.control，所有的自定义的事件类都必须继承 CairngormEvent，在自定义事件类中定义 VO 的引用，可以通过它来存储从 View 层传递过来的 VO。
ICommand: 命令接口，位于包 com.adobe.cairngorm.commands，每个命令类需要实现 ICommand 接口，命令类用于处理业务逻辑，通过实现其 execute 方法来实现业务逻辑。execute 方法以事件作为参数，通过传入的事件中包含的详细信息来进行相应的处理。
FrontController: 前端控制器，位于包 com.adobe.cairngorm.control，自定义的前端控制器必须继承 FrontController，它主要用于完成 CairngormEvent 和 ICommand 之间的映射。
CairngormEventDispatcher:CairngormEvent 的分发器，位于包 com.adobe.cairngorm.control
Delegate: 服务代理，一般定义一个 Delegate 类，持有 ServiceLocator 的引用，Delegate 类是唯一的了解 Service 有关的类。

[b][size=medium]系统处理流程[/size][/b]
[align=center][b][size=small]图 1. 使用 Cairngorm 后系统处理流程[/size][/b]
[img]https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/image003.jpg[/img][/align]
在基于 Cairngorm 的应用程序中，应用程序的数据都放在一个仓库中，这个仓库就是 ModelLocator，整个应用程序只生成维护一个 ModelLocator 的实例，在需要数据的组件中引用这个实例。比如视图需要数据进行渲染，那么视图就维护 ModelLocator 实例的引用，在视图中触发事件后，事件通过前端控制器映射为一个对应的命令，然后命令通过调用服务代理，执行相应的逻辑，命令通过更新自身维护的 ModelLocator 的引用，因为 ModelLocator 只有一个，这样就相当于更新了视图。

[b][size=medium]安装配置开发环境[/size][/b]
开始前先让我们来搭建我们的开发环境：
[url=http://java.sun.com/javase/downloads/index.jsp]下载并安装JDK[/url]( 本文使用版本为 Sun JDK 6)
[url=http://www.eclipse.org/ganymede/]下载并解压Eclipse[/url]( 本文使用版本为 Eclipse Ganymede J2EE SR2 版本 )
[url=http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3]下载并安装FB3_WWEJ_Plugin.exe[/url](Flex Builder 4 plug-in for eclipse)
[url=http://tomcat.apache.org/download-60.cgi]下载并安装 Tomcat 6.x[/url]
安装 FB3_WWEJ_Plugin.exe 过程中选中 eclipse 安装目录。

[b][size=medium]一个入门的例子[/size][/b]
前面我们讲解了 Cairngorm 的基本概念和一些主要的角色和类，下面我用一个简单的员工管理系统的例子来进一步的理解开发过程。
下载并解压 [url=http://opensource.adobe.com/wiki/display/cairngorm/Downloads]Cairngorm 2.2[/url]
解压出来就是一个 Cairngorm.swc 文件
新建 Flex Project
[align=center][b][size=small]图 2. 新建项目[/size][/b]
[img]https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/image005.jpg[/img][/align]
Next 配置服务器
[align=center][b][size=small]图 3. 配置服务器[/size][/b]
[img]https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/image007.jpg[/img][/align]
点击 Finish.
将 Cairngorm.swc 拷贝到项目的 flex_libs 目录下。
在 flex_src 目录下建好包结构
[align=center][b][size=small]图 4. 建立包结构[/size][/b]
[img]https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/image008.jpg[/img][/align]
每个包中存放的内容一目了然
定义视图
1. 在 views 包中新建一个 MXML Component, 基于 Panel，取名为 PeopleInfo.mxml，如图所示 :
[align=center][b][size=small]图 5. 新建 Panel[/size][/b]
[img]https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/image010.jpg[/img][/align]
2. 在里面添加一个 DataGrid, 还有一些文本框和按钮 , 如图 6 所示：
[align=center][b][size=small]图 6. 视图[/size][/b]
[img]https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/image012.jpg[/img][/align]
三、这里我们希望当 Panel 加载完成后，从服务器读取 xml 文件，将员工信息给读入 DataGrid 中，这里，为了简单明了，仅仅定义了员工 id 和 name 属性。所以在 Panel 中添加属性 creationComplete="LoadPersons();"，然后添加<mx:Script>标签，并添加LoadPersons()方法，原型如下所示：

publicfunctionLoadPersons():void
 { 
 }

定义 ModelLocator
视图中的 DataGrid 是需要数据进行渲染的，下面定义数据的仓库 ModelLocator，该类维护一个 ArrayCollection personInfos 的引用，它就是应用程序所需的数据。
新建一个 Actionscript class，取名为 ModelLocator.as，代码如下：

 package model 
 { 
		 import mx.collections.ArrayCollection; 
		 [Bindable] 
		 public class ModelLocator 
		 { 
			 private static var __instance:ModelLocator=null; 
 //以下这个 ArrayCollection用于填充 DataGridpublic var personInfos:ArrayCollection = new ArrayCollection();
			 public static  function getInstance():ModelLocator 
			 { 
				 if(__instance == null) 
				 { 
					 __instance=new ModelLocator(); 
				 } 
 return __instance;
			 } 
		 } 
 }

ArrayCollection 对象 personInfos 用于存储从 xml 读出的员工信息。
定义事件
在 event 包中新建一个 ActionScript class，取名为 LoadPersonsEvent.as，该事件必须继承于 CairngormEvent，通过 CairngormEventDispatcher 来分发 ,EVENT_ID用来唯一的标识一个事件，代码如下：

 package event 
 { 
		 import com.adobe.cairngorm.control.CairngormEvent; 

 public class LoadPersonsEvent extends CairngormEvent
		 { 
 //事件名称
			 public static var EVENT_ID:String = "LoadPersons"; 
			 public function LoadPersonsEvent() 
			 { 
				 super(EVENT_ID); 
			 } 
		 } 
 }

在页面中注册并分发事件
在 PeopleInfo.mxml 的 <mx:Panel> 下面添加如下代码：

 <mx:Metadata> 
		 [Event(name="LoadPersons",type="event.LoadPersonsEvent")] 
 </mx:Metadata>

type 属性就是类的完整路径。
在 LoadPersons() 方法中添加如下代码：

 var e:LoadPersonsEvent = new LoadPersonsEvent(); 
 e.dispatch();

当事件分发后，通过 FrontController 将事件映射为命令，然后命令更新 ModelLocator 中的数据的时候，从而引起 DataGrid 的变化，从中可以看出，需要在页面中维护一个 ModelLocator 单例的引用 , 代码如下：
然后在 <mx:Script> 中添加以下代码：

 [Bindable] 
 public var _model:ModelLocator = ModelLocator.getInstance();

然后将 _model.personInfos 作为 DataGrid 的 dataProvider, 为 <mx:DataGrid> 添加如下属性：

dataProvider="{_model.personInfos}"

定义 FrontController
事件分发后，应该执行一个对应的命令，命令通过执行相应的业务逻辑，更新数据，从而视图得到更新，那到底事件和命令之间是如何映射的呢？
在包 control 中新建一个 ActionScript class，取名为 MyFrontControl.as，代码如下：

 package control 
 { 
		 import com.adobe.cairngorm.control.FrontController; 
 import event.*;
		 import commands.*; 
		 public class MyFrontControl extends FrontController 
		 { 
			 public function MyFrontControl() 
			 { 
				 super(); 

 //注册一个事件，将其与一个命令绑定

 this.addCommand(LoadPersonsEvent.EVENT_ID,LoadPersonCommand);
			 } 

		 } 
 }

这里的 addCommand() 方法将事件和命令关联起来 , 第一个参数是事件的 name，第二个参数是具体的命令类，这里 LoadPersonCommand 还没有定义，编译错，下面就来定义 LoadPersonCommand.
定义 Command
新建一个 ActionScript class，取名为 LoadPersonCommand.as，实现 ICommand 接口，
命令调用服务代理完成相应的逻辑，然后通过更新数据，间接的反映到视图上，所以命令中需要维护 ModelLocator 单例的引用，每个命令类的入口函数是 execute() 方法。
代码如下：

 package commands 
 { 
		 import com.adobe.cairngorm.commands.ICommand; 
		 import com.adobe.cairngorm.control.CairngormEvent; 
		 import mx.collections.ArrayCollection; 
		 import mx.controls.Alert; 
		 import mx.rpc.Responder; 
 import mx.rpc.events.FaultEvent;
		 import mx.rpc.events.ResultEvent; 
		 public class LoadPersonCommand implements ICommand 
		 { 
			 public function execute(event:CairngormEvent):void 
			 { 

			 } 

 //如果请求发送成功则执行这个方法
 public function onResults_loadPersons(event:ResultEvent):void
			 { 

			 } 
 //如果请求失败则执行这个方法
			 public function onFaults_loadPersons(event:FaultEvent):void 
			 { 

			 } 

		 } 
 }

execute() 方法具体怎么实现，需要依赖于 service, 下面就来定义 ServiceLocator
定义 ServiceLocator
在 business 包下新建一个 MXML Component，取名为 ServiceLocator.mxml，由于插件不支持 com.adobe.cairngorm.business.ServiceLocator，所以 Based on 暂时随便选择，等会手工修改，修改后的代码如下：
[b]清单 10. ServiceLocator.mxml[/b]
[url=https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/#N101BA]点击查看代码清单[/url]
这里定义了一个 HTTPService 服务，获取服务器下的 xml 目录下的 abc.xml 的内容，在 WebContent 目录下建立一个目录，取名为 xml，并且在其下建立一个 abc.xml，内容如下：

 <menus> 
 <Box> 
   <id>1</id> 
 <name>zhangsan</name>
 </Box> 
 <Box> 
	<id>2</id> 
	<name>lisi</name> 
 </Box> 
 <Box> 
	<id>3</id> 
	<name>wangwu</name> 
 </Box> 
 </menus>

前面提到，通过定义 delegate 类来对服务进行管理易于维护，以下定义 delegate 类
定义 Delegate 类
在 business 包下新建一个 delegates 包，在其下建立一个 ActionScript class 类，取名为 PersonDelegate.as，该方法通过引用 ServiceLocator，获取并调用其中的服务，代码如下：

 package business.delegates 
 { 
		 import com.adobe.cairngorm.business.ServiceLocator; 
		 import mx.rpc.http.HTTPService; 
		 import mx.rpc.IResponder; 
		 import mx.rpc.AsyncToken; 
		 import mx.controls.Alert; 
		 public class PersonDelegate 
		 { 
         public var serviceLocator:ServiceLocator = ServiceLocator.getInstance();

			 public var _service:HTTPService; 

			 public var _responder:IResponder; 

			 public function PersonDelegate(responder:IResponder) 
			 { 
 //getHTTPService的参数对应 Services.mxml中的 id
        _service = serviceLocator.getHTTPService("getPersonInfos"); 
				 _responder = responder; 
			 } 

			 public function getPersonInfos():void 
			 { 
 //发送请求
				 var token:AsyncToken = _service.send(); 
				 token.addResponder(_responder); 
			 } 

		 } 
 }

方法 getPersonInfos() 用于发送查询 abc.xml 文件的请求。
定义 VO
从 xml 文件中读取过来的数据实际上都是一个个的员工的信息，便于存储，定义 VO 类来封装员工信息，在 vo 包中定义 ActionScript class，取名为 PersonForm.as，代码如下：

 package vo 
 { 
		 public class PersonForm 
		 { 
			 public var id:String=""; 
			 public var name:String=""; 
			 public function PersonForm() 
			 { 


			 } 
		 } 
 }

实现 Command
通过在 Command 中维护 ModelLocator 单例的引用，当更新 ModelLocator 中的数据时，因为 ModelLocator 是单例，所以页面中的 ModelLocator 中的数据也相应的更新，详细的原理请看注释，LoadPersonCommand.as 完整代码如下：
[b]清单 14. LoadPersonCommand.as[/b]
[url=https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/#N10208]点击查看代码清单[/url]
execute() 方法中 PersonDelegate 执行 getPersonInfos() 方法，当请求发送成功，返回数据的时候，通过注册的回调函数 onResults_loadPersons(event:ResultEvent) 接收返回的数据，将每条员工信息用 VO 封装起来，然后更新 ModelLocator 中的数据，从而页面上的数据得到更新。
创建 MXML Application
以上将所有的组件已经创建完毕，现在是时候创建一个 Application 将它们组装起来。
在 flex_src 下新建一个 MXML Application，取名为 Cairngormdemo.mxml，代码如下：

 <?xml version="1.0" encoding="utf-8"?> 
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
		 xmlns:views="views.*"
		 xmlns:rds="business.*"
		 xmlns:control="control.*"> 
	 <mx:Style source="assets/style.css"/> 

		 <views:PeopleInfo  x="51"/> 
		 <rds:Services /> 
		 <control:MyFrontControl/> 


 </mx:Application>

在页面中将自定义组件 PeopleInfo，ServiceLocator 和 FrontController 实例化。
运行
运行 Cairngormdemo.mxml，如下图所示 :
[align=center][b][size=small]图 7. 结果[/size][/b]
[img]https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/image014.jpg[/img][/align]
这里仅仅实现了加载数据的功能，增删改留给读者自己实现。

[b][size=medium]结束语[/size][/b]
本文对 Flex MVC 框架 Cairngorm 的重要部分作了一个详细的介绍，当然还有一些细节问题值得研究，相信通过本文的示例项目，可以帮助您更快的掌握这种全新的开发方式。
[b][size=medium]下载[/size][/b]
演示代码: [url=http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=508305&filename=Cairngormdemo.zip&method=http&locale=zh_CN] Cairngormdemo.zip[/url]
[b][size=medium]参考资料[/size][/b]
[b][size=small]学习[/size][/b]
关于 Flex 3 入门资料，请参考 [url=http://learn.adobe.com/wiki/display/Flex/Get+oriented+to+Flex]Getting Started with Flex 3[/url]
关于 Flex 3 语言参考，请参考 [url=http://livedocs.adobe.com/flex/3/langref/index.html]Flex 3 Language References[/url]
关于 Flex 3 SDK 相关参考，请参考 [url=http://livedocs.adobe.com/flex/3/html/]Live Documentation For the Flex SDK[/url]
关于 Cairngorm 开发文档，请参考 [url=http://opensource.adobe.com/wiki/display/cairngorm/Developer+Documentation]Cairngorm developer documentation[/url]
[url=http://www.ibm.com/developerworks/cn/web/lp/flex/]Flex 开发专题[/url]：Flex 是目前富 Internet 应用开发的一个生力军，它能够让开发人员开发出与传统 HTML 页面效果迥然不同的用户界面和应用效果。本专题从“入门”、“高级”和“集成”三个方面向您全面地介绍了一些和 Flex 开发相关的学习资源，让您了解到更多的开发技巧和应用方式。
developerWorks [url=http://www.ibm.com/developerworks/cn/offers/techbriefings/]技术活动[/url]和[url=http://www.ibm.com/developerworks/cn/swi/]网络广播[/url]：随时关注 developerWorks 技术活动和网络广播。
[url=http://www.ibm.com/developerworks/cn/web/]developerWorks Web development 专区[/url]：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
[url=http://www.ibm.com/developerworks/cn/ajax/]developerWorks Ajax 资源中心[/url]：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
[url=http://www.ibm.com/developerworks/cn/web20/]developerWorks Web 2.0 资源中心[/url]，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门 栏目，迅速了解 Web 2.0 的相关概念。

From [url]https://www.ibm.com/developerworks/cn/web/1008_zhaifeng_cairngorm/#icomments[/url]