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