第 1章 Cairngorm 开发框架 Cairngorm 是一种开源框架，由 Adobe 开发团队设计。使用 Cairngorm 框架能快速地建立 起 RIA 应用程序，适用于开发大中型 RIA 应用程序。Cairngorm 框架不但能提高开发效率， 也有利于团队合作。本章将为读者介绍 Cairngorm 框架的基础知识、运行原理和机制、使用 方法等。通过 Cairngorm 实例的学习，读者能掌握 Cairngorm 框架特点及使用方法。 1.1 Cairngorm 简介 Cairngorm 框架是开发 RIA 应用程序的轻量级的框架，可应用于企业级的软件开发，也 可结合 J2EE 或.NET 等开发技术。 由于 Flex 3.0 技术是由事件驱动的，所以事件处理函数很多。假设一个应用程序中存在 大量事件，若每个事件的处理函数都定义于一个 MXML 文件或 AS 文件中，代码就会很混乱， 不利于修改。Cairngorm 框架将每个事件处理封装为一个类。这样，不但代码整洁，而且也提 高了重用性。 Cairngorm 提供了一种类似于 MVC（Model-View-Control）的框架，将设计视图与代码分 离，因此有利于团队开发。Cairngorm 框架运行过程的简单描述如下所示。 （1）前台控制器监听事件。 （2）当事件发生时，前台控制器调用相应命令执行。 （3）命令类中的 execute 方法执行相关处理。onResult 方法处理结果集。 onFault 方法处理 异常信息。 （4）组件视图绑定至相关数据集。若数据集发生改变，视图自动改变。 至本书出版前，Cairngorm 框架的最新版本为 Cairngorm 2.2，2007 年 4 月发布。 Cairngorm 435 第 22 章 Cairngorm 开发框架 框架的下载地址为“http://labs.adobe.com/wiki/index.php/Cairngorm”。有关 Cairngorm 框架的 其他资料可访问“http://www.cairngormdocs.org”。 1.2 Flex 3.0 中如何添加 Cairngorm 框架 Flex 3.0 中添加 Cairngorm 框架的步骤如下所示。 步骤 1 在浏览器中输入“ http://labs.adobe.com/wiki/index.php/Cairngorm”，打开 Cairngorm 框架的下载页面，如图 1-1 所示。 图 1-1 Cairngorm 框架下载页面 步骤 2 单击“Downloads”标签下的 “here”链接， 下载最新的 Cairngorm 框架。 步骤 3 解压缩 Cairngorm 包。Cairngorm 框架的源文件在“ com”文件 夹中，已编译的 Cairngorm 库文件“ Cairngorm.swc”在“bin”文件夹下。 步骤 4 在需要添加Cairngorm框架的 Flex 工程上右击，弹出右键菜单， 如图 1-2 所示。 步骤 5 选择“ Properties”命令，打开工程属性对话框，如图 1-3 所示。 步骤 6 单击“Flex Build Path”项下“Library Path”标签，打开库设 置页面，如图 1-4 所示。 步骤 7 单击“Add SWC…”按钮，弹出选择 SWC 文件对话框，如图 1-5 所示。 步骤 8 在文本框中输入 “Cairngorm.swc”文件路径。单击“OK”按钮，完成添加 Cairngorm 框架。 图 1-2 右键菜单 436 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 图 1-3 工程属性对话框 图 1-4 库设置页面 图 1-5 选择 SWC 文件对话框 1.3 Cairngorm 框架中的基础类 Cairngorm 框架的运行机制是以类为基础，因为 Cairngorm 框架是用 ActionScript 3.0 语言 编写的，而 ActionScript 3.0 语言是一种面向对象的语言。本小节将介绍 Cairngorm 框架中的 基础类的作用和定义。大部分基础类不能直接使用，用户需要继承基础类来完成特定的功能。 有关如何使用基础类将在 Cairngorm 框架运行原理小节中介绍。 1.3.1 类的文件组织结构 Cairngorm 框架中的类不是杂乱无章地存放，而是以特定的文件组织结构存放。每个文件 夹有特殊的含义，存放不同意义的基础类。Cairngorm 框架的文件结构如图 1-6 所示。 “business”文件夹中存放有关服务器端的类。“commands”方件夹存放命令类。“control” 文件夹存放前台控制器类。“model”文件夹存放应用程序模型类；“view”文件夹存放视图类 437 第 22 章 Cairngorm 开发框架 及 MXML 文件；“vo”文件夹存放数据模型类。 438 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 图 1-6 Cairngorm 框架的文件结构 1.3.2 处理正常或异常结果的 Responder 类 Responder 类是一个接口类，用以处理正常或异常结果。Responder 类定义了两个抽象的 方法：onResult 方法和 onFault 方法。onResult 方法用于操作正常时的处理， onFault 方法用于 操作异常时的处理。 一般在 Command 类中实现 Responder 接口类的两个方法。有关 Responder 接口类的实现 将在后续章节中介绍。 以下代码是 Responder 类的定义代码。 package com.adobe.cairngorm.business { public interface Responder { function onResult( event : * = null ) : void; function onFault( event : * = null ) : void; } } 1.3.3 查找服务的 ServiceLocator 类 ServiceLocator 类用于查找服务，如、等。Service Locator 类可查找不同类型的服务，因此每种类型的服务都有对应的方法。 ServiceLocator 类查 找服务的方法说明，如表 1-1 所示。 439 第 22 章 Cairngorm 开发框架 表 1-1 ServiceLocator 类查找服务的方法 方 法 名 说 明 getService 获取 AbstractService（抽象）服务 getInvokerService 获取 AbstractInvoker 服务 getRemoteObject 获取 RemoteObject 服务 getHTTPService 获取 HTTPService 服务 getWebService 获取 WebService 服务 getDataService 获取 DataService 服务 getServices 获取 AbstractInvoker 服务数组 getHTTPServices 获取 HTTPService 服务数组 getDataServices 获取 DataService 服务数组 其中，getService 方法的优点是可获取任何类型服务，缺点是效率不高。以下代码是 getService 方法的定义代码。 public function getService( serviceId : String ) : AbstractService { return AbstractService( getServiceForId( serviceId ) ); } ServiceLocator 类中还定义对服务设置的方法，如 setMessageAgentCredentials 、 setHTTPServiceCredentials 等。 1.3.4 处理事件的 Command 类 Command 类继承于 ICommand 接口类，用于处理某一事件。 ICommand 类中定义了 execute 抽象方法，用于执行相应处理。以下代码是 ICommand 类的定义代码。 package com.adobe.cairngorm.commands { import com.adobe.cairngorm.control.CairngormEvent; public interface ICommand { function execute( event : CairngormEvent ) : void; } } 440 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 1.3.5 创建新事件的 CairngormEvent 类 CairngormEvent 类用于自定义用户事件。包含一个成员变量 data 和一个构造函数。data 变量可存储任何类型的数据。以下代码是 CairngormEvent 类的定义代码。 package com.adobe.cairngorm.control { import flash.events.Event; public class CairngormEvent extends Event { public var data : *; public function CairngormEvent( type : String, bubbles : Boolean = false, cancelable : Boolean = false ) { super( type, bubbles, cancelable ); } } } 1.3.6 管理事件的 CairngormEventDispatcher 类 CairngormEventDispatcher 类用于管理事件。CairngormEventDispatcher 类中的方法说明如 表 1-2 所示。 表 1-2 CairngormEventDispatcher 类的方法 方 法 名 说 明 getInstance 获取类的一个实例 addEventListener 添加事件监听 removeEventListener 移除事件监听 dispatchEvent 广播事件 hasEventListener 是否有事件监听 willTrigger 是否可以触发 其中 dispatchEvent 方法是最常使用的方法。一旦广播事件，FrontController 类就能收到消 息。以下代码是 CairngormEventDispatcher 类的定义代码。 package com.adobe.cairngorm.control { import flash.events.IEventDispatcher; 441 第 22 章 Cairngorm 开发框架 import flash.events.EventDispatcher; public class CairngormEventDispatcher { private static var instance : CairngormEventDispatcher; private var eventDispatcher : IEventDispatcher; public static function getInstance() : CairngormEventDispatcher //获取类的一个实例 { if ( instance == null ) instance = new CairngormEventDispatcher(); return instance; } public function CairngormEventDispatcher( target:IEventDispatcher = null ) //构造函数 { eventDispatcher = new EventDispatcher( target ); } //添加事件监听 public function addEventListener( type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false ) : void { eventDispatcher.addEventListener( type, listener, useCapture, priority, useWeakReference ); } //移除事件监听 public function removeEventListener( type:String, listener:Function, useCapture:Boolean = false ) : void { eventDispatcher.removeEventListener( type, listener, useCapture ); } public function dispatchEvent( event:CairngormEvent ) : Boolean //广播事件 { return eventDispatcher.dispatchEvent( event ); } public function hasEventListener( type:String ) : Boolean 442 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 //是否有事件监听 { return eventDispatcher.hasEventListener( type ); } public function willTrigger(type:String) : Boolean //是否可以触发 { return eventDispatcher.willTrigger( type ); } } } 1.3.7 监听事件的 FrontController 类 FrontController 类用于监听事件。一旦事件发生，前台控制器找到事件的相应处理命令类 执行。FrontController 类中的方法说明如表 1-3 所示。 表 1-3 FrontController 类的方法 方 法 名 说 明 addCommand 监听事件，并添加事件的处理命令 executeCommand 执行命令 getCommand 获得命令 以下代码是 FrontController 类的定义代码。 package com.adobe.cairngorm.control { import com.adobe.cairngorm.CairngormError; import com.adobe.cairngorm.CairngormMessageCodes; import com.adobe.cairngorm.commands.ICommand; import flash.utils.Dictionary; public class FrontController { private var commands : Dictionary = new Dictionary(); //定义命令数组 //监听事件，并添加事件的处理命令 public function addCommand( commandName : String, commandRef : Class ) : void { if( commands[ commandName ] != null ) //重复添加命令 { 443 第 22 章 Cairngorm 开发框架 thrownew CairngormError(CairngormMessageCodes.COMMAND_ ALREADY_REGISTERED, commandName ); } commands[ commandName ] = commandRef; //对应命令名和处理函数 //监听命令 CairngormEventDispatcher.getInstance().addEventListener ( commandName, executeCommand ); } //执行命令 protected function executeCommand( event : CairngormEvent ) : void { var commandToInitialise : Class = getCommand( event.type ); var commandToExecute : ICommand = new commandToInitialise(); commandToExecute.execute( event ); } //获得命令 protected function getCommand( commandName : String ) : Class { var command : Class = commands[ commandName ]; if ( command == null ) { thrownewCairngormError(CairngormMessageCodes.COMMAND_NOT_ FOUND, commandName ); } return command; } } } 1.3.8 存储数据模型的 ModelLocator 类 ModelLoacator 类是一种接口类，用于应用程序的数据模型。可将应用程序需要显示的数 据及状态变量都定义在 ModelLocator 类中。ModelLocator 类相当于应用程序的“数据库” ，方 便修改与删除。 444 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 1.3.9 辅助操作视图的 ViewHelper 类 ViewHelper 类用于辅助操作视图。使用 ViewHelper 类可在 AS 文件中修改其他 MXML 文件中的视图。ViewHelper 类中定义了两个成员变量： view 和 id。view 变量为 Object 类型， 存储了使用 ViewHelper 类的 MXML 文件的全部组件视图。id 变量为 ViewHelper 类的标识符。 ViewHelper 类中的方法说明如表 1-4 所示。 表 1-4 ViewHelper 类的方法 方 法 名 说 明 initialized 初始化 ViewHelper，包括 view 和 id 变量。 registerView 注册视图 unregisterView 撤销注册视图 以下代码是 ViewHelper 类的定义代码。 package com.adobe.cairngorm.view { import flash.events.Event; import mx.core.IMXMLObject; public class ViewHelper implements IMXMLObject { protected var view : Object; protected var id : String; //初始化 ViewHelper，包括 view 和 id 变量。 public function initialized( document : Object, id : String ) : void { this.view = document; this.id = id; view.addEventListener( Event.ADDED, registerView ); view.addEventListener( Event.REMOVED, unregisterView ); } private function registerView( event : Event ) : void //注册视图 { if ( event.target == view ) { ViewLocator.getInstance().register( id, this ); } } 445 第 22 章 Cairngorm 开发框架 private function unregisterView( event : Event ) : void//撤销注册视图 { if( event.target == view ) { ViewLocator.getInstance().unregister( id ); } } } } 446 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 1.3.10 查找视图的 ViewLocator 类 ViewLocator 类用以查找视图，即查找 ViewHelper 类实例。ViewLocator 类中的方法说明 如表 1-5 所示。 表 1-5 ViewLocator 类的方法 方 法 名 说 明 getInstance 获取 ViewLocator 类实例 register 注册视图 unregister 撤销注册视图 getViewHelper 根据 ViewHelper 类 id 获取 ViewHelper 类实例 registrationExistsFor 视图是否已注册 以下代码是 ViewLocator 类的定义代码。 package com.adobe.cairngorm.view { import com.adobe.cairngorm.CairngormError; import com.adobe.cairngorm.CairngormMessageCodes; import flash.utils.Dictionary; public class ViewLocator { private static var viewLocator : ViewLocator; //定义 ViewLocator 类 实例 viewLocator private var viewHelpers : Dictionary; //定义 Dictionary 变量 viewHelpers public static function getInstance() : ViewLocator //获取 ViewLocator 类 实例 { if ( viewLocator == null ) viewLocator = new ViewLocator(); return viewLocator; } public function ViewLocator() //构造函数 { if ( ViewLocator.viewLocator != null ) { thrownewCairngormError(CairngormMessageCodes.SINGLETON_ 447 第 22 章 Cairngorm 开发框架 EXCEPTION, "ViewLocator" ); } viewHelpers = new Dictionary(); } //注册视图 public function register( viewName : String, viewHelper : ViewHelper ) : void { if ( registrationExistsFor( viewName ) ) { thrownewCairngormError(CairngormMessageCodes.VIEW_ALREADY_ REGISTERED, viewName ); } viewHelpers[ viewName ] = viewHelper; } public function unregister( viewName : String ) : void //撤销注册视图 { if ( !registrationExistsFor( viewName ) ) { throw new CairngormError(CairngormMessageCodes.VIEW_NOT_ FOUND, viewName ); } delete viewHelpers[ viewName ]; } //根据 ViewHelper 类 id 获取 ViewHelper 类实例 public function getViewHelper( viewName : String ) : ViewHelper { if ( !registrationExistsFor( viewName ) ) { throw new CairngormError(CairngormMessageCodes.VIEW_NOT_ FOUND, viewName ); } return viewHelpers[ viewName ]; } //视图是否已注册 public function registrationExistsFor( viewName : String ) : Boolean { return viewHelpers[ viewName ] != undefined; } } } 448 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 1.3.11 定义数据模型的 ValueObject 类 ValueObject 类继承于 IValueObject 类，而 IValueObject 接口类主要用于定义数据模型。 例如，注册信息包括用户名和密码，用户可将用户名和密码封装在 ValueObject 类中。定义数 据模型的好处是使应用程序更简洁、重用性更高。 1.4 Cairngorm 框架的运行原理 Cairngorm 框架以事件为驱动，所以一个完整的运行过程从事件触发开始。运行过程中的 每一项处理都与基础类息息相关。本章将为读者介绍 Cairngorm 框架的运行原理及如何使用 基础类。 1.4.1 自定义事件（CairngormEvent 类） CairngormEvent 类用于自定义用户事件。使用 CairngormEvent 事件的语法如下所示。 var CairngormEvent 变量:CairngormEvent=new CairngormEvent("事件状态标识"); 事件状态标识由用户定义的字符串，能唯一表示此事件。以下代码定义了一个 CairngormEvent 事件 c。 var c:CairngormEvent=new CairngormEvent("ddd"); 由于 CairngormEvent 类中只有一个成员变量 data，所以只能携带一个数据。若用户需要 携带多个数据，可继承 CairngormEvent 类，并新增成员变量。以下代码自定义了事件 customEvent。此事件可携带多个数据。 package { public class customEvent extends CairngormEvent { public var s:String; public var k:Number; } } 449 第 22 章 Cairngorm 开发框架 1.4.2 自定义命令（Command 类） 用户自定义命令实现 Command 类中的 execute 方法。 execute 方法执行相应操作代码。以 下代码自定义了命令 OpenVideoCommand，实现了 execute 方法的具体操作。 package com.xi.flvPlayer.commands { public class OpenVideoCommand implements Command { public function execute(event:CairngormEvent):void { //定义 FlvPlayerViewHelper 实例 var fpViewHelper:FlvPlayerViewHelper=FlvPlayerViewHelper (ViewLocator.getInstance().getViewHelper("flvPlayerViewHelper")) //不相同的视频或从未点击过的视频,需要加载 if(FlvModel.currVideo==""||FlvModel.currVideo!=FlvModel. videoSource) { fpViewHelper.loadMediaPlay(FlvModel.videoSource); FlvModel.currVideo=FlvModel.videoSource; } else //相同的视频则重新开始播放 { fpViewHelper.restartVideo(); } } } } 若 execute 方法中执行有返回结果的操作时，需要同时实现 Response 类中的 onResult 方 法和 onFault 方法。例如， execute 方法中加载外部 XML 文件，在加载完成时得到 XML 数据， 在加载错误时提示相应错误信息。以下代码定义了一个命令类 GetChnCaptionCommand，并实 现了 Command 类和 Responder 类中的全部方法。 // GetChnCaptionCommand.as package com.asiatom.englishr.commands { … public class GetChnCaptionCommand implements Command,Responder 450 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 { public function execute(event:CairngormEvent):void //命令执行的处理 { var services : EnglishrService = new EnglishrService(this); //实例化 EnglishrService services.getXmlFile(EngModel.chnCaptionAddress);//加载 XML 文件 } public function onResult(event:Event):void //正确执行后的处理 { /*XML 中的值赋给 chnCaption 变量*/ var loader:URLLoader = URLLoader(event.target); EngModel.getInstance().chnCaption=new XMLList(loader.data as String); EngModel.existChnCaption=true; //加载英文字幕 var e:GetEngCaptionEvent=new GetEngCaptionEvent(); CairngormEventDispatcher.getInstance().dispatchEvent(e); } public function onFault(event: IOErrorEvent):void //执行错误后的处理 { Alert.show("当前路径下没有中文字幕!"); EngModel.existChnCaption=false; //加载英文字幕 var e:GetEngCaptionEvent=new GetEngCaptionEvent(); CairngormEventDispatcher.getInstance().dispatchEvent(e); } } } 命令类先执行 execute 方法。若运行正确，执行 onResult 方法。若执行错误，执行 onFault 方法。 1.4.3 前台控制器（FrontController 类）监听事件 FrontController 类用以监听事件。其原理是判断相应的事件标识是否存在。使用 addCommand 方法可监听事件，并为事件添加对应的处理函数。其语法如下所示。 addCommand(事件标识字符串,事件处理命令类)； 习惯上 FrontController 类中还将定义各种 CairngormEvent 事件的标识字符串。以下代码 为 customEvent 事件添加监听，并指明其处理命令类为 tt。 451 第 22 章 Cairngorm 开发框架 public static var EVENT_VIDEO_CONTROL : String = "controlVideo"; … addCommand(EVENT_VIDEO_CONTROL,tt); 以下代码中定义了一个前台控制器类 FlvControl。FlvControl 类继承 FrontController 类， 监听标识为“controlVideo”和“openVideo”的事件。 public class FlvControl extends com.adobe.cairngorm.control.FrontController { public function FlvControl() : void //构造函数 { initialiseCommands(); } public function initialiseCommands() : void { //添加对控制视频事件的监听 addCommand( EVENT_VIDEO_CONTROL, VideoControlCommand ); //添加对打开视频事件的监听 addCommand(EVENT_OPEN_VIDEO, OpenVideoCommand ); } //控制视频的事件标识 public static var EVENT_VIDEO_CONTROL : String = "controlVideo"; //打开视频的事件标识 public static var EVENT_OPEN_VIDEO:String="openVideo"; } 本程序中“VideoControlCommand”和“OpenVideoCommand”是命令类的名称。 1.4.4 在服务定位器（ServiceLocator 类）中寻找服务 ServiceLocator 类用于存储和查找服务。可将 ServiceLocator 类作为 MXML 组件使用，其 语法如下所示。 <名称空间:ServiceLocator xmln:名称空间="ServiceLocator 类所处的包"/> ServiceLocator 类所处的包为“com.adobe.cairngorm.business.ServiceLocator”。 名称空间可任意取。 ServiceLocator 类作为 MXML 组件后，可将不同服务都定义于 ServiceLocator 组件内。以 下代码定义了 ServiceLocator 组件，存储了一个 HTTPService 服务。 452 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 //Services.mxml 在服务定位器（ServiceLocator 类）中寻找服务使用 getService 方法，其语法如下所示。 ServiceLocator.getInstance().getService(服务 id)； 以下代码使用 getService 方法获取 xmlSaveService 服务。 ServiceLocator.getInstance().getService("xmlSaveService"); 1.4.5 在模型定位器（ModelLocator 类）中存取数据 ModelLocator 类中存放应用程序的全部数据及状态。这样做的好处是管理方便、操作统 一。以下代码定义了一个模型定位器 FlvModel。FlvModel 类继承了 ModelLocator 类，用以存 储数据和状态。 package com.xi.flvPlayer.model { public class FlvModel implements ModelLocator { private static var flvModel : FlvModel = new FlvModel(); public static function getInstance() : FlvModel { return flvModel; } public static var currVideo : String=""; //当前播放视频地址 public static var videoSource:String=""; //将要加载的视频地址 //要绑定的图标 [Bindable] [Embed(source="/assets/images/btn_normal_break.png")] public var btn_normal_break:Class; } } 453 第 22 章 Cairngorm 开发框架 使用 getInstance 方法可获取类的实例。效果与“ var t:FlvModel=new FlvModel();”相同。 访问 ModelLocator 类中的成员变量的语法如下所示。 ModelLocator 变量.getInstance().成员变量; 以下代码将 FlvModel 类中的 btn_normal_break 变量绑定至按钮组件的 icon 属性上。 1.4.6 使用 ViewHelper 类修改视图 使用 ViewHelper 类修改视图的步骤如下所示。 步骤 1 自定义类继承 ViewHelper 类。以下代码定义了 FlvPlayerViewHelper 类。 FlvPlayerViewHelper 类继承 ViewHelper 类，新增 loadMediaPlay 方法和 restartVideo 方法。 package com.xi.flvPlayer.view { public class FlvPlayerViewHelper extends ViewHelper { public function FlvPlayerViewHelper() //构造函数 { super(); } public function loadMediaPlay(src:String):void //加载视频处理函数 { view.mainDisplay.source=src; view.mainDisplay.load(); view.mainDisplay.play(); } public function restartVideo():void //重新播放视频处理函数 { view.mainDisplay.playheadTime=0; } } } view 变量是 ViewHelper 类中的成员变量，存储了 ViewHelper 类所在 MXML 文件上的 全部组件信息。 454 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 “mainDisplay”是视频组件的 id。 步骤 2 将 ViewHelper 类作为组件添加至 MXML 文件中。添加方法与 ServiceLocator 类相 同。以下代码在“main.mxml”文件中添加 FlvPlayerViewHelper 组件。 //main.mxml … 步骤 3 调用自定义 ViewHelper 类中的方法修改视图。在调用方法前需要获取自定义的 ViewHelper 类，其语法如下所示。 ViewLocator.getInstance().getViewHelper("ViewHelper 组件 id"); 以下代码调用 FlvPlayerViewHelper 类的 loadMediaPlay 方法加载视频。 var flvVH: FlvPlayerViewHelper=ViewLocator.getInstance().getViewHelper ("fvh"); flvVH.loadMediaPlay("c:\aa.flv"); 1.4.7 使用 ValueObject 类自定义数据模型 ValueObject 类用以自定义数据模型。以下代码定义了 RegisterVO 类，用以存储用户名和 密码。 package { import com.adobe.cairngorm.vo.ValueObject; //引用 ValueObject 类 public class RegisterVO implements ValueObject { public var username : String; public var password : String; } } 455 第 22 章 Cairngorm 开发框架 1.5 Cairngorm 实例 本小节以一个实例介绍如何使用 Cairngorm 框架开发应用程序。实例实现的功能是添加 联系人信息到列表组件。实例的文件结构如图 1-7 所示。 图 1-7 Cairngorm 实例的文件结构 实例的具体步骤如下所示。 步骤 1 新建 Flex 工程。 步骤 2 工程中添加 Cairngorm 框架，即“Cairngorm.swc”文件。 步骤 3 编写“ContactVO.as”文件。 ContactVO 类构造联系人模型， 包括姓名、 Email、添加日期。 以下代码定义了 ContactVO 类。 //ContactVO.as package com.adobe.cairngorm.samples.addcontact.vo { import com.adobe.cairngorm.vo.ValueObject; //引用 ValueObject 类 public class ContactVO implements ValueObject { public var fullname : String; //定义 String 变量 fullname，用以存储 456 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 联系人姓名 public var emailaddress : String; //定义 String 变量 emailaddress，用 以存储联系人 Email public var addcontactDate : String;//定义 String 变量 Date，用以存储添加 时间 } } 步骤 4 编写“ AddContact.as”文件。AddContact 类用以存储应用程序的数据及状态变量， 包括 ContactVO 类实例、运行信息、操作状态。以下代码定义了 AddContact 类。 //AddContact.as package com.adobe.cairngorm.samples.addcontact.model { import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;//引用 ContactVO 类 public class AddContact { [Bindable] public var contactVO : ContactVO; //定义ContactVO变量contactVO， 用以存储联系人信息 [Bindable] public var statusMessage : String; //定义String变量statusMessage， 用以存储运行信息 [Bindable] public var isPending : Boolean; //定义 Boolean 变量 isPending， 表示操作是否完成 } } 步骤 5 编写“ModelLocator.as”文件。ModelLocator 类用以存储 AddContact 类实例和联 系人数组。以下代码定义了 ModelLocator 类。 //ModelLocator.as package com.adobe.cairngorm.samples.addcontact.model { import com.adobe.cairngorm.model.ModelLocator; //引用 ModelLocator 类 import mx.collections.ArrayCollection; //引用 ArrayCollection 类 [Bindable] public class ModelLocator implements com.adobe.cairngorm.model.ModelLocator 457 第 22 章 Cairngorm 开发框架 { //定义 ModelLocator 类变量 modelLocator private static var modelLocator : com.adobe.cairngorm.samples. addcontact. model.ModelLocator; //getInstance 方法用以获取类的实例 public static function getInstance() : com.adobe.cairngorm.samples. addcontact.model.ModelLocator { if ( modelLocator == null ) modelLocator = new com.adobe.cairngorm.samples.addcontact. model.ModelLocator(); return modelLocator; } public function ModelLocator()//构造函数 { if(com.adobe.cairngorm.samples.addcontact.model.ModelLocator. modelLocator != null ) throw new Error( "Only one ModelLocator instance should be instantiated" ); } //定义 AddContact 类变量 addcontact，用以存储数据及状态 public var addcontact : AddContact = new AddContact(); //定义 ArrayCollection 类实例 contacts，表示联系人数组 public var contacts : ArrayCollection = new ArrayCollection(); } } 步骤 6 编写“AddContactControl.as”文件。 AddContactControl 类本程序的前台控制器， 监听“添加联系人”事件。以下代码定义了 AddContactControl 类。 // AddContactControl.as package com.adobe.cairngorm.samples.addcontact.control { import com.adobe.cairngorm.control.FrontController;//引用 FrontController 类 //引用 AddContactCommand 类 import com.adobe.cairngorm.samples.addcontact.commands.AddContactCommand; public class AddContactControl extends FrontController { 458 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 public function AddContactControl() //构造函数 { //添加对 EVENT_ADD_CONTACT 状态的监听 addCommand( AddContactControl.EVENT_ADD_CONTACT, AddContactCommand ); } //定义 EVENT_ADD_CONTACT 事件标识 public static const EVENT_ADD_CONTACT:String = "addcontact"; } } AddContactControl 类中对标识为“ addcontact”事件进行监听。一旦此事件发生，执行 AddContactCommand 命令类。 步骤 7 编写“AddContactEvent.as”文件。AddContactEvent 类是自定义的“添加联系人” 事件，可携带 ContactVO 类型数据。以下代码定义了 AddContactEvent 类。 // AddContactEvent.as package com.adobe.cairngorm.samples.addcontact.control { import com.adobe.cairngorm.control.CairngormEvent; //引用 CairngormEvent 类 import com.adobe.cairngorm.samples.addcontact.vo.ContactVO; //引用 ContactVO 类 public class AddContactEvent extends CairngormEvent { public var contactVO : ContactVO; //定义 ContactVO 变量 contactVO public function AddContactEvent( contactVO : ContactVO ) //构造函数 { //继承父类 CairngormEvent 的构造函数 super( AddContactControl.EVENT_ADD_CONTACT ); this.contactVO = contactVO; //接收参 数进来的数据 } } } “ AddContactControl.EVENT_ADD_CONTACT ”对应“addcontact ”字符串，这在 459 第 22 章 Cairngorm 开发框架 AddContactControl 类中定义过。 步骤 8 编写“AddContactCommand.as”文件。 AddContactCommand 类用以处理“添加联 系人”事件，包含 execute 方法、onResult 方法和 onFault 方法。以下代码定义了 AddContactCommand 类。 //AddContactCommand.as package com.adobe.cairngorm.samples.addcontact.commands { import mx.rpc.events.ResultEvent; //引用 ResultEvent 类 import com.adobe.cairngorm.business.Responder; //引用 Responder 类 import com.adobe.cairngorm.commands.Command; //引用 Command 类 import com.adobe.cairngorm.control.CairngormEvent; //引用 CairngormEvent 类 //引用 AddContactDelegate 类 import com.adobe.cairngorm.samples.addcontact.business.AddContactDelegate; //引用 AddContactEvent 类 import com.adobe.cairngorm.samples.addcontact.control.AddContactEvent; //引用 ModelLocator 类 import com.adobe.cairngorm.samples.addcontact.model.ModelLocator; //引用 ContactVO 类 import com.adobe.cairngorm.samples.addcontact.vo.ContactVO; //引用 ContactVO 类 import mx.formatters.DateFormatter; public class AddContactCommand implements Command, Responder { //定义 ModelLocator 变量 model private var model : ModelLocator = ModelLocator.getInstance(); //执行命令函数 public function execute( event : CairngormEvent ) : void { //改变 isPending 状态 model.addcontact.isPending = true; //定义 AddContactDelegate 类实例 var delegate : AddContactDelegate = new AddContactDelegate( this ); //接收传递来的数据，并存于 addcontactEvent 变量 var addcontactEvent : AddContactEvent = AddContactEvent( event ); //执行 delegate 实例的 addcontact 方法，开始添加联系人 delegate.addcontact( addcontactEvent.contactVO ); } 460 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 //命令运行正常的处理函数 public function onResult( event : * = null ) : void { //接收传递来的数据，并存于 model.addcontact.contactVO 中 model.addcontact.contactVO = ContactVO( event ); model.addcontact.isPending = false; //改变 isPending 状态 /*定义 Object 变量 obj,用以存储联系人信息*/ var obj:Object=new Object(); obj.fullname=ContactVO(event).fullname; obj.emailaddress=ContactVO(event).emailaddress; /*添加联系人日期。日期格式化为"年-月-日,时:分:秒"*/ var now:Date=new Date(); var df:DateFormatter=new DateFormatter(); df.formatString="YYYY-M-DD,J:NN:S"; obj.addcontactDate=df.format(now); //添加 obj 变量到 model.contacts 中 model.contacts.addItem(obj); } //命令运行错误的处理函数 public function onFault( event : * = null ) : void { model.addcontact.statusMessage = "添加联系人失败"; //改变 isPending 状态 model.addcontact.isPending = false; } } } 命令类先执行 execute 方法。 若运行正常，执行 onResult 方法。若运行异常，执行 onFault 方法。 本程序中 execute 方法中执行 AddContactDelegate 类的 addcontact 方法。 AddContactDelegate 类是一个代理类，用以执行具体的操作。 onResult 方法中将联系人信息存储于联系人数组中，修改操作状态等。 onFault 方法中提示错误信息，并修改操作状态。 步骤 9 编写“AddContactDelegate.as”文件。 AddContactDelegate 类是 AddContactCommand 461 第 22 章 Cairngorm 开发框架 类的代理类，用以执行“添加联系人”的具体操作。以下代码定义了 AddContactDelegate 类。 //AddContactDelegate.as package com.adobe.cairngorm.samples.addcontact.business { import com.adobe.cairngorm.business.Responder; //引用 Responder 类 import com.adobe.cairngorm.business.ServiceLocator;//引用 ServiceLocator 类 import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;//引用 ContactVO 类 import flash.utils.setTimeout; //引用 setTimeout 类 import mx.rpc.AsyncToken; //引用 AsyncToken 类 import mx.rpc.events.ResultEvent; //引用 ResultEvent 类 public class AddContactDelegate { private var responder : Responder; //定义 Responder 类实例 private var service : Object; //定义 Object 变量 public function AddContactDelegate( responder : Responder ) //构造函数 { this.responder = responder; } public function addcontact( contactVO : ContactVO ): void //添加联系人处理函数 { //延迟 1 秒，并提交给 addcontactResult 函数 setTimeout( addcontactResult, 1000, contactVO ); } private function addcontactResult( contactVO : ContactVO ): void { if( 1 ) //若运行正常，开始添加联系人 { responder.onResult( contactVO ); } else //若运行不正常，提示错误 { responder.onFault(); } } } 462 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 } 由于命令类 AddContactCommand 类实现了 Responder 类，所以“responder.onResult (contactVO)”语句可看成“AddContactCommand.onResult(contactVO)”。 步骤 10 编写“AddContactPanel.mxml”文件。 AddContactPanel 组件是自定义的组件，确 定了应用程序的主要外观。以下代码是 AddContactPanel 组件的 MXML 代码。 // AddContactPanel.mxml 464 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 addContact 函数中广播 AddContactEvent 事件。前台控制器收到信息后，执行相应的命 令类，从而完成“添加联系人”功能。 组件中的 itemRenderer 属性用以自定义数据项显示方式。本程序中数据项的 显示形式在“ContactThumbnail.mxml”文件中定义。 AddContactPanel 组件的外观效果如图 1-8 所示。 图 1-8 AddContactPanel 组件外观 步骤 11 编写“ContactThumbnail.mxml”文件。ContactThumbnail 组件定义了列表中数据 项的显示形式。以下代码是 ContactThumbnail 组件的 MXML 代码。 //ContactThumbnail.mxml 465 第 22 章 Cairngorm 开发框架 本程序中的 data 变量指向 AddContactPanel 组件中 组件的 dataProvider 属性，即 ContactVO 类的 实例。ContactThumbnail 组件的外观效果如图 1-9 所示。 步骤 12 编写“Cairngorm 实例.mxml ”文件。 “Cairngorm 实例.mxml”文件是应用程序的主文件，包含了 AddContactPanel 组件、 CSS 样式 文件等。以下代码是“Cairngorm 实例.mxml”文件的 MXML 代码。 //Cairngorm 实例.mxml 图 1-9 ContactThumbnail 组件的外观 466 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 本程序中使用组件调用“style.css”样式文件，用以美化界面。 组件中的 contacts 属性和 addcontact 属性为自定义属性。两个 属性在“AddContactPanel.mxml”文件中已声明为公有属性。 步骤 13 编写“style.css”文件。 “style.css”文件用以美化界面，包括按钮组件、 Panel 组 件、应用程序背景等。以下代码定义了 CSS 样式文件“style.css”。 // style.css Application { backgroundColors: #000000,#3f3f3f; //背景颜色 backgroundImage: Embed(source="/style/background.jpg"); //背景图片 backgroundSize: "100%"; //背景大小 fontSize:14; //字体大小 } Button { //弹起效果 upSkin: Embed(source="buttons/up.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); //移至效果 overSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); //按下效果 downSkin: Embed(source="buttons/up.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 467 第 22 章 Cairngorm 开发框架 ); //不可用时的效果 disabledSkin: Embed(source="buttons/disable.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); //不可用状态被选择时的效果 selectedDisabledSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); //按下状态被选择时的效果 selectedDownSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); //移至状态被选择时的效果 selectedOverSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); //弹起状态被选择时的效果 selectedUpSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); color: #000000; //字体颜色 textRollOverColor: #000000; //移至文本时的颜色 textSelectedColor:#000000; //选择文本时的颜色 } Image { brokenImageSkin: Embed("/style/other/brokenImage.png");//图片加载失败时的 468 Flex 3.0 RIA 开发详解：基于 ActionScript 3.0 实现 图标 } Panel { backgroundAlpa:.7; //设置透明度 } TextInput { //设置背景图片 backgroundImage: Embed(source="/style/textInput/up.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=2, scaleGridRight=4 ); backgroundSize:"100%"; //设置背景大小 cornerRadius:0; //设置圆角度 border-style:none; //设置边框样式 } 步骤 14 按下 Ctrl+F11 快捷键编译运行程序。运行效果如图 1-10 所示。 图 1-10 Cairngorm 实例的运行效果 1.6 小结 本章主要介绍了 Cairngorm 框架的基本知识，包括基础类的简介、添加 Cairngorm 框架的 469 第 22 章 Cairngorm 开发框架 方法、Cairngorm 框架的运行原理、如何应用 Cairngorm 框架等。本章最后以一个简单实例来 详细介绍如何应用 Cairngorm 框架。通过本章的学习，读者能够掌握 Cairngorm 框架的基本知 识及使用方法。