读书人

Cairngorm 框架试工心得

发布时间: 2012-11-17 11:14:16 作者: rapoo

Cairngorm 框架试用心得
Cairngorm 框架是Adobe官方发布的Flex 框架,于是从网上下载一下 ver 2.2.1,试用一下。

做了一个试例,(以网上网友的试例为样本,照模样的做了一个)。


从代码的情况看,主要有六大类的代码,其中有MVC,还有事件等。界面如下:

操作方法:录入书名、作者、价格后,单击“添加”按钮,所录入的信息自动的出现在上面的列表中。

为了搞明白运行的过程,我们从外面向里面分析:

第一、 先看界面。

上面的界面,是在主界面是调用的,调用的代码如下:

AddBook.mxml:

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

xmlns:control="com.adobe.cairngorm.book.control.*" xmlns:view="com.adobe.cairngorm.book.view.*"

title="Cairngorm 试用">

<mx:Script>

<![CDATA[

import com.adobe.cairngorm.book.model.AddBookModelLocator;

[Bindable]

public var model:AddBookModelLocator = AddBookModelLocator.getInstance();

]]>

</mx:Script>



<control:AddBookControl id="controller"/>

<view:AddBookView id="addBookView" BookAC="{model.bookAC}" x="53" y="44"/>

</mx:WindowedApplication>

主要的代码有三部分:

(1) 创建Model

public var model:AddBookModelLocator = AddBookModelLocator.getInstance();

(2) 加载控制

<control:AddBookControl id="controller"/>

(3) 加载视图

<view:AddBookView id="addBookView" BookAC="{model.bookAC}" x="53" y="44"/>

设计的视图中,也就是VIEW层,我们需要为它准数据源,用于展示,上面的语句中,BookAC="{model.bookAC} 用来向VIEW提供数据。



上面的代码实现在MVC三部分的整合。所有的一切准备就绪了,就等触发相关的事件。

第二、 看看 BookAC="{model.bookAC}

在实际操作前,先分析一下,向展示层提供的数据是如何得到的。

BookAC="{model.bookAC},说明数据来源于 model, 即AddBookModelLocator:

AddBookModelLocator.as

package com.adobe.cairngorm.book.model

{

import com.adobe.cairngorm.model.IModelLocator;

import mx.collections.ArrayCollection;



public class AddBookModelLocator implements IModelLocator

{

[Bindable]

public var bookAC:ArrayCollection = new ArrayCollection();



private static var addBookModelLocator:AddBookModelLocator;

public static function getInstance():AddBookModelLocator{

if (null == addBookModelLocator){

addBookModelLocator = new AddBookModelLocator();

}

return addBookModelLocator;

}

}

}



在上面的类中,

public var bookAC:ArrayCollection = new ArrayCollection();

提供了存放数据的容器。至于数据是如何得到的,我们暂且不管。

第三、 示例中所有触发是从界面上单击“添加”按钮开发始的,

AddBookView.mxml:

<?xml version="1.0" encoding="utf-8"?>

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12" layout="absolute" width="404" height="348" title="Cairngorm 试用">

<mx:Label x="10" y="217" text="书名" />

<mx:Label x="10" y="245" text="作者"/>

<mx:Label x="10" y="273" text="单价"/>

<mx:TextInput x="59" y="215" id="bookname" width="255"/>

<mx:TextInput x="59" y="243" id="bookauthor" width="255"/>

<mx:TextInput x="59" y="271" id="bookprice" width="255"/>

<mx:Button x="322" y="272" label="添加" click="AddBook();"/>

<mx:DataGrid x="10" y="10" width="364" height="187" dataProvider="{BookAC}">

<mx:columns>

<mx:DataGridColumn headerText="书名" dataField="bookname"/>

<mx:DataGridColumn headerText="作者" dataField="bookAuthor"/>

<mx:DataGridColumn headerText="单价" dataField="bookPrice"/>

</mx:columns>

</mx:DataGrid>



<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import com.adobe.cairngorm.book.vo.BookVO;

import com.adobe.cairngorm.book.event.AddBookEvent;

import com.adobe.cairngorm.control.CairngormEventDispatcher;



[Bindable]

public var BookAC:ArrayCollection=null;



public function AddBook():void{

var bv:BookVO = new BookVO();

bv.bookname = this.bookname.text;

bv.bookAuthor=this.bookauthor.text;

bv.bookPrice=this.bookprice.text;

var event:AddBookEvent = new AddBookEvent(bv);

CairngormEventDispatcher.getInstance().dispatchEvent(event);

}

]]>

</mx:Script>

</mx:Panel>

代码的最后两句:

var event:AddBookEvent = new AddBookEvent(bv);

CairngormEventDispatcher.getInstance().dispatchEvent(event);

完成了事件的包装及分发。(生成事件时,已经包含了录入的数据)



public var BookAC:ArrayCollection=null;

提供数据的接收并绑定到控件中。可以联系到前面的

<view:AddBookView id="addBookView" BookAC="{model.bookAC}" x="53" y="44"/>

第四、 AddBookEvent 类分析

从前可以看到,分发事件时,是需要指定分发的事件具体信息的。dispatchEvent只是起个分发的作用。

AddBookEvent.as

package com.adobe.cairngorm.book.event

{

import com.adobe.cairngorm.book.vo.BookVO;

import com.adobe.cairngorm.control.CairngormEvent;

import com.adobe.cairngorm.book.control.AddBookControl;



public class AddBookEvent extends CairngormEvent

{

public var bookVO:BookVO;



public function AddBookEvent(bookVO:BookVO){

super(AddBookControl.EVENT_ADD_BOOK);

this.bookVO = bookVO;

}

}

}

CairngormEvent 类提供一个带参的构造函数,参数是一个实体类:

BookVO.as

package com.adobe.cairngorm.book.vo

{

//图书基本信息

public class BookVO

{

public function BookVO()

{

//TODO: implement function

}



public var bookname:String;

public var bookAuthor:String;

public var bookPrice:String;



}

}

这个类,仅仅用于对数据进行封装,没有其它用途。

super(AddBookControl.EVENT_ADD_BOOK); 用于将消息提交到Cairngorm,交由Cairngorm框架处理。

但是,事件处理时,要用到控制器中对事件的定义:

AddBookControl.EVENT_ADD_BOOK

第五、 AddBookControl 类

AddBookControl.as

package com.adobe.cairngorm.book.control

{

import com.adobe.cairngorm.control.FrontController;

import com.adobe.cairngorm.book.command.AddBookCommand;



public class AddBookControl extends FrontController

{

public static const EVENT_ADD_BOOK:String="addBook";

public function AddBookControl()

{

addCommand(AddBookControl.EVENT_ADD_BOOK, AddBookCommand);

}

}

}

AddBookControl 类是一个控制类,通过addCommand 方法,将事件和 command 关联起来,这样才可以对指定的事件进行监听。

第六、 事件的执行和结果获取

事件的执行和结果获取由 command 来完成:

AddBookCommand.as

package com.adobe.cairngorm.book.command

{

import com.adobe.cairngorm.business.Responder;

import com.adobe.cairngorm.commands.Command;

import com.adobe.cairngorm.control.CairngormEvent;



import com.adobe.cairngorm.book.vo.BookVO;

import com.adobe.cairngorm.book.model.AddBookModelLocator;

import com.adobe.cairngorm.book.business.AddBookDelegate;

import com.adobe.cairngorm.book.event.AddBookEvent;



public class AddBookCommand implements Command, Responder

{

private var model:AddBookModelLocator = AddBookModelLocator.getInstance();



public function execute(event:CairngormEvent):void

{

var delegate : AddBookDelegate = new AddBookDelegate ( this ) ;

var addBookEvent : AddBookEvent = AddBookEvent ( event ) ;

delegate.AddBook(addBookEvent.bookVO) ;

}



public function onResult( event : * = null ):void

{

model.bookAC.addItem(BookVO(event));

}



public function onFault(event : * = null):void

{

//TODO: implement function

}



}

}

在这个类中,execute 和onResult 才是我们想要的。

model.bookAC.addItem(BookVO(event)); 完成了数据的填充,最终提供给界面。



总结

使用 Cairngorm 框架确实能很好的对事件进行封装,如果是多人开发,还是可以的。当然,不足也是明显的,我们也看到,为了实现在一个事件的处理,我们需要增加6个类,这对编码和调试确实压力不小。想象一个,如果有很多的事件,那需要增加多少类?增加多少的工作量?


引用:http://blog.csdn.net/whqcfp/archive/2009/05/11/4168747.aspx

读书人网 >网络基础

热点推荐