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的代码为:

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 - 用于显示名称

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

LoginView.mxml

<?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

MainView.mxml

<?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 - 主项目文件

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>

转载于:https://www.cnblogs.com/yangxiao24/archive/2010/05/14/1735049.html

(转)Cairngorm初学者入门教程 第四节--通过 Model Locator 控制管理 Views相关推荐

  1. Cairngorm初学者入门教程 第六节--Cairngorm中Command利用Delegate与Service连接

    在上一节,我们利用FrontController 去映射 Event与Command 在这一节我们主要针对Command这部分动作做介紹.在RIA应用程序中,不可或缺的部份就是跟后台服务器连接进行数据 ...

  2. (转)Cairngorm初学者入门教程 第三节--从使用Model Locator开始学起Cairngorm

    Cairngorm: Model Locator用来集中管理程序所需的变量. 首先在我们的项目的src文件夹下,建立model文件夹: 第二步建立ViewModelLocator.as类.此类必须实现 ...

  3. 【linux视频教程整套共25个视频】Linux初学者入门教程 .

    [linux视频教程整套共25个视频]Linux初学者入门教程 视频内容 1.Linux系统安装(一) 2.Linux系统安装(二) 3.Linux系统安装(三) 4.Linux系统安装(四) 5.远 ...

  4. 微信小程序云开发 初学者入门教程二

    微信小程序云开发 初学者入门教程二-前端操作数据库模块 如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的 ...

  5. WPF入门教程系列四——Dispatcher介绍

    WPF入门教程系列四--Dispatcher介绍 一.Dispatcher介绍 微软在WPF引入了Dispatcher,那么这个Dispatcher的主要作用是什么呢? 不管是WinForm应用程序还 ...

  6. 【知识整理】这可能是最好的RxJava 2.x 入门教程(四)

    这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(完结版)[强力推荐] 这可能是最好的RxJava 2.x 入门教程(一) 这可能是最好的R ...

  7. Python机器学习算法入门教程(四)

    Python机器学习算法入门教程(四) 文章目录 Python机器学习算法入门教程(四) Logistic回归算法(分类问题) 什么是分类问题? Logistic回归算法 数学解析Logistic回归 ...

  8. 宏宇社:国外lead入门教程(四)lead任务必备软件

    宏宇社:国外lead入门教程(四)lead任务必备软件 国外lead项目必备工具的准备 必备工具:1.科学上网工具 做国外lead项目首先需要准备的肯定是科学上网工具了,一个稳定的梯子能大大提高你申请 ...

  9. 三菱四节传送带控制梯形图_三菱PLC用步进指令实现四节传送带的模拟控制.pdf...

    您所在位置:网站首页 > 海量文档 &nbsp>&nbsp汽车/机械/制造&nbsp>&nbsp工业自动化 三菱PLC用步进指令实现四节传送带的模拟控 ...

最新文章

  1. 警方披露Uber撞人案细节,解密Uber自动驾驶系统
  2. c语言printf输出格式顶格,c语言printf()输出格式[共6页].pdf
  3. 关于sklearn中“决策树是否可以转化为json并进行绘制”的调研
  4. 文件服务器 权限和安全,NTFS安全权限、文件共享服务器
  5. 关闭切换大小写提示_你不知道的iOS 13提示和技巧
  6. system.out输出到文件上
  7. Greg and Array CodeForces 296C 差分数组
  8. 啊哈算法——Java实现
  9. 中国系泊系统行业市场供需与战略研究报告
  10. fasterrcnn 总结
  11. STAMP学习和使用
  12. 计算机应用基础的知识探索,计算机应用基础的知识探索
  13. 【搜索引擎】Google打不开问题解决
  14. 怎么申请企业邮箱账号?企业邮箱怎么注册申请?
  15. 在Linux终端中自定义Bash配色和提示内容
  16. 什么是NoSql?为什么要使用NoSql?
  17. 高级linux内核软件工程师
  18. ai人工智能在手机的应用_常识在人工智能中仍然不常见
  19. 参加kaggle竞赛是怎样一种体验?
  20. 如何把照片背景变成透明?怎么把图片去白底变透明?

热门文章

  1. win7(64)与samba不兼容
  2. DebootstrapChroot
  3. bmw info source
  4. 四元数相关总结-未完
  5. 网络编程 UDP套接字
  6. 2017年上半年最受关注度的几大免费OA品牌
  7. Ubuntu软件的安装和使用
  8. MBProgressHUD
  9. PHPRPC for PHP
  10. nyoj-Color the necklace(Ploya定理 + 欧拉函数 + 扩展欧几里得(求逆元))