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个类，这对编码和调试确实压力不小。想象一个，如果有很多的事件，那需要增加多少类？增加多少的工作量？