本部分,将学习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>
分享到:
相关推荐
1 1 跟我StepByStep学FLEX教程------概述(原创) ...1 41 跟我StepByStep学FLEX教程------Cairngorm之Command部分 1 42 跟我StepByStep学FLEX教程------版权声明 1 43 跟我StepByStep学FLEX教程------贵在坚持
Flex开发框架cairngorm入门实例教程,有需要的人可以看一下
cairngorm整合spring+hibernate,里面描述的狠清晰,一看就懂
Flex MVC框架cairngorm 入门
Cairngorm本身並不是一個完整的企業應用,它只提供一個開發的體系,讓開發者遵循這個體系開發出一個結構清暫,解耦良好的程序代碼從而提高程序的維護和擴展。 Cairngorm這個體系包括以下六個部分: Business(业务...
博文链接:https://nealmi.iteye.com/blog/177370
Cairngorm例子Cairngorm例子Cairngorm例子Cairngorm例子
Cairngorm is the lightweight micro-architecture for Rich Internet Applications built in Flex or AIR. A collaboration of recognized design patterns, Cairngorm exemplifies and encourages best-practices ...
什么是Cairngorm,内部MVC结构,Cairngorm的各个部分
Controller(控制器):侦听Cairngorm事件并将其映射到Cairngorm Command; Command(命令):调用Cairngorm Delegate或其它Command,并更新Model; Delegate(委托):实例化RPC(远程过程调用)并将其结果返回给Command...
flex cairmgorm入门实例教程。
Cairngorm框架是优秀的框架,按照博士、硕士论文中说的主要在Cairngorm的event和command,每个事件都的编写一个对应的event和command,过于麻烦,造成代码量过多。我的解决办法: 1、用一个通用event代替所有。 2、...
cairngorm-2.2.2.swc Flex中的一款框架
cairngorm框架是flex界的mvc框架,传统的flex开发方法开发的代码难以维护。 这个是cairngorm的中文版入门讲解
绝对是Cairngorm框架入门的好Demo.下载后记得评分!
一个简单的cairngorm入门实例,结合了spring和ibatis。内含说明文档
Flex框架Cairngorm经典案例源码 完全掌握Cairngorm
cairngorm.swc供需要的朋友急用