Cairngorm初学者入门教程 第四节－－通过 Model Locator 控制管理 Views
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 Constructorclass 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>?