在上一节,我们利用FrontController 去映射 Event与Command
在这一节我们主要针对Command这部分动作做介紹。在RIA应用程序中,不可或缺的部份就是跟后台服务器连接进行数据传递。Command通过Delegate去做Services的部份(包含Remoting,WebServices,…等)
延续上一个项目,我们修改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>