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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。