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 ...
随机推荐
- 查询软件和硬件列表清单[将文章里代码另存为 list.vbs,双击运行就会出现一个html页面]
'==========================================================================' Name: 查询软件和硬件列表清单' 不支持W ...
- canvas二:绘制圆和其他曲线
1.绘制圆 绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯 绘制圆需要用到arc这个方法: arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向): 弧 ...
- 《C++ Primer Plus》14.4 类模板 学习笔记
14.4.1 定义类模板下面以第10章的Stack类为基础来建立模板.原来的类声明如下:typedef unsigned long Item; class Stack{private: enum ...
- BNU4208:Bubble sort
冒泡排序(BubbleSort)的基本概念是:依次比较相邻的两个数,将小数放在前面,大数放在后面.即首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数,将小数放前,大数放后,如 ...
- 树形dp-hdu-3721-Building Roads
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3721 题目意思: 给一颗树,求移动一条边(边权值不变)到另外的位置,还是一棵树.求最小的树的直径. ...
- 【黑金ZYNQ7000系列原创视频教程】04.熟悉ZYNQ内部中断——内部定时器中断实验
黑金论坛地址: http://www.heijin.org/forum.php?mod=viewthread&tid=36638&extra=page%3D1 爱奇艺地址: http: ...
- ansible的入门级使用
author: headsen chen date: 2018-08-02 11:46:35 1,ansible的安装 yum install epel-release yum -y i ...
- mysql 5.7如何添加用户
MySQL5.7 添加用户.删除用户与授权 转自:https://www.cnblogs.com/xujishou/p/6306765.html mysql -uroot -proot MySQL5 ...
- log4j配置输出到多个日志文件(转)
參考资料:http://logging.apache.org/log4j/1.2/manual.html 通常我们项目里,有一些重要的日志想单独的输出到指定的文件,而不是全总输出到系统的日志文件中.那 ...
- Oracle之rman命令的使用全备输出信息的详解(51CTO风哥rman课程)
rman连接数据库 rman target/ catalog rman/rman123456 运行全备命令 backup database; 查看备份集 list backupset;