Cairngorm初学者入门教程 第六节－－Cairngorm中Command利用Delegate与Service连接

在上一节，我们利用FrontController 去映射 Event与Command

在这一节我们主要针对Command这部分动作做介紹。在RIA应用程序中，不可或缺的部份就是跟后台服务器连接进行数据传递。Command通过Delegate去做Services的部份(包含Remoting,WebServices,…等)

• Command: 操作Cairngorm Business以及呼叫Cairngorm Delegates，这些回传所取得的资料Command会再将它更新到Model Locator
• Delegate: 由Command所产生，将远程呼叫(RPC:remote procedure calls[HTTP, Web Services, etc])实例化，并将结果传回给Command。
• Service:用来定义连接Server端的呼叫(RPC:remote procedure calls[HTTP, Web Services, etc])，来获取远程数据。 
  在Delegate中我们会作一个call service的部份，而Services相关的定义与设定，就纪录在Service Locator。

  延续上一个项目，我们修改LoginCommand的部份要通过Delegate去做Remoting，呼叫Server端 login function，去数据库查看判断账号密码是否正确。

  所以我们先在项目中新增business文件夹。

  

  新增两个文件，一个是Service.mxml组件。用来定义纪录可以使用的Services。

  因为组件的类型不是內建，所以先随便选一个再改mxml的內容
  这里示范的是使用搭配.NET Remoting的Freeware ” FluorineFx “，可以参考這裡。

  代码如下：

  <?xml version="1.0" encoding="utf-8"?>
  <cairngorm:ServiceLocator
   xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:cairngorm="com.adobe.cairngorm.business.*">
   
      <!-- Login Service -->
      <mx:RemoteObject
       id="Remoting_Services"
       source="Remoting.Services"
       destination="fluorine"
       showBusyCursor="true">
          <mx:method name="login" />
      </mx:RemoteObject>   
   
  </cairngorm:ServiceLocator>

  另一个是LoginDelegate.as类，用来连接Service，并将取得的资料回传给Command。

  代码如下：

  package org.rianotes.CairngormSample.business
  { 
      import com.adobe.cairngorm.business.ServiceLocator;
    
      import mx.rpc.IResponder;
    
      import org.rianotes.CairngormSample.vo.User;
    
      public class LoginDelegate {
    
          private var responder:IResponder;
          private var service:Object;
    
          public function LoginDelegate(responder:IResponder) {
    
              this.responder = responder;
    
              //透過ServiceLocator取得連接Service的方式
              this.service = ServiceLocator.getInstance().getRemoteObject("Remoting_Services");
    
          }
    
          public function login(loginAttempt:User):void{
              //這部份要跟Server端Remoting Service 的名字相同傳入值型態也要相同
              var call:Object = service.login(loginAttempt);
    
              //處理伺服器的傳回值
              call.addResponder( responder );
    
          }
    
      }
  }

  
  为了传输账号和密码，所以也要针对value object作修改，User------Value object

  package org.rianotes.CairngormSample.vo
  {
      //.NET 那邊User.cs的 namespace
      [RemoteClass(alias="Remoting.Objects.User")]
      public class User
      {
          public var UserID:String;
          public var Password:String;
          public var Email:String;
    
          public function User(){
    
          }
    
      }
  }

  
  然后在LoginCommand中加入Responder要用到的result,fault function
  代码如下：
  

  package org.rianotes.CairngormSample.commands
  {
      import com.adobe.cairngorm.commands.ICommand;
      import com.adobe.cairngorm.control.CairngormEvent;
    
      import mx.controls.Alert;
      import mx.rpc.IResponder;
    
      import org.rianotes.CairngormSample.business.LoginDelegate;
      import org.rianotes.CairngormSample.events.LoginEvent;
      import org.rianotes.CairngormSample.model.ViewModelLocator;
    
      //加入IResponder 的Interfac才會呼叫result,falut ↓↓↓            
      public class LoginCommand implements ICommand , IResponder{
    
          public var model:ViewModelLocator = ViewModelLocator.getInstance();
    
          public function LoginCommand(){
    
          }
    
          //ICommand Interface function
          public function execute(event:CairngormEvent):void{
    
              var loginEvent:LoginEvent = event as LoginEvent;
        
              var delegate:LoginDelegate = new LoginDelegate(this);
              delegate.login(loginEvent.loginAttempt);
    
          }
    
          //delegate.login 成功取得回傳時做的function
          public function result( event :Object):void{
              if(event.result == true)
              {
                  model.workflowState = ViewModelLocator.MAIN_SCREEN;
              }else
              {
                  mx.controls.Alert.show("請確認帳號密碼是否正確！？");
              }
          }
    
          //delegate.login 失敗時做的function
          public function fault( event :Object):void{
              trace("連線錯誤")
          }
      }
  }

  
  LoginView.mxml也要做部分修改，代码如下：
  

  <?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.vo.User;
              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 user:User = new User();
                  user.UserID = ti_UserID.text;
                  user.Password = ti_Password.text;
   
                  var loginEvent:LoginEvent = new LoginEvent(user);
   
                  //發送Login Event
                  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中加入Service
  代码如下：
  

  <?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.*" xmlns:business="org.rianotes.CairngormSample.business.*">
   
      <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" />
   
      <!--Cairngorm Services-->
      <business:Services id="services" />
   
      <mx:ViewStack id="vsMain" width="100%" height="100%"
       selectedIndex="{model.workflowState}">  
   
          <!--第0個View-->
          <view:LoginView />
   
          <!--第1個View-->
          <view:MainView />
      </mx:ViewStack> 
  </mx:Application>