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



    第 2步:创建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;
    }
    }
    }



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

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

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



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


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



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

    不登高山,怎知天高;不临深溪,焉知地厚!站在坚实的土地上,做着生命中最真实的事情;像一棵挺拔的大树,认可自己的命运并敢于迎接属于这一方天空的风风雨雨。

  • 相关阅读:
    解决弹出的窗口window.open会被浏览器阻止的问题(自定义open方法)
    js call
    说说JSON和JSONP,也许你会豁然开朗
    按需加载/懒加载
    Sublime Text2 中Emmet(之前叫Zencoding)插件安装以及使用
    求数组中的最小值以及最小值的序列号
    软件工程概论作业03--将随机产生的表达式导入数据库
    软件工程作业01--四则运算1
    梦断代码阅读笔记
    学习进度条--第二周
  • 原文地址:https://www.cnblogs.com/net2012/p/2820851.html
Copyright © 2020-2023  润新知