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()
{
}
}
}



第 ２步：创建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;
}
}
}



第５步：在视图中添加触发事件的代码，当 “添加”按钮单击时，我们触发一个函数，在该函数中最重要的两句为： Actionscript代码

var event : AddBookEvent = new AddBookEvent ( bookVO ) ;
CairngormEventDispatcher.getInstance().dispatchEvent( event ) ;

这两句表示新建了一个AddBookEvent,并且向外发送了这个事件，这个事件发送之后，我们的前台控制器便可以接收到。详细代码请参考第三步中的BookAdd.mxml代码。



第６步：前端控制器接收并映射到某一个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);
}
}
}


第７步，该前台控制器把这个事件映射到了一个名叫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
}
}
}
}



第９步，如何把这一大堆东西组合在一起呢，其奥妙在我们的主程序文件中，它是一个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>