天高地厚

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Flex开发框架cairngorm入门实例

Posted on 2012-12-16 20:48  天高地厚-GNU  阅读(284)  评论(1编辑  收藏  举报

 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>