Cairngorm: Views
就是使用者最直观看到的显示,包含了button, panel… 等所组成的视图,它从Model Locator中取得数据,通过Cairngorm Events与用户产生互动。
在这个部分,我们利用ModelLocator控制ViewStack来切换View。
首先我们先在ViewModelLocator.as 中加入
public var workflowState:uint = 0;
用来记录ViewStack中,显示哪个View。
再加入下面静态常量,让程序提高可读性。
public static const LOGIN_SCREEN:uint = 0;
public static const MAIN_SCREEN:uint = 1;
整个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();
public var workflowState:uint = 0;
//在下面定义你需要的常数 - DEFINE VIEW CONSTANTS
public static const LOGIN_SCREEN:uint = 0;
public static const MAIN_SCREEN:uint = 1;
}
}
// Utility Class to Deny Access to Constructor
class SingletonEnforcer {}
然后我们在项目中加入:
一个Component
NamedBox.mxml - 用于显示名称
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
borderStyle="solid" borderThickness="1"
borderColor="#666666" backgroundColor="#CCCCCC"
horizontalAlign="center" verticalAlign="middle">
<mx:Script>
<![CDATA[
[Bindable]
public var boxName:String;
]]>
</mx:Script>
<mx:Label
fontSize="30" color="#666666"
fontWeight="bold" text="{this.boxName}" />
</mx:HBox>
两个View
LoginView.mxml - Login 的 View,包含Login Button
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="right" xmlns:components="org.rianotes.CairngormSample.view.components.*">
<mx:Script>
<![CDATA[
import org.rianotes.CairngormSample.model.ViewModelLocator;
[Bindable]
private var model:ViewModelLocator = ViewModelLocator.getInstance();
]]>
</mx:Script>
<components:NamedBox boxName="Login Screen"/>
<mx:Button label="Login" click="{model.workflowState = ViewModelLocator.MAIN_SCREEN}" />
</mx:VBox>
MainView.mxml - 主 View,包含Logout Button
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="right" xmlns:components="org.rianotes.CairngormSample.view.components.*">
<mx:Script>
<![CDATA[
import org.rianotes.CairngormSample.model.ViewModelLocator;
[Bindable]
private var model:ViewModelLocator = ViewModelLocator.getInstance();
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<mx:VBox width="50%" height="100%">
<mx:Label text="{'Number of Contacts: ' + model.contactbook.length}" />
<components:ContactbookGrid width="100%" height="100%"/>
</mx:VBox>
<components:AddPersonForm width="50%" height="100%" />
</mx:HBox>
<mx:Button label="Logout" click="{model.workflowState = ViewModelLocator.LOGIN_SCREEN}"/>
</mx:VBox>
我们利用LoginView与MainView中的Login,Logout按钮的click事件去改变ModelLocator中的workflowState的值
下面行的意思是一样的
model.workflowState = ViewModelLocator.LOGIN_SCREEN;
model.workflowState = 0;
但是前者可读性较高,在合作大型项目时需要这种方式。
最后再修改MXML application
Main.mxml - 主项目文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:view="org.rianotes.CairngormSample.view.*"
layout="absolute" >
<mx:Script>
<![CDATA[
import org.rianotes.CairngormSample.model.ViewModelLocator;
[Bindable]
private var model:ViewModelLocator = ViewModelLocator.getInstance();
]]>
</mx:Script>
<mx:ViewStack id="vsMain" width="100%" height="100%"
selectedIndex="{model.workflowState}">
<!--第0個View-->
<view:LoginView />
<!--第1個View-->
<view:MainView />
</mx:ViewStack>
</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(业务...
flex cairmgorm入门实例教程。
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的各个部分
绝对是Cairngorm框架入门的好Demo.下载后记得评分!
一个简单的cairngorm入门实例,结合了spring和ibatis。内含说明文档
cairngorm框架是flex界的mvc框架,传统的flex开发方法开发的代码难以维护。 这个是cairngorm的中文版入门讲解
Cairngorm开发例子 利于初学者学习
cairngorm-2.2.2.swc Flex中的一款框架
flex例子使用Cairngorm框架。
cairngorm.swc供需要的朋友急用
cairngorm2_2_1-bin.zip cairngorm2_2_1-doc.zip cairngorm2_2_1-src.zip
Cairngorm作为flex的一个优秀的框架,已经得到许多开发者的认可了,网上Cairngorm的教程不多,希望该教程文档对大家有所帮助
Flex框架Cairngorm经典案例源码 完全掌握Cairngorm
Cairngorm实例教程,该示例来源于Flex 3.0 RIA开发详解-基于ActionScript3.0实现