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

[u]Update:需要有一定的Flex基础[/u]
使用FlexBuilder新建一个Flex Project，解压Cairngorm2_2_1-bin.zip某个文件夹，添加Cairngorm.swc到项目Build Path。
[b]具体过程：[/b](附件Add Flex Library)
[list=1]
[*] 依次点击File>New>Flex Project
[*] 在弹出的New Flex Project对话框中输入项目名UserManager，点击Next
[*] 选择输出文件夹（默认就可以），Next
[*] 到源码路径和类库配置界面，选择Library Path tab，你可以看到默认导入的Flex类库，点击右侧的Add SWC按钮
[*] 在选择文件对话框中，找到Cairngorm.swc，点击OK
[*] 点击Finish
[/list]
[color=red]PS:你可以简单的把Cairngorm.swc放到项目的Libs目录下[/color] :wink:
建立文件夹结构（附件Package Structure）
新建 class UserManagerModelLocator 实现 IModelLocator 接口
[color=greens]net/imzw/UserManagerDemo/model/UserManagerModelLocator.as[/color]

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;

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

<?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>

[color=greens]net/imzw/UserManagerDemo/views/MainScreen.mxml[/color]

<?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试试看)
[flash=650,300]http://pjj0fw.blu.livefilestore.com/y1pRs9HshfDx450NjECCgVRn-I8U6D5aAxWlKMxkmoz81b6gbWc-1eYGoWPSbUXJP_8k06Vkj70_kUpWWoZJIJSqONuXRTTjieo/UserManagerDemo.swf?download[/flash]