(转)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>

转载于:https://www.cnblogs.com/yangxiao24/archive/2010/05/14/1735068.html