Cairngorm框架Demo

接着一个简单的Cairngorm框架例子_01，这节主要是代码的讲解，在了解了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框架的登录系统，利用突出了框架的优势，将各个模块之间的解耦，很好的提高了软件的质量，同时，它更加清晰了程序的层次，让我们一目了然。