本部分,将学习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 让操作发出登陆事件
package org.rianotes.CairngormSample.events { import com.adobe.cairngorm.control.CairngormEvent; import flash.events.Event; public class LoginEvent extends CairngormEvent { public static const LOGIN:String = "Login"; public var UserID:String; public var Password:String; public function LoginEvent(submittedUserID:String,submittedPassword:String) { UserID = submittedUserID; Password = submittedPassword; //透過super class 向監聽器發出此const super(LOGIN); } override public function clone():Event { return new LoginEvent(UserID,Password); } } }接着我们做一个对应的Command,在commands文件夹下建一个LoginCommand.as类,让它实现ICommand接口。
LoginCommand:接收到LoginEvent后,所需要做的处理。这里就负责将ModelLocator的workflowState值做改变。
代码如下:
package org.rianotes.CairngormSample.commands { import com.adobe.cairngorm.commands.ICommand; import com.adobe.cairngorm.control.CairngormEvent; import mx.controls.Alert; import org.rianotes.CairngormSample.events.LoginEvent; import org.rianotes.CairngormSample.model.ViewModelLocator; public class LoginCommand implements ICommand { public var model:ViewModelLocator = ViewModelLocator.getInstance(); public function LoginCommand(){ } public function execute(event:CairngormEvent):void{ var loginEvent:LoginEvent = event as LoginEvent; //COMMAND LOGIC if(loginEvent.UserID=="eggant" && loginEvent.Password=="eggant") { model.workflowState = ViewModelLocator.MAIN_SCREEN; }else { mx.controls.Alert.show("請確認帳號密碼是否正確!?"); } } } }接着我们在control文件夹下新增一个SampleController.as类,让它继承自FrontController。
SampleController:负责将LoginEvent对应到LoginCommand,就是接收到LoginEvent就指派给LoginCommand。
代码如下:
package org.rianotes.CairngormSample.control { import com.adobe.cairngorm.control.FrontController; //因為負責Mapping events與commands這兩塊所以先import進來 import org.rianotes.CairngormSample.events.*; import org.rianotes.CairngormSample.commands.*; //繼承於FrontController public class SampleController extends FrontController { public function SampleController() { this.initialize(); } public function initialize():void{ //FrontController主要就是用來做Event Mapping的動作 //接收到什麼Event訊息,然後該做什麼Command,由這邊控制 //ADD COMMANDS this.addCommand( LoginEvent.LOGIN, LoginCommand); } } }然后我们在LoginView.mxml作如下的修改,使用者点击Login Button就会dispatch LoginEvent
代码如下:
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="right" xmlns:components="org.rianotes.CairngormSample.view.components.*"> <mx:Script> <![CDATA[ import org.rianotes.CairngormSample.events.LoginEvent; import org.rianotes.CairngormSample.model.ViewModelLocator; [Bindable] private var model:ViewModelLocator = ViewModelLocator.getInstance(); private function login(e:MouseEvent):void{ var loginEvent:LoginEvent = new LoginEvent(ti_UserID.text,ti_Password.text); loginEvent.dispatch(); } ]]> </mx:Script> <mx:Form borderStyle="solid" width="100%"> <mx:FormItem label="UserID :" width="100%"> <mx:TextInput id="ti_UserID" width="100%"/> </mx:FormItem> <mx:FormItem label="Password: " width="100%"> <mx:TextInput id="ti_Password" width="100%"/> </mx:FormItem> </mx:Form> <mx:Button label="Login" click="login(event)" /> </mx:VBox>
最后在Main.mxml中加入SampleController
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:view="org.rianotes.CairngormSample.view.*" layout="absolute" xmlns:control="org.rianotes.CairngormSample.control.*"> <mx:Script> <![CDATA[ import org.rianotes.CairngormSample.model.ViewModelLocator; [Bindable] private var model:ViewModelLocator = ViewModelLocator.getInstance(); ]]> </mx:Script> <!--Cairngorm:FrontController :讓app中擁有SampleController--> <control:SampleController id="controller" /> <mx:ViewStack id="vsMain" width="100%" height="100%" selectedIndex="{model.workflowState}"> <!--第0個View--> <view:LoginView /> <!--第1個View--> <view:MainView /> </mx:ViewStack> </mx:Application>