Flex 入门之Cairngorm框架 与 flexlib

简介

airngorm是指导Flex开发以MVC（Model-View-Control）模式进行的架构框架，它的重点在于给你一个指导性原则，而并非具体实现，它要实现的目的就是提高项目的可维护性和灵活性，和重用（注意是功能上的重用，而非代码级的重用）。它是一个由多个设计模式组合而成的集合体。使用它的重点在于遵循它的设计思想，而非使用它的代码。它解决的问题包括：使用Model保持客户端状态，使用ValueObject方式达到传送数据的目的。Cairngorm推荐的最佳实践：将数据模型几种到一个全局的ModelLocator中。ModelLocator应为单例模式避免变量冲突。在控件中使用数据绑定合理组织视图，将组件封闭（避免直接对外引用），通过声明组件所需的共有变量（需要能够绑定）从外部接收数据，声明自定义事件来播发组件的业务逻辑。功能点驱动的开发，以业务逻辑为驱动(用户引发的操作，系统引发的操作，都通过Event派发，然后交给命令执行)。

 

Cairngorm 示意图

Model Locator（模型定位器）：存储你的应用中所有的Value Objects（数据）和共享变量在一个位置。和Http的Session对象类似，只是它存储在Flex接口的客户端而不是在中间件应用服务器的服务器端。

View（界面）：通过一个或者多个Flex组件（按钮、面板、组合框、Tile等等）组合在一起的一个个命名单元，绑定数据在Model Locator（模型定位器）中，并且产生基于用户操作（点击、滚动、拖拽等）的自定义的Cairngorm事件。

Front Controller（前端控制器）：接收Cairngorm事件并映射他们到Cairngorm命令控制器上。

Command（命令控制器）：处理商业逻辑，调用Caringorm代理和（或）其它命令。

Delegate（代理）：由命令创建，实例化远程过程调用（HTTP、Web Service等等）并且处理命令的返回结果数据。

Service（服务）：定义连接远程数据存储的远程过程调用（HTTP、Web Service等等）。

主要部分

1、VO（Value Object）

IValueObject 和 ValueObject 只是为了提高VO类的可读性，表示该类是一个ValueObject类，其它没有任何实际作用。其可能是为将来而设计的，我们在应用过程中不需要实现任何接口函数。

2、Model

定义了ModelLocator接口，我们只需要实现该接口，把所需要绑定的数据保存在这里。通常我们都采用单例模式（Singleton Pattern）来实现，并按照项目模块进行分类，避免把整个项目的所有数据都保存在一个类文件中。换句话说，ModelLocator是整个系统的数据中心。 

3、View 

有ViewHelper.as 和 ViewLocator.as，在Cairngorm2.2.1版本中已被废除。

4、Commands 

定义了ICommand接口，该接口定义了一个唯一需要实现的方法execute()，这其实就是典型的命令模式，我们只要实现此接口，并不需要关心其具体实现方式。

5、Control

含三个基类：CairngormEvent、CairngormEventDispatcher和FrontController。 

（1）CairngormEvent：

继承flash.events.Event，其包含一个data成员，用来传递参数数据之用。

（2）CairngormEventDispatcher：

采用单例模式(Singleton Pattern)，用来广播用户发起的自定义动作事件。

（3）FrontController：

相当于控制中心，在这里你要做的工作是将事件（CairngormEvent）和命令（Command）之间的映射关系注册在它的

成员commands（Dictionary类型）中，通过下面的类似方法进行注册：

addCommand( GetProductsEvent.EVENT_GET_PRODUCTS, GetProductsCommand );

//注意，因为继承自ICommand得对象，唯一的标示为GetProductsEvent.EVENT_GET_PRODUCTS，即字符串。

以后，凡是CairngormEventDispatcher广播出来的事件，首先都会在这里查找，找到对应的event对应的command后，

便执行Command的execute()方法。

FrontController必须要在你的系统中实例化，具体的实例化方法如下：

<mx:Application xmlns:control="com.domain.projectname.control.ShopController">

...

<control:ShopController id="controller" />

...

</mx:Application>

6、Business 

IServiceLocator接口： 

提供了HTTPService、WebSercice、RemoteObject三种RPC服务。使用时候，将需要的RPC服务登记在该接口中，

以mxml形式采用单例模式（Singleton Pattern）实现IServiceLocator，如下面使用例子：

<cairngorm:ServiceLocator

xmlns:mx="http://www.adobe.com/2006/mxml" 

xmlns:cairngorm="http://www.adobe.com/2006/cairngorm">

<mx:RemoteObject id="productService" destination="productServiceImpl" showBusyCursor="true">

</mx:RemoteObject>

<mx:RemoteObject id="creditCardService" destination="creditCardServiceImpl" showBusyCursor="true">

</mx:RemoteObject>

<mx:HTTPService id="XXXService" url="URL" showBusyCursor="true" useProxy="false" resultFormat="e4x">

</mx:HTTPService>

</cairngorm:ServiceLocator>

需要在系统中实例化，具体的实例化方法如下： 

 <mx:Application xmlns:business="com.adobe.cairngorm.samples.store.business.*">

...

 <business:Services id="services" />

 ...

</mx:Application>

flexlib 简介

flexlib是一个开源的FLEX用户界面组件，适用于FLEX 2和FLEX 3版本。

包括一下组件：

AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework 

简单的示例：

<object style="width: 965px; height: 306px;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="965" height="306"> </object> 

每个组件的文档说明和实例的地址如下：

http://code.google.com/p/flexlib/wiki/ComponentList

下载地址：

http://flexlib.googlecode.com/files/flexlib-.2.4.zip

快速入门：

1：首先在上面的地址下载，并解压缩flexlib，在bin文件夹中得到flexlib.swc文件。

2：打开FLEX新建一个FLEX工程，在新工程中创建一个lib文件夹，把刚才得到的flexlib.swc文件拖拽到lib文件夹。

3：在FLEX工程跟文件目录单击邮件--选择属性（properties）。

4：在打开的窗口中的左边，选择Flex Build Path，然后选择Library Path面板, 单击"Add SWC"按钮，输入lib，点击确定。

4：打开默认MXML文件，在Application标签中添加命名空间属性xmlns:flexlib="http://code.google.com/p/flexlib/" 。

至此，所建立项目可以引用flexlib控件库里德所有控件了。

具体组件属性、方法、事件样式，查看如下的文档：

http://code.google.com/p/flexlib/wiki/ComponentList