Cairngorm: Views就是使用者最直觀看到的顯示，包含了button, panel… 等所組成的視圖，它從Model Locator中取得數(shù)據(jù)，通過(guò)Cairngorm Events與用戶(hù)產(chǎn)生互動(dòng)。

?

在這個(gè)部分，我們利用ModelLocator控制ViewStack來(lái)切換View。

首先我們先在ViewModelLocator.as 中加入

public var workflowState:uint = 0;

用來(lái)記錄ViewStack中，顯示哪個(gè)View。

再加入下面靜態(tài)常量，讓程序提高可讀性。

public static const LOGIN_SCREEN:uint = 0;
public static const MAIN_SCREEN:uint = 1;

?

整個(gè)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" );
}
}

// 回傳已存的變數(shù)
// Returns the Single Instance
public static function getInstance() : ViewModelLocator {
if (instance == null) {
instance = new ViewModelLocator( new SingletonEnforcer );
}
return instance;
}

//在下面定義你需要的共用變數(shù) - DEFINE YOUR VARIABLES HERE
public var contactbook:ArrayCollection = new ArrayCollection();
public var workflowState:uint = 0;

//在下面定義你需要的常數(shù) - 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 {}

?

然后我們?cè)陧?xiàng)目中加入：

一個(gè)Component

NamedBox.mxml - 用于顯示名稱(chēng)

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>

?

兩個(gè)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;

?

?

但是前者可讀性較高，在合作大型項(xiàng)目時(shí)需要這種方式。

?

最后再修改MXML application

Main.mxml - 主項(xiàng)目文件

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個(gè)View-->
<view:LoginView />

<!--第1個(gè)View-->
<view:MainView />
</mx:ViewStack>
</mx:Application>

?

轉(zhuǎn)載于:https://www.cnblogs.com/yangxiao24/archive/2010/05/14/1735049.html

總結(jié)

以上是生活随笔為你收集整理的(转)Cairngorm初学者入门教程 第四节－－通过 Model Locator 控制管理 Views的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。