一个简单的Cairngorm框架例子

这节主要是代码的讲解，在了解了Cairngorm框架的原理之后，结合例子讲很快的掌握框架的使用。

      1.   View（主界面，或调用界面）：mxml文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
xmlns:control="CairngormDemo.business.control.*">               //  注意这个导入不能少

       <mx:Script>
<![CDATA[
import CairngormDemo.business.events.LoginEvent;
import CairngormDemo.vo.UserVO;
import CairngormDemo.model.LoginModelLocator;

import mx.controls.Alert;
import com.adobe.cairngorm.control.CairngormEventDispatcher;

private function LoginHandle():void {
if (this.username.text.length == 0 || this.password.text == null){
Alert.show("用户名不能为空！","错误");
} else if (this.password.text.length == 0 || this.password.text == null){
Alert.show("密码不能为空！","错误");
} else {
var user:UserVO = new UserVO(); 
user.username = this.username.text;
user.password = this.password.text;

var ev:LoginEvent = new LoginEvent(user);                       //  触发事件（有一个参数）
CairngormEventDispatcher.getInstance().dispatchEvent(ev);            //  通 过Cairngorm的事件跳转
                       }
}
]]>
</mx:Script>

       <control:LoginControl id="front"/>                 // 这个也不能少，跟最上面的那个导入的包一致
 
<mx:Panel width="350" height="250" layout="absolute" horizontalCenter="25" verticalCenter="18" fontSize="13">
<mx:Label x="39" y="25" text="用户名："/>
<mx:Label x="39" y="73" text="密　码："/>
<mx:TextInput x="119" y="23" id="username"/>
<mx:TextInput x="119" y="71" id="password" displayAsPassword="true"/>

<mx:Button x="39" y="121" label="登录" fontSize="12" click="LoginHandle()"/>
</mx:Panel>
</mx:Application>

       2.  当通过CairngormEventDispatcher.getInstance().dispatchEvent(ev);时间分发后，由Fornt Controller进行捕获，并讲这个事件与对应处理的命令进行映射，代码如下：

       package CairngormDemo.business.control{

import com.adobe.cairngorm.control.FrontController; 
import CairngormDemo.business.commands.LoginCommand;
import CairngormDemo.business.events.LoginEvent;

  public class LoginControl extends FrontController {              //  继承于ForntController
                      public function LoginControl(){
super();
 addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);   // 通过addCommand方法映射
                      }
}
}

 

       3.   监听登录的事件，代码如下：

       package CairngormDemo.business.events {

import CairngormDemo.vo.UserVO;
import com.adobe.cairngorm.control.CairngormEvent;

  public class LoginEvent extends CairngormEvent {              //  注意不是继承一般的Event事件
                       public static const LOGIN_EVENT:String="LoginEvent";
public var user:UserVO = null;

public function LoginEvent(user:UserVO) {
super(LOGIN_EVENT);
this.user = user;                    //  保存参数
}
}
}

 

       4.   每个事件对应一个命令，代码如下：

      package CairngormDemo.business.commands {
import CairngormDemo.business.delegates.UserDelegate;
import CairngormDemo.business.events.LoginEvent;

import com.adobe.cairngorm.commands.Command;
import com.adobe.cairngorm.control.CairngormEvent;
import mx.rpc.IResponder;

public class LoginCommand implements Command, IResponder { 
public function execute(event:CairngormEvent):void{             //  通过这个方法接受事件
   
var userDelegate:UserDelegate = new UserDelegate(this);   // 委托给UserDelegate 处理具体
                            var loginEvent:LoginEvent = event as LoginEvent;
userDelegate.Login(loginEvent.user);         //  调用委托中的方法，这里有一个参数

                     }

// 返回的结果进行处理    
public function result(data:Object):void{
var result:String=data.toString();
if(result=="OK"){    
Alert.show("登录成功！");
} else {    
Alert.show("登录失败！");
}    
}    

//  处理过程出错时的处理    
public function fault(info:Object):void{    
Alert.show(info+"");    
}   

              } 
}

      注：上面的代码是在与后台进行交互的时候需要委托处理，在不需要与后台交互时，直接使用execute方法进行处理业务。

 

      5.  代理主要是通过Services来跟后台交互，此处只是简单的处理了一下，如下：

      package CairngormDemo.business.delegates {
import mx.rpc.IResponder;
import CairngormDemo.model.LoginModelLocator;
import CairngormDemo.vo.UserVO;

public class UserDelegate {

private var responder:IResponder;

public function UserDelegate(responder:IResponder) {
this.responder = responder;   
                   }

public function Login(user:UserVO):void {          //  获取事件传递的参数，然后进行简单的验证
                         var result:Object;
if (user.username=="lzc" && user.password=="123"){    
result="OK";    
} else {    
result="Fail"    
}    
                         responder.result(result);
}
}
}

     

      6.  剩下一个VO类了，只是一个简单的类，存放了用户名、密码两个属性。

      package CairngormDemo.vo {
public class UserVO {
public var username:String;
public var password:String;
}
}

 

      7.  除了上面讲述的，还剩下一些这个列子没有用到，比如：ModelCrontal，它是一个单例模式，保证系统中只有一个类的实例，节省了内存资源。此外， 它还保存了将在系统用到的一些结构，比如：存放临时数据的实体等等。

     package CairngormDemo.model {
import com.adobe.cairngorm.model.ModelLocator;
import CairngormDemo.vo.UserVO;

[Bindable]
public class LoginModelLocator implements ModelLocator {
private static var loginModelLocator:LoginModelLocator;         //  私有
  
public static function getInstance():LoginModelLocator {        //  单例模式
                          if (loginModelLocator == null) {
loginModelLocator = new LoginModelLocator();
}
return loginModelLocator;
}

public var NowUser:UserVO = new UserVO();     //  用于保存当前登录用户信息的变量
            }
}       

    

      项目的结构：

     

      这就是一个简单的采用Cairngorm框架的登录系统，利用突出了框架的优势，将各个模块之间的解耦，很好的提高了软件的质量，同时，它更加清晰了程序 的层次，让我们一目了然。