接下来的几篇Cairngorm教学是参考David Tucker 的 Getting Started with Cairngorm ,假如英文程度够好的话,建议直接去看他的网站,里面还有英文教学影片。(其实英文不好,建议大家也看看David Tucker的网站,自己英文水平不够,可以借助金山和有道桌面词典。慢慢啃英文技术文档是我们做Flex程序员以后成长必备的能力) 新增三个文件,两个是MXML 组件。
Cairngorm: Model Locator
用来集中管理程序所需的变量。
首先在我们的项目的src文件夹下,建立model文件夹:
第二步建立ViewModelLocator.as类。此类必须实现IModelLocator接口。
ViewModelLocator.as的代码如下:
package org.rianotes.CairngormSample.model
{
import com.adobe.cairngorm.model.IModelLocator;
import mx.collections.ArrayCollection;
[Bindable]
public class ViewModelLocator implements IModelLocator {
// Single Instance of Our ModelLocator
private static var instance:ViewModelLocator;
public function ViewModelLocator(enforcer:SingletonEnforcer) {
if (enforcer == null) {
throw new Error( "You Can Only Have One ViewModelLocator" );
}
}
// 回传已存的参数
// Returns the Single Instance
public static function getInstance() : ViewModelLocator {
if (instance == null) {
instance = new ViewModelLocator( new SingletonEnforcer );
}
return instance;
}
//在下面定义你要的参数 - DEFINE YOUR VARIABLES HERE
public var contactbook:ArrayCollection = new ArrayCollection();
}
}
// Utility Class to Deny Access to Constructor
class SingletonEnforcer {}
其中构造函数与getInstance()这两个部分照着写,大致上不用修改。
它们是用来判断application中是否已经建立了ViewModelLocator,有的话读取,沒有的话初始一个。
在同一个application中只能有一个ModelLocator,所有的View都能从此读取数据。
而[Bindable]的特性,可以让任一个使用ModelLocator中的变量的地方自动更新。
下面的示例是一个通讯录,将使用者资料存在ModelLocator中
其中将示范,即使在不同的组件中对ModelLocator数据修改,其他的组件也会即时更新。
新增三个文件,两个是MXML 组件。
AddPersonForm.mxml - 用来输入用户名与用户Email地址的From
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="right">
<mx:Script>
<![CDATA[
import org.rianotes.CairngormSample.vo.User;
import mx.controls.Alert;
import org.rianotes.CairngormSample.model.ViewModelLocator;
private var modelOne:ViewModelLocator = ViewModelLocator.getInstance();
private function addPerson(e:MouseEvent):void{
if(tiUserID.text && tiEmail.text){
var usercontact:User = new User();
usercontact.UserID = tiUserID.text;
usercontact.Email = tiEmail.text;
modelOne.contactbook.addItem(usercontact);
tiUserID.text = "";
tiEmail.text = "";
}
else{
mx.controls.Alert.show("使用者ID與電子郵件不可為空!");
}
}
]]>
</mx:Script>
<mx:Form borderStyle="solid" width="100%" height="100%">
<mx:FormItem label="UserID :" width="100%">
<mx:TextInput id="tiUserID" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Email: " width="100%">
<mx:TextInput id="tiEmail" width="100%"/>
</mx:FormItem>
</mx:Form>
<mx:Button label="输入" click="addPerson(event)" />
</mx:VBox>
ContactbookGrid.mxml -用来显示输入资料的DataGrid
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
dataProvider="{modelOne.contactbook}">
<mx:Script>
<![CDATA[
import org.rianotes.CairngormSample.model.ViewModelLocator;
private var modelOne:ViewModelLocator = ViewModelLocator.getInstance();
]]>
</mx:Script>
<mx:columns>
<mx:DataGridColumn headerText=" - UserID - " width="75" dataField="UserID" />
<mx:DataGridColumn headerText=" - Email - " dataField="Email"/>
</mx:columns>
</mx:DataGrid>
一个VO(value object)
User.as - 用来记录User contact info的资料的类。
package org.rianotes.CairngormSample.vo
{
public class User
{
public var UserID:String;
public var Email:String;
public function User()
{
}
}
}
而其中最重要的是:
import org.rianotes.CairngormSample.model.ViewModelLocator;
private var modelOne:ViewModelLocator = ViewModelLocator.getInstance();
这是每个组件对ModelLocator作初使化的动作,之后Component就能夠从ModelLocator读取已存在或被修改的变量了。
最後在MXML Application中将components加入
Main.mxml -项目的主文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:components="org.rianotes.CairngormSample.view.components.*">
<mx:Script>
<![CDATA[
import org.rianotes.CairngormSample.model.ViewModelLocator;
private var modelOne:ViewModelLocator = ViewModelLocator.getInstance();
]]>
</mx:Script>
<mx:HBox width="500" height="200">
<mx:VBox>
<mx:Label text="{'Number of Contacts: ' + modelOne.contactbook.length}" />
<components:ContactbookGrid width="100%" height="100%" />
</mx:VBox>
<components:AddPersonForm width="100%" height="100%" />
</mx:HBox>
</mx:Application>
分享到:
相关推荐
1 39 跟我StepByStep学FLEX教程------Cairngorm之Model Locator 1 40 跟我StepByStep学FLEX教程------Cairngorm之核心控制流程 1 41 跟我StepByStep学FLEX教程------Cairngorm之Command部分 1 42 跟我StepByStep...
Flex开发框架cairngorm入门实例教程,有需要的人可以看一下
cairngorm整合spring+hibernate,里面描述的狠清晰,一看就懂
Flex MVC框架cairngorm 入门
Cairngorm本身並不是一個完整的企業應用,它只提供一個開發的體系,讓開發者遵循這個體系開發出一個結構清暫,解耦良好的程序代碼從而提高程序的維護和擴展。 Cairngorm這個體系包括以下六個部分: Business(业务...
Cairngorm例子Cairngorm例子Cairngorm例子Cairngorm例子
Cairngorm is the lightweight micro-architecture for Rich Internet Applications built in Flex or AIR. A collaboration of recognized design patterns, Cairngorm exemplifies and encourages best-practices ...
什么是Cairngorm,内部MVC结构,Cairngorm的各个部分
flex cairmgorm入门实例教程。
Cairngorm作为flex的一个优秀的框架,已经得到许多开发者的认可了,网上Cairngorm的教程不多,希望该教程文档对大家有所帮助
Cairngorm开发例子 利于初学者学习
cairngorm框架是flex界的mvc框架,传统的flex开发方法开发的代码难以维护。 这个是cairngorm的中文版入门讲解
flex例子使用Cairngorm框架。
绝对是Cairngorm框架入门的好Demo.下载后记得评分!
Flex框架Cairngorm经典案例源码 完全掌握Cairngorm
一个简单的cairngorm入门实例,结合了spring和ibatis。内含说明文档
cairngorm.swc供需要的朋友急用
前台FLex工程(单独工程Cairngorm)使用Cairngorm框架与后台java工程(FLexToJava)进行数据交互。功能点: ①flex提交表单保存到数据库; ②flex向后台请求,后台返回List集合,flex将集合填充到combox 附带:...
cairngorm-2.2.2.swc Flex中的一款框架