Flex之使用Cairngorm（2） - 使用ModelLocator

Update:需要有一定的Flex基础
使用FlexBuilder新建一个Flex Project，解压Cairngorm2_2_1-bin.zip某个文件夹，添加Cairngorm.swc到项目Build Path。
具体过程：(附件Add Flex Library)

1. 依次点击File>New>Flex Project
2. 在弹出的New Flex Project对话框中输入项目名UserManager，点击Next
3. 选择输出文件夹（默认就可以），Next
4. 到源码路径和类库配置界面，选择Library Path tab，你可以看到默认导入的Flex类库，点击右侧的Add SWC按钮
5. 在选择文件对话框中，找到Cairngorm.swc，点击OK
6. 点击Finish

PS:你可以简单的把Cairngorm.swc放到项目的Libs目录下
建立文件夹结构（附件Package Structure）
新建 class UserManagerModelLocator 实现 IModelLocator 接口
net/imzw/UserManagerDemo/model/UserManagerModelLocator.as

package net.imzw.UserManagerDemo.model{
	import com.adobe.cairngorm.model.IModelLocator;
	
	import mx.collections.ArrayCollection;

	public class UserManagerModelLocator implements IModelLocator{
		// Single Instance of Our ModelLocator
		private static var instance:UserManagerModelLocator;
		public function UserManagerModelLocator(enforcer:SingletonEnforcer) {
		if (enforcer == null) {
				throw new Error( "You Can Only Have One UserManagerModelLocator" );
			}
		}
		// Returns the Single Instance
		public static function getInstance() : UserManagerModelLocator {
			if (instance == null) {
				instance = new UserManagerModelLocator( new SingletonEnforcer() );
			}
			return instance;
		}
		//DEFINE YOUR VARIABLES HERE
		public var workflowState:uint = 0;
		
		// DEFINE VIEW CONSTATS
		public static const LOGIN_SCREEN:uint = 0;
		public static const MAIN_SCREEN:uint = 1;
	}
}
class SingletonEnforcer {}

这里用了一个设计模式：单例模式，即整个应用程序只有一个该类的实例，目的很明显--共享数据。也就是这里

  //DEFINE YOUR VARIABLES HERE
		public var workflowState:uint = 0;

这些是共享的，稍后我再介绍他们。
新建两个视图组件
net/imzw/UserManagerDemo/views/LoginForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import net.imzw.UserManagerDemo.model.UserManagerModelLocator;
		
			import mx.controls.Alert;
			
			private var modelLocator:UserManagerModelLocator
 = UserManagerModelLocator.getInstance();
			
			private function login(e:MouseEvent):void{
				if( loginNameTextInput.text == "imzw" 
&& passwordTextInput.text == "imzw" ){
					modelLocator.workflowState = UserManagerModelLocator.MAIN_SCREEN;
				}
			} 
		]]>
	</mx:Script>
	<mx:Form defaultButton="{loginButton}">
		<mx:FormHeading label="Please Login" />
		<mx:FormItem label="LoginName">
			<mx:TextInput id="loginNameTextInput" />
		</mx:FormItem>
		<mx:FormItem label="Password">
			<mx:TextInput id="passwordTextInput" displayAsPassword="true"/>
		</mx:FormItem>
		<mx:HBox horizontalAlign="right" width="100%">
			<mx:Button id="loginButton" click="{login(event)}" label="Login"/>
		</mx:HBox>
	</mx:Form>
</mx:VBox>

net/imzw/UserManagerDemo/views/MainScreen.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import net.imzw.UserManagerDemo.model.UserManagerModelLocator;
			[Bindable]
			private var modelLocator:UserManagerModelLocator
 = UserManagerModelLocator.getInstance();
		]]>
	</mx:Script>
	<mx:Button label="Logout" id="logoutButton" 
		click="{modelLocator.workflowState = UserManagerModelLocator.LOGIN_SCREEN }"/>
</mx:VBox>

同时在应用程序主文件中写入如下代码：
UserManagerDemo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" xmlns:view="net.imzw.UserManagerDemo.views.*"> 
	<mx:Script>
		<![CDATA[
			import net.imzw.UserManagerDemo.model.UserManagerModelLocator;
			import mx.controls.Alert;
			
			[Bindable]
			private var modelLocator:UserManagerModelLocator = UserManagerModelLocator.getInstance();
		]]>
	</mx:Script>
	
	<mx:ViewStack width="100%" height="100%" 
		selectedIndex="{modelLocator.workflowState}">
		<view:LoginForm />
		<view:MainScreen />
	</mx:ViewStack>
</mx:Application>

OK，Run Application。
你将看见 (输入用户名imzw密码imzw试试看)