Cairngorm示例：用户登录

1. Cairngorm简介

Cairngorm是一个Flex程序开发框架，基于MVC设计模式。
使用Cairngorm进行开发时我们一般涉及以下几个部件的开发：

ModelLocator：定义Model。ActionScript类，一般采用singleton模式实现，必须
              是Bindable的
ServiceLocator：定义与之进行通讯的服务器端的服务。MXML Component
Event：继承CairngormEvent
Command：处理Event的逻辑。实现ICommand接口
Controller：注册Event与Command之间的对应关系。继承FrontController
Delegate：服务器端服务的代理。ActionScript类

以用户输入数据、点击确定按钮，客户端与服务器通讯，然后根据处理结果进行相应操
作这一典型的处理过程为例，确定按钮事件中，用户数据被附加到Event上然后发布，
Cairngorm根据Controller中注册的信息，找到处理该Event的Command，该Command通过
ServiceLocator获得相应的远程服务，从Event中提取用户数据发送到远程服务，响应回
来后，Command根据响应数据，通过ModelLocator修改数据，由于ModelLocator和页面数
据是Bind在一起的，所以也就相应地修改了画面的显示。

2. 示例

以下是用户输入ID、password进行登录的示例代码，当ID、password都是“test”的时候，
登录成功，画面转到有主菜单的画面。

服务器端简单地实现了一个服务，代码如下：

public class UserService { public boolean isValid(String username, String password) { if ("test".equals(username) && "test".equals(password)) { return true; } else { return false; } } }

客户端代码的包结构如下（其中方括弧表示包），其中没有使用Delegate：
  login.mxml
  [business]
      Controller.as
  Services.mxml
  [commands]
      LoginCommand.as
  [events]
      LoginEvent.as
  [model]
      ModelLocator.as

ModelLocator代码如下：
package model { [Bindable] public class ModelLocator { static private var _instance : ModelLocator = null; public var showLoginPanel : Boolean = true; public var currentState : String = ""; static public function getInstance() : ModelLocator { if (_instance == null) { _instance = new ModelLocator(); } return _instance; } } }

ServiceLocator代码如下：

<?xml version="1.0" encoding="utf-8"?> <rds:ServiceLocator xmlns:rds="com.adobe.cairngorm.business.*" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:RemoteObject id="userService" destination="userServiceDestination" endpoint="http://localhost:8080/test-server/messagebroker/amf"> </mx:RemoteObject> </rds:ServiceLocator>

Event代码如下：

package business.events { import com.adobe.cairngorm.control.CairngormEvent; public class LoginEvent extends CairngormEvent { static public var EVENT_ID:String="login"; public var username : String = null; public var password : String = null; public function LoginEvent() { super(EVENT_ID); } } }

Command代码如下：

package business.commands { import com.adobe.cairngorm.business.ServiceLocator; import com.adobe.cairngorm.commands.ICommand; import com.adobe.cairngorm.control.CairngormEvent; import mx.rpc.events.ResultEvent; import mx.rpc.remoting.RemoteObject; import model.ModelLocator; import business.events.LoginEvent; public class LoginCommand implements ICommand { private var _modelLoc : ModelLocator = ModelLocator.getInstance(); private var _serviceLoc : ServiceLocator = ServiceLocator.getInstance(); public function execute(event:CairngormEvent):void { var loginEvent : LoginEvent = LoginEvent(event); var userService : RemoteObject = _serviceLoc.getRemoteObject("userService"); userService.addEventListener(ResultEvent.RESULT, onResults_login); userService.getOperation("isValid").send(loginEvent.username, loginEvent.password); } private function onResults_login(event:ResultEvent):void { var isValid : Boolean = Boolean(event.result); if (isValid) { _modelLoc.showLoginPanel = false; _modelLoc.currentState = "mainmenu"; } } } }

Controller代码如下：

package business { import com.adobe.cairngorm.control.FrontController; import business.events.LoginEvent; import business.commands.LoginCommand; public class Controller extends FrontController { public function Controller() { super(); this.addCommand(LoginEvent.EVENT_ID, LoginCommand); } } }

登录画面代码如下

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" fontFamily="Courier New" fontSize="12" currentState="{_model.currentState}"> <mx:states> <mx:State name="mainmenu"> <mx:RemoveChild target="{panel1}"/> <mx:AddChild position="lastChild"> <mx:MenuBar id="mainMenu" width="100%" x="0" y="0" labelField="@label"> <mx:XMLList> <menuitem label="数据录入"> <menuitem label="顾客信息登记" /> <menuitem label="印刷订单录入" /> </menuitem> <menuitem label="帮助"> <menuitem label="帮助" /> <menuitem label="关于" /> </menuitem> </mx:XMLList> </mx:MenuBar> </mx:AddChild> <mx:SetProperty name="layout" value="absolute"/> </mx:State> </mx:states> <mx:Panel width="370" height="192" layout="absolute" title="登録" id="panel1" visible="{_model.showLoginPanel}"> <mx:Label text="姓 名：" x="44" y="21" width="91"/> <mx:TextInput x="143" y="19" id="txtUsername" maxChars="32"/> <mx:Label x="44" y="51" text="密 码：" width="91"/> <mx:TextInput x="143" y="49" id="txtPassword" maxChars="32" displayAsPassword="true"/> <mx:Button x="70" y="118" label="登录" id="btnLogin" click="btnLogin_clicked()" width="92"/> <mx:Button x="170" y="118" label="重置" id="btnReset" click="btnReset_clicked()" width="92"/> </mx:Panel> <mx:Script> <!--[CDATA[ import model.ModelLocator; import business.events.LoginEvent; [Bindable] private var _model:ModelLocator=ModelLocator.getInstance(); private function btnLogin_clicked() : void { var event : LoginEvent = new LoginEvent(); event.username = txtUsername.text; event.password = txtPassword.text; event.dispatch(); } private function btnReset_clicked() : void { //略 } ]]--> </mx:Script> <rds:Services xmlns:rds="business.*"/> <router:Controller xmlns:router="business.*"/> </mx:Application>

其中需要注意的是Application的currentState和登录窗口的visible属性是bind到ModelLocator的。