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 Constructor
class 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>

 

 

最后跑跑看吧！