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

本文链接：https://blog.csdn.net/jhgzhh_wxj/article/details/83671020

声明：本文转载地址为http://www.cnblogs.com/GFantasy/

在上一节，我们利用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.*" >  < 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  
 
   02{  
 
    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 );  
 
   
 
        }  
 
   
 
    }  
 
   33}

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

User - Value object

 
package org.rianotes.CairngormSample.vo  
 
   02{ 
 
    //.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(){  
 
   
 
        }  
 
   
 
    }  
 
   16}

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

 
package org.rianotes.CairngormSample.commands  
 
   02{ 
 
    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("連線錯誤")  
 
        }  
 
    }  
 
   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 >  < control:SampleController id ="controller" />  < business:Services id ="services" /> < mx:ViewStack id ="vsMain" width ="100%" height ="100%" selectedIndex ="{model.workflowState}" >  < view:LoginView />  < view:MainView /> </ mx:ViewStack > </ mx:Application >