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。

代码如下：

01 package org.rianotes.CairngormSample.business
02 {
03     import com.adobe.cairngorm.business.ServiceLocator;
04
05     import mx.rpc.IResponder;
06
07     import org.rianotes.CairngormSample.vo.User;
08
09     public class LoginDelegate {
10
11         private var responder:IResponder;
12         private var service:Object;
13
14         public function LoginDelegate(responder:IResponder) {
15
16             this.responder = responder;
17
18             //透過ServiceLocator取得連接Service的方式
19             this.service = ServiceLocator.getInstance().getRemoteObject("Remoting_Services");
20
21         }
22
23         public function login(loginAttempt:User):void{
24             //這部份要跟Server端Remoting Service 的名字相同傳入值型態也要相同
25             var call:Object = service.login(loginAttempt);
26
27             //處理伺服器的傳回值
28             call.addResponder( responder );
29
30         }
31
32     }
33 }

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

User - Value object
  
    
01 package org.rianotes.CairngormSample.vo
02 {
03     //.NET 那邊User.cs的 namespace
04     [RemoteClass(alias="Remoting.Objects.User")]
05     public class User
06     {
07         public var UserID:String;
08         public var Password:String;
09         public var Email:String;
10
11         public function User(){
12
13         }
14
15     }
16 }

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

01 package org.rianotes.CairngormSample.commands
02 {
03     import com.adobe.cairngorm.commands.ICommand;
04     import com.adobe.cairngorm.control.CairngormEvent;
05
06     import mx.controls.Alert;
07     import mx.rpc.IResponder;
08
09     import org.rianotes.CairngormSample.business.LoginDelegate;
10     import org.rianotes.CairngormSample.events.LoginEvent;
11     import org.rianotes.CairngormSample.model.ViewModelLocator;
12
13     //加入IResponder 的Interfac才會呼叫result,falut ↓↓↓
14     public class LoginCommand implements ICommand , IResponder{
15
16         public var model:ViewModelLocator = ViewModelLocator.getInstance();
17
18         public function LoginCommand(){
19
20         }
21
22         //ICommand Interface function
23         public function execute(event:CairngormEvent):void{
24
25             var loginEvent:LoginEvent = event as LoginEvent;
26
27             var delegate:LoginDelegate = new LoginDelegate(this);
28             delegate.login(loginEvent.loginAttempt);
29
30         }
31
32         //delegate.login 成功取得回傳時做的function
33         public function result( event :Object):void{
34             if(event.result == true)
35             {
36                 model.workflowState = ViewModelLocator.MAIN_SCREEN;
37             }else
38             {
39                 mx.controls.Alert.show("請確認帳號密碼是否正確！？");
40             }
41         }
42
43         //delegate.login 失敗時做的function
44         public function fault( event :Object):void{
45             trace("連線錯誤")
46         }
47     }
48 }

 

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
     
       >