cairngorm简单教程

本教程通过Cairngorm来开发了一个Flex应用程序，这个例子的名称叫AddBook,即增加图书的意思，即利用我们的Flex Cairngorm来实现一个增加图书的功能。其界面效果如下所示：

其文件结构如下所示：

第１步：定义VO,不妨假定一本书包含书名，作者，和单价。代码如下，文件名为BookVO.as

package com.baidu.hi.book.vo {    public class BookVO {       public var bookName:String;       public var bookAuthor:String;       public var bookPrice:String; } }

第２步：有了VO,想想我们的视图中需要绑定那些数据库吧？无疑我们要显示我们增加的书，所以不妨给视图绑定一个数组变量来表示我们增加的书 吧。给视图绑定数据我们需要在ModelLocator中实现，其文件名为：AddBookModelLocator.as,代码如下：

package com.baidu.hi.book.model { import com.adobe.cairngorm.model.ModelLocator; import mx.collections.ArrayCollection; public class AddBookModelLocator implements ModelLocator {   private static var addBookModelLocator:AddBookModelLocator; [Bindable] public var BookAC:ArrayCollection = new ArrayCollection(); public static function getInstance():AddBookModelLocator { if (addBookModelLocator == null) { addBookModelLocator   = new AddBookModelLocator(); } return addBookModelLocator; } } }

第3步：现在我们就要开始设计我们的视图了，即我们的界面效果，它是一个Component,我的界面效果即为本文的第一副图，当然你也可以自行设计。该AddBookView.mxml代码位于：com.baidu.hi.view文件夹下。

<?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.baidu.hi.book.event.AddBookEvent;
            import com.adobe.cairngorm.control.CairngormEventDispatcher;
            import com.baidu.hi.book.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="200" 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.baidu.hi.book.event

{ import com.adobe.cairngorm.control.CairngormEvent;

import com.baidu.hi.book.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,并且向外发送了这个事件，这个事件发送之后，我们的前台控制器便可以接收到。详细代码请参考第三步中的AddBookView.mxml代码。

第６步：前端控制器接收并映射到某一个Command处理，其文件名为AddBookControl.as,其代码如下：
package com.baidu.hi.book.control

{

import com.adobe.cairngorm.control.FrontController;

import com.baidu.hi.book.command.AddBookCommand;

import com.baidu.hi.book.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方法，这两个是个回调函数，如何服务端传过来正确的数据对象，就将执行实际的业务处理，如果错误的数据对象，就执行fault函数。为了完整地演示我们Cairngorm框架的运行机理，在execute方法中 还用到了代理，但对于这个例子来说，这并不是必须的，代理一般是在需要与服务器端交互数据时才会用到。
package com.baidu.hi.book.command

{

import com.adobe.cairngorm.commands.ICommand;

import com.adobe.cairngorm.control.CairngormEvent;

import com.baidu.hi.book.business.AddBookDelegate;

import com.baidu.hi.book.event.AddBookEvent;

import com.baidu.hi.book.model.AddBookModelLocator;

import com.baidu.hi.book.vo.BookVO;

import mx.rpc.IResponder;

public class AddBookCommand implements ICommand, IResponder

{

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

public function execute(event:CairngormEvent):void

{

   var addBookDelegate:AddBookDelegate = new AddBookDelegate(this);

var addBookEvent:AddBookEvent = AddBookEvent(event);

   addBookDelegate.addBook(addBookEvent.bookVO);

}

public function result(data:Object):void

{

   model.BookAC.addItem(data as BookVO);

}

public function fault(event:Object):void{ }

}

}
第8步，让我们看一下这个代理类的实现。定义代理的文件名为AddBookDelegate.as,其代码如下：
package com.baidu.hi.book.business

{

import com.baidu.hi.book.vo.BookVO;

import mx.rpc.IResponder;

import mx.rpc.events.ResultEvent;

public class AddBookDelegate

{

private var responder:IResponder;

public function AddBookDelegate(responder:IResponder)

{

   this.responder = responder;

}

public function addBook(bookVO:BookVO):void

{

   responder.result(bookVO);

}

}

}

在这个例子中，这个代理似乎有点多此一举，但为了完整讲述Cairngorm框架的运行机理，不得不把它加上。

　　第９步，如何把这一大堆东西组合在一起呢，其奥妙在我们的主程序文件中，它是一个Application，其文件名为：CairongormDemo.mxml,其代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:control="com.baidu.hi.book.control.*"
                xmlns:view="com.baidu.hi.book.view.*"
                horizontalAlign="center" verticalAlign="middle" fontSize="13">
    <mx:Script>
        <![CDATA[
            import com.baidu.hi.book.model.AddBookModelLocator;           
            [Bindable]
            public var model : AddBookModelLocator = AddBookModelLocator.getInstance() ;
        ]]>
    </mx:Script>   
     <control:AddBookControl id="controller"/>
     <view:AddBookView id="addBookView" bookAC="{model.BookAC}"/>    
</mx:Application>

来自http://zhangpingan2005.blog.163.com/blog/static/672295422009630105959426/