(转)Cairngorm初学者入门教程 第五节－－Cairngorm中Event,Command与FrontController的关系

本部分，将学习Cairngorm的核心控制流程：

  • Events:通过使用者操作View所产生的事件，或其他设计所产生的事件。
  • Front Controller:Front Controller 用来注册Command与Events对应，接收Cairngorm Events并将他对应到Cairngorm Commands
  • Command: 操作Cairngorm Business以及呼叫Cairngorm Delegates，这些回传所取得的资料Command会再将它更新到Model Locator

首先介绍Cairngorm 的基本事件流程

使用者在操作View的过程会发出Event，然后由Front Controller来映射指派给对应的Command，Command做完运算处理后会更新ModelLocator的数据，然后View就会更新显示內容。

Front Controller在这里的角色有点像是Manager，专门负责嘴上工夫的，喔，不，其实是接收Event事件，然后指派给Command去做。

有点像是客户(user)跟业务(view)谈好，然后业务去告诉(Dispatch Event)Manager，然后Manager就很简单的说，丟给阿宅工程师(Command)去处理吧。阿宅工程师很辛苦的处理好后，把结果传给(Model)，然后业务(view)就拿著结果去跟客户(User)讲，你看做好了，感觉怎样？

在实现这个项目上，我们首先建立好项目架构

在项目中建立events,control,commands三个文件夹。

在events文件夹中我们新增一个LoginEvent.as类，让它继承自CairngormEvent.

LoginEvent 让操作发出登陆事件
LoginEvent.as

view source
print?
01 package org.rianotes.CairngormSample.events
02 {
03     import com.adobe.cairngorm.control.CairngormEvent;
04       
05     import flash.events.Event;
06       
07     public class LoginEvent extends CairngormEvent {
08           
09         public static const LOGIN:String = "Login";
10           
11         public var UserID:String;
12         public var Password:String;
13           
14         public function LoginEvent(submittedUserID:String,submittedPassword:String) {
15               
16             UserID = submittedUserID;
17             Password = submittedPassword;
18               
19             //透過super class 向監聽器發出此const
20             super(LOGIN);   
21         }
22           
23         override public function clone():Event {
24             return new LoginEvent(UserID,Password);
25         }
26           
27     }
28 }

接着我们做一个对应的Command，在commands文件夹下建一个LoginCommand.as类，让它实现ICommand接口。

LoginCommand:接收到LoginEvent后，所需要做的处理。这里就负责将ModelLocator的workflowState值做改变。

代码如下：

view source
print?
01 package org.rianotes.CairngormSample.commands
02 {
03     import com.adobe.cairngorm.commands.ICommand;
04     import com.adobe.cairngorm.control.CairngormEvent;
05    
06     import mx.controls.Alert;
07    
08     import org.rianotes.CairngormSample.events.LoginEvent;
09     import org.rianotes.CairngormSample.model.ViewModelLocator;
10    
11     public class LoginCommand implements ICommand {
12    
13         public var model:ViewModelLocator = ViewModelLocator.getInstance();
14    
15         public function LoginCommand(){
16    
17         }
18    
19         public function execute(event:CairngormEvent):void{
20             var loginEvent:LoginEvent = event as LoginEvent;
21    
22             //COMMAND LOGIC
23             if(loginEvent.UserID=="eggant" && loginEvent.Password=="eggant")
24             {
25                 model.workflowState = ViewModelLocator.MAIN_SCREEN;
26             }else
27             {
28                 mx.controls.Alert.show("請確認帳號密碼是否正確！？");
29             }
30         }
31    
32     }
33 }

 

接着我们在control文件夹下新增一个SampleController.as类，让它继承自FrontController。

SampleController:负责将LoginEvent对应到LoginCommand，就是接收到LoginEvent就指派给LoginCommand。

代码如下：

view source
print?
01 package org.rianotes.CairngormSample.control
02 {
03     import com.adobe.cairngorm.control.FrontController;
04    
05     //因為負責Mapping events與commands這兩塊所以先import進來
06     import org.rianotes.CairngormSample.events.*;
07     import org.rianotes.CairngormSample.commands.*;
08    
09     //繼承於FrontController
10     public class SampleController extends FrontController {
11    
12         public function SampleController() {
13             this.initialize();
14         }
15    
16         public function initialize():void{
17    
18             //FrontController主要就是用來做Event Mapping的動作
19             //接收到什麼Event訊息，然後該做什麼Command，由這邊控制
20    
21             //ADD COMMANDS
22             this.addCommand( LoginEvent.LOGIN, LoginCommand);
23    
24         }
25    
26     }
27 }

 

然后我们在LoginView.mxml作如下的修改，使用者点击Login Button就会dispatch LoginEvent

代码如下:

view source
print?
01 <?xml version="1.0" encoding="utf-8"?>
02 <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
03 horizontalAlign="right" xmlns:components="org.rianotes.CairngormSample.view.components.*">
04     <mx:Script>
05         <![CDATA[
06             import org.rianotes.CairngormSample.events.LoginEvent;
07             import org.rianotes.CairngormSample.model.ViewModelLocator;
08             [Bindable]
09             private var model:ViewModelLocator = ViewModelLocator.getInstance();
10    
11             private function login(e:MouseEvent):void{
12                 var loginEvent:LoginEvent = new LoginEvent(ti_UserID.text,ti_Password.text);
13                 loginEvent.dispatch();    
14             }
15    
16         ]]>
17     </mx:Script>
18     <mx:Form borderStyle="solid" width="100%">
19         <mx:FormItem label="UserID :" width="100%">
20              <mx:TextInput id="ti_UserID" width="100%"/>
21         </mx:FormItem>
22    
23         <mx:FormItem label="Password: " width="100%">
24             <mx:TextInput id="ti_Password" width="100%"/>
25         </mx:FormItem>
26    
27     </mx:Form>
28     <mx:Button label="Login" click="login(event)" />
29 </mx:VBox>

 

最后在Main.mxml中加入SampleController

代码如下：

view source
print?
01 <?xml version="1.0" encoding="utf-8"?>
02 <mx:Application 
03  xmlns:mx="http://www.adobe.com/2006/mxml" 
04  xmlns:view="org.rianotes.CairngormSample.view.*"
05  layout="absolute" xmlns:control="org.rianotes.CairngormSample.control.*">
06    
07     <mx:Script>
08         <![CDATA[
09             import org.rianotes.CairngormSample.model.ViewModelLocator;
10             [Bindable]
11             private var model:ViewModelLocator = ViewModelLocator.getInstance();
12         ]]>
13     </mx:Script>
14    
15     <!--Cairngorm:FrontController :讓app中擁有SampleController-->
16     <control:SampleController id="controller" />
17    
18     <mx:ViewStack id="vsMain" width="100%" height="100%" selectedIndex="{model.workflowState}">  
19    
20         <!--第0個View-->
21         <view:LoginView />
22        
23         <!--第1個View-->
24         <view:MainView />
25   
26     </mx:ViewStack> 
27 </mx:Application>

posted on 2010-05-14 02:08  晓光  阅读(456)  评论(0)    收藏  举报

导航