flex框架cairngorm 入门源码教程

最新推荐文章于 2023-04-06 09:39:15 发布

牛十二

最新推荐文章于 2023-04-06 09:39:15 发布

阅读量2.1k

点赞数

文章标签： flex 框架 import actionscript datagrid string

本文链接：https://blog.csdn.net/s_ongfei/article/details/5364558

版权

【菜鸟】cairngorm 快速入门教程

本帖最后由 kakashishi 于 2009-4-14 22:58 编辑

这一篇文章，我想通过一个我自已做的简单的例子来讲述如何运用Cairngorm来开发我们的Flex应用程序。这个例子的名称叫AddBook,即增加图书的意思，即利用我们的Flex Cairngorm来实现一个增加图书的功能。其界面效果如下所示：
　　其文件结构如下所示：

　　下面就跟着我来一步一步做完这个例子吧，相信只要跟我把这个例子做完，你就对Flex Cairngorm的运行机理有了较好的了解了，不过这个例子增加的图书记录并没有存到数据库中，关于存储到数据库中知识我将在下一篇文章中介绍：

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

注释：这个对象的就是用来存放数据的

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

复制代码

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

注释：单例模式 private static var addBookModelLocator : AddBookModelLocator ;这个静态很重要，因为他是该类及其所产生对象都共用的，所以轻松弄出个不管是此类和是他的对象只要调用
Actionscript代码

package com.adobe.cairngorm.book.model
{
import com.adobe.cairngorm.model.ModelLocator;
import com.adobe.cairngorm.book.vo.BookVO ;
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。

<?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.adobe.cairngorm.book.event.AddBookEvent;
import com.adobe.cairngorm.control.CairngormEventDispatcher ;
import com.adobe.cairngorm.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 ) ; //view的任务完成
this.bookName.text = "" ;
this.bookAuthor.text = "" ;
this.bookPrice.text = "" ;
}
]]>
</mx:Script>
<mx:HBox width="100%" height="258">
<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.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 static const EVENT_ADD_BOOK:String = 'addBook';
public function AddBookEvent(bookVO:BookVO)
{
super(AddBookEvent.EVENT_ADD_BOOK);
this.bookVO = bookVO;
}
}
}

复制代码

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

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

　　　　这两句表示新建了一个AddBookEvent,并且向外发送了这个事件，这个事件发送之后，我们的前台控制器便可以接收到。

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