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>
源代码下载地址：http://download.csdn.net/source/2400541