Flex开发框架cairngorm入门实例
Cairngorm是flex开发的mvc框架,现在在 adobe旗下。它架构和eclipse插件开发gef架构很相似,具体工作原理如下:
该框架就是一个Cairngorm.swc文件,大家可以到Cairngrom的官方网站上去下载,我在这里提供地址:http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm
然后新建一个Flex工程,有一个Cairngrom.swc包一定要引进去才行(一般放在libs文件夹里面),或者直接 在build path中加入该包。
下面通过一个实例来说明Cairngorm框架如何使用。我们做一个简单的图书录入显示功能,做完后界面如下:
flex工程结构如下:
第1步:定义VO,不妨假定一本书包含书名,作者,和单价。代码如下,文件名为BookVO.as
package com.dobodo.vo
{
public class BookVO
{
public var bookName:String;
public var bookAuthor:String;
public var bookPrice:String;
public function BookVO()
{
}
}
}
第 2步:创建ModelLocator,该类为单例模式,用来放整个应用的数据。
package com.dobodo.model
{
import mx.collections.ArrayCollection;
public class ModelLocator
{
static private var __instance:ModelLocator=null;
[Bindable]
public var BookAC:ArrayCollection = new ArrayCollection();
static public function getInstance():ModelLocator
{
if(__instance == null)
{
__instance=new ModelLocator();
}
return __instance;
}
}
}
第3步:现在我们就要开始设计我们的视图了,即我们的界面效果,它是一个Component,。
文件名为:BookAdd.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="562" height="306" horizontalAlign="left" title="添加图书">
<mx:Script>
<![CDATA[
import com.dobodo.event.AddBookEvent;
import com.adobe.cairngorm.control.CairngormEventDispatcher;
import com.dobodo.vo.BookVO;
import mx.collections.ArrayCollection;
[Bindable]
public var bookAC:ArrayCollection = new ArrayCollection();
public function addBook():void
{
var bookVO:BookVO = new BookVO();
bookVO.bookName = this.bookName.text;
bookVO.bookAuthor = this.bookAuthor.text;
bookVO.bookPrice = this.bookPrice.text;
var event:AddBookEvent = new AddBookEvent(bookVO);
CairngormEventDispatcher.getInstance().dispatchEvent(event);
this.bookName.text = "";
this.bookAuthor.text = "";
this.bookPrice.text = "";
}
]]>
</mx:Script>
<mx:HBox width="100%" height="258" horizontalScrollPolicy="off">
<mx:VBox width="250">
<mx:Form width="233" height="212">
<mx:FormItem label="书名:">
<mx:TextInput width="118" id="bookName"/>
</mx:FormItem>
<mx:FormItem label="作者:">
<mx:TextInput width="118" id="bookAuthor"/>
</mx:FormItem>
<mx:FormItem label="单价:">
<mx:TextInput width="119" id="bookPrice"/>
</mx:FormItem>
<mx:Button label="添加" click="this.addBook()"/>
</mx:Form>
</mx:VBox>
<mx:VBox>
<mx:DataGrid width="263" height="208" dataProvider="{bookAC}">
<mx:columns>
<mx:DataGridColumn headerText="书名" dataField="bookName"/>
<mx:DataGridColumn headerText="作者" dataField="bookAuthor"/>
<mx:DataGridColumn headerText="单价" dataField="bookPrice"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:HBox>
</mx:Panel>
第 4步:继承我们的CairngormEvent,创建我们的自定义事件,这里我们不妨给它取名为AddBookEvent,即增加图书事件, 该事件的触发行为是“添加”按键的单击,值得一提的是,该事件需要传递数据,所以我们给它一个bookVO的变量。其文件名 为:AddBookEvent.as,其代码如下:
package com.dobodo.event
{
import com.adobe.cairngorm.control.CairngormEvent;
import com.dobodo.vo.BookVO;
public class AddBookEvent extends CairngormEvent
{
public var bookVO:BookVO;
public static const EVENT_ADD_BOOK:String ="addBook";
public function AddBookEvent(bookVO:BookVO){
super(AddBookEvent.EVENT_ADD_BOOK);
this.bookVO = bookVO;
}
}
}
第5步:在视图中添加触发事件的代码,当 “添加”按钮单击时,我们触发一个函数,在该函数中最重要的两句为: Actionscript代码
var event : AddBookEvent = new AddBookEvent ( bookVO ) ;
CairngormEventDispatcher.getInstance().dispatchEvent( event ) ;
这两句表示新建了一个AddBookEvent,并且向外发送了这个事件,这个事件发送之后,我们的前台控制器便可以接收到。详细代码请参考第三步中的BookAdd.mxml代码。
第6步:前端控制器接收并映射到某一个Command处理,其文件名为AddBookControl.as,其代码如下:
package com.dobodo.controller
{
import com.adobe.cairngorm.control.FrontController;
import com.dobodo.command.AddBookCommand;
import com.dobodo.event.AddBookEvent;
public class AddBookControl extends FrontController
{
public function AddBookControl()
{
addCommand(AddBookEvent.EVENT_ADD_BOOK, AddBookCommand);
}
}
}
第7步,该前台控制器把这个事件映射到了一个名叫AddBookCommand的command上,由这个command去处理所有的事件逻辑,这个 command需要实现两个接口,一个接口为Command,另一个为Responder,Command接口对应着execute方 法,IResponder接口对应着Result和Fault方法,这两个是个回调函数,如果服务端传过来正确的数据对象,就将执行实际的Result函数,如果错误的数据对象,就执行fault函数。为了完整地演示我们Cairngorm框架的运行机理,在execute方法中 还用到了代理,但对于这个例子来说,这并不是必须的,代理一般是在需要与服务器端交互数据时才会用到。
package com.dobodo.command
{
import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;
import com.dobodo.business.BookDelegate;
import com.dobodo.event.AddBookEvent;
import com.dobodo.model.ModelLocator;
import com.dobodo.vo.BookVO;
import mx.rpc.IResponder;
import mx.controls.Alert;
public class AddBookCommand implements ICommand, IResponder
{
public function execute(event:CairngormEvent):void
{
var book:BookVO=(event as AddBookEvent).bookVO;
var bookDelegate:BookDelegate = new BookDelegate(this); //委托给BookDelegate处理具体
bookDelegate.addBook(book);
}
// 根据BookDelegate返回的结果进行处理
public function result(data:Object):void
{
var book:BookVO = data as BookVO;
if(book!=null)
{
Alert.show("增加成功!");
}
else
{
Alert.show("增加失败!");
}
}
public function fault(event:Object):void{ }
}
}
第8步,让我们看一下这个代理类的实现。定义代理的文件名为BookDelegate.as,代理类一般负责处理和服务器的交互。其代码如下
package com.dobodo.business
{
import com.dobodo.vo.BookVO;
import com.dobodo.model.*;
import mx.rpc.IResponder;
import mx.rpc.events.ResultEvent;
public class BookDelegate
{
private var model:ModelLocator = ModelLocator.getInstance();
private var responder:IResponder;
public function BookDelegate(responder:IResponder)
{
this.responder = responder;
}
public function addBook(bookVO:BookVO):void
{
//这里可以调用处理业务逻辑的类,比如调用远程的数据库操作类,把book插入到数据库里。
if(bookVO.bookName!="")
{
model.BookAC.addItem(bookVO);
responder.result(bookVO);//返回给command
}
else
{
responder.result(null);//返回给command
}
}
}
}
第9步,如何把这一大堆东西组合在一起呢,其奥妙在我们的主程序文件中,它是一个Application,其文件名为:CairongormDemo.mxml,在该文件中用到了Cairngorm框架的一些标签,具体用法请参考其文档。代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:control="com.dobodo.controller.*"
xmlns:view="com.dobodo.view.*"
horizontalAlign="center" verticalAlign="middle" fontSize="13">
<mx:Script>
<![CDATA[
import com.dobodo.model.ModelLocator;
[Bindable]
public var model:ModelLocator = ModelLocator.getInstance() ;
]]>
</mx:Script>
<control:AddBookControl id="controller"/>
<view:BookAdd id="addBookView" bookAC="{model.BookAC}"/>
</mx:Application>
源代码下载地址:http://download.csdn.net/source/2400541
Flex开发框架cairngorm入门实例的更多相关文章
- Flex 开发框架汇总
1.现有成熟Flex框架 Cairngorm (Adobe Open Source) - MVC framework PureMVC (Open Source) - MVC framework ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Redis使用
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-从零开始启动Osharp
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-代码生成器的使用
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-基于Osharp实现自己的业务功能
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Hangfire使用
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Permissions使用
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-切换数据库(从SqlServer改为MySql)
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-多上下文配置(多个数据库的使用)
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
随机推荐
- 格式化输出%s和%S的区别
使用s时,printf是针对单字节字符的字符串,而wprintf是针对宽字符的 使用S时,正好相反,printf针对宽字符 CString中的format与printf类似,在unicode字符集的工 ...
- DiscuzX的目录权限设置1
经常有朋友遇到Discuz目录权限设置出错的问题,网上千奇百怪的教程非常多,所谓的终极安全的教程更是满天飞,各种所谓的安全加强软件也随处可见,可实际过程中发现,老手用不上,新手则只会因为这些东西徒增麻 ...
- cocos2d-x游戏引擎核心之十一——并发编程(消息通知中心)
[续] cocos2d-x游戏引擎核心之八——多线程 这里介绍cocos2d-x的一种消息/数据传递方式,内置的观察者模式,也称消息通知中心,CCNotificationCenter. 虽然引擎没有为 ...
- 计算时间:一个C++运算符重载示例
Time类是一个用于计算时间的类,其原型如下:程序清单11.1 mytime0.h // mytime0.h -- Time class before operator overloading #if ...
- piblog 0.1
搭建开发环境首先,确认系统安装的Python版本是2.7.x. $ python --version Python 然后,安装开发Web App需要的第三方库:$ sudo pip install j ...
- linux的setup命令设置网卡和防火墙等
以前在centos上配置网卡都是纯命令行,今天发现linux原来还有一个setup那么好用的命令,真是相见恨晚,以后防火墙.网卡.其他网络配置.系统配置(开机启动项)都可用他来完成了
- js+jquery
改变元素的不透明度 <!DOCTYPE html> <html> <head> <script> function ChangeOpacity(x) { ...
- 【BZOJ2087】[Poi2010]Sheep 几何+DP
[BZOJ2087][Poi2010]Sheep Description Lyx的QQ牧场养了很多偶数个的羊,他是Vip,所以牧场是凸多边形(畸形).现在因为他开挂,受到了惩罚,系统要求他把牧场全部分 ...
- angular -- 无刷新做分页
无刷新做分页参考地址: http://www.jq22.com/demo/angular201707111100/ 示例代码: <!DOCTYPE html> <html lang= ...
- Java多线程(4)----线程的四种状态
与人有生老病死一样,线程也同样要经历开始(等待).运行.挂起和停止四种不同的状态.这四种状态都可以通过Thread类中的方法进行控制.下面给出了Thread类中和这四种状态相关的方法. 1 // 开始 ...