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

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

依次点击File>New>Flex Project 在弹出的New Flex Project对话框中输入项目名UserManager，点击Next 选择输出文件夹（默认就可以），Next 到源码路径和类库配置界面，选择Library Path tab，你可以看到默认导入的Flex类库，点击右侧的Add SWC按钮 在选择文件对话框中，找到Cairngorm.swc，点击OK 点击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 ModelLocatorprivate static var instance:UserManagerModelLocator;public function UserManagerModelLocator(enforcer:SingletonEnforcer) {if (enforcer == null) {throw new Error( "You Can Only Have One UserManagerModelLocator" );}}// Returns the Single Instancepublic static function getInstance() : UserManagerModelLocator {if (instance == null) {instance = new UserManagerModelLocator( new SingletonEnforcer() );}return instance;}//DEFINE YOUR VARIABLES HEREpublic var workflowState:uint = 0;// DEFINE VIEW CONSTATSpublic static const LOGIN_SCREEN:uint = 0;public static const MAIN_SCREEN:uint = 1;}}class SingletonEnforcer {}

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

  //DEFINE YOUR VARIABLES HEREpublic 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试试看)

查看更多 下一篇