Cairngorm初学者入门教程 第四节－－通过 Model Locator 控制管理 Views
在这个部分，我们利用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
>