Cairngorm 一个简单的例子（RemoteObject）

程序是用Flex做的一个输入界面，然后点击button，请求服务器，最后显示：xxx say：Hello，Word ！！！

此图是程序的运行结果

在写程序之前，先简单说说Cairngorm的架构，它包括了三个对象：

Model Locator ：承载了组件之间的所有的信息和数据的传递，这是一个Binable（可绑定）的对象；

Service Locator : 定义了数据源（Webservice， HTTPService， RemoteObject）之间通讯的数据源；

FrontController ：建立广播事件（Dispatch Event）和命令层（Command）之间的对应关系（Mapping）；

 

以下是相关代码：

根据Cairngorm流程图与Cairngorm类之间的关系

第一，我们要知道我们的数据（ValueObject，Model Locator）

package cairngorm.valueObject
{
 [Bindable]
 public class User
 {

  //在界面要显示的用户名
  public var userName:String;
  
  public function User() {}

 }
}

 

package cairngorm.model
{
 [Bindable]
 public class ModelLocator
 {

  //在界面绑定的用户名
  public var user:String = "";
  static private var _instance:ModelLocator = null;
  
  public function ModelLocator(){}
  
  static public function getInstance():ModelLocator
  {
   if(_instance == null){
    _instance = new ModelLocator();
   }
   
   return _instance;
  }

 }
}

 

第二，使用数据定义我们的界面（VIEWS）

<!--  一个输入框和一个发送的button  -->

InputView.mxml文件

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
 
 <mx:Label x="10" y="10" text="Input a userName" width="100%" fontSize="12" color="#2153E2"/>
 <mx:TextInput x="10" y="38" id="input"/>
 <mx:Button x="197" y="38" label="Send" id="sendBtn" click="sendHandler()"/>
 
 <mx:Script>
  <![CDATA[
   import cairngorm.valueObject.User;
   import cairngorm.business.event.SendEvent;
   
   private function sendHandler():void{
    var user:User = new User();
    user.userName = input.text;
    var sendEvent:SendEvent = new SendEvent(user); //Cairngorm Event
    sendEvent.dispatch();
   }
   
  ]]>
 </mx:Script>
 
</mx:Canvas>

 

<!-- 要显示username的Label -->

UserView.mxml文件

<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"/>

 

Cairngorm Event 代码：

package cairngorm.business.event
{
 import cairngorm.valueObject.User;
 
 import com.adobe.cairngorm.control.CairngormEvent;
 
 public class SendEvent extends CairngormEvent
 {
  public static var sendEvent:String = "SEND_EVENT";
  public var user:User; // ValueObject里的对象
  
  public function SendEvent(user:User)
  {
   super(sendEvent);
   this.user = user;
  }

 }
}

 

第三，使用FrontController将事件广播并映射到Command

package cairngorm.business.control
{
 import com.adobe.cairngorm.control.FrontController;
 import cairngorm.business.event.SendEvent;
 import cairngorm.business.commands.UserCommand;
 
 public class UserController extends FrontController
 {
  public function UserController()
  {
   super();
   addCommand(SendEvent.sendEvent, UserCommand);
  }

 }
}

 

第四，因为这里使用到了服务器，所以，Command映射到Delegate，delegate调用Service里的方法，此程序调用的是sayHelloWord方法

package cairngorm.business.service
{
 import cairngorm.valueObject.User;
 
 import com.adobe.cairngorm.business.ServiceLocator;
 
 import mx.rpc.IResponder;
 
 public class UserDelegate
 {
  private var service:Object;
  private var response:IResponder;
  
  public function UserDelegate(response:IResponder)
  {
   this.service = ServiceLocator.getInstance().getRemoteObject("myRemote"); //获取RemoteObject对象
   this.response = response;
  }
  
  public function displayUser(user:User):void
  {
   var call:Object = service.sayHelloWord(user.userName); // 调用服务器的方法
   call.addResponder(response);
  }

 }
}

 

<?xml version="1.0" encoding="utf-8"?>
<cairngorm:ServiceLocator xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:cairngorm="http://www.adobe.com/2006/cairngorm">
  
 <mx:RemoteObject id="myRemote" destination="helloWord"/>
 
</cairngorm:ServiceLocator>

上面的xml定义了程序将要调用的RemoteObject ，RemoteObject 所调用的Destination需要和remoting_config.xml文件中的Destination相一致。在此，Destination的值为“helloword”

 

以下是服务器的remoting-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service"
    class="flex.messaging.services.RemotingService">

    <adapters>
        <adapter-definition id="java-object"                          class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
    </adapters>

    <default-channels>
        <channel ref="my-amf"/>
    </default-channels>
   
    <destination id="helloWord">
     <properties>
      <source>flex.samples.helloWord.HelloWord</source>
     </properties>
    </destination>

</service>

 

最后，command调用服务器（Service）传回的结果更新Model Locator

package cairngorm.business.commands
{
 import cairngorm.business.event.SendEvent;
 import cairngorm.business.service.UserDelegate;
 import cairngorm.model.ModelLocator;
 import cairngorm.valueObject.User;
 
 import com.adobe.cairngorm.commands.ICommand;
 import com.adobe.cairngorm.control.CairngormEvent;
 
 import mx.rpc.IResponder;
 import mx.rpc.events.ResultEvent;
 
 public class UserCommand implements ICommand, IResponder
 {
  public function UserCommand(){}
  
  public function execute(event:CairngormEvent):void
  {
   var user:User = (event as SendEvent).user;
   var userDelegate:UserDelegate = new UserDelegate(this);
   userDelegate.displayUser(user);
  }
  
  public function result(data:Object):void
  {
   var _model:ModelLocator = ModelLocator.getInstance();
   _model.user = (data as ResultEvent).result.toString();
  }
  
  public function fault(data:Object):void
  {
   trace("fault ..........");
  }
 }
}

 以上的构架是怎样组合起来的呢，看看主页代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:views="cairngorm.view.*" xmlns:control="cairngorm.business.control.*"
    xmlns:service="cairngorm.business.service.*">
 
 <mx:Script>
  <![CDATA[
   
   import cairngorm.model.ModelLocator;
   
   [Bindable]
   var _model:ModelLocator = ModelLocator.getInstance();
   
  ]]>
 </mx:Script>
 
 <service:UserService id="myService"/>
 <control:UserController id="myController"/>
     
 <mx:VBox y="10" height="366" width="100%" horizontalCenter="11">
  <views:InputView  height="60"/>
  <views:UserView text="{_model.user}"/>
 </mx:VBox>
 
</mx:Application>

 

最后附上服务器代码和project的架构

package flex.samples.helloWord;

public class HelloWord {
 
 public String sayHelloWord(String name){
  System.out.println(name + " say: Hello, Word !!!!");
  return name + " say: Hello, Word !!!!";
 }

}

project架构