Flex 开发架构(一): 混沌未开－Flex-all-in-one

混沌未开，顾名思义就是匹萨店里面烘烤的色香味俱全的一个pizza大饼，在一个面饼的底板上，混合所有的原料。 Lets make Pizza!

 

Flex与生俱来的是它的事件驱动（event-driven）的特点。就是说，Flex可以使用它的标签做到任何事情。因此开发一个Flex应用程序最简单，最基础的方法就是使用Flex标签，先来看看代码。

 

Loginview，用户界面部分：

 

<mx:Form id=”loginForm” x=”0″ y=”0″>
          <mx:FormItem label=”Username:” >
               <mx:TextInput id=”username” />
           </mx:FormItem>
           <mx:FormItem label=”Password:” >
               <mx:TextInput id=”password” displayAsPassword=”true” />
           </mx:FormItem>
           <mx:FormItem direction=”horizontal” verticalGap=”15″ paddingTop=”5″ width=”170″>
               <mx:Button id=”loginBtn” label=”Login” click=”login()”/>
           </mx:FormItem>
 </mx:Form>

 

 

 

使用 <mx:RemoteObject> 标签调用远程服务：

 

<mx:RemoteObject  id=”loginReq” destination=”flexmvcRO”>
    <mx:method name=”login” result=”loginHandler(event)” fault=”mx.controls.Alert.show(event.fault.faultString)”>
     <mx:arguments>
      <userName>{username.text}</userName>
      <password>{password.text}</password>
     </mx:arguments>
    </mx:method>
</mx:RemoteObject>

 

现在，在login方法中发送请求：

 

   if(Validator.validateAll(validators).length == 0){
     loginReq.login.send();
   }  

 

 

在发送请求之后，需要建立一个返回结果的处理方法：

 

  private function  loginHandler(event:ResultEvent):void{
    var isLogin:Boolean = event.result as Boolean;
   if(isLogin){
    this.parentApplication.viewStack.selectedIndex=1;
    dispatchEvent(new LoginUserEvent(username.text));
   }
  }

 

 

 

最后，在页面之间建立联系，在这里我使用播送事件：

 

dispatchEvent(new LoginUserEvent(username.text));

 

 

播送用户自定义的事件，就必须在代码最前面写入下述的元标签代码：

 

 <mx:Metadata>
     [Event(name="loginUser", type="flash.events.Event")]
</mx:Metadata

 

 

然后，建立用户自定义的事件LoginUserEvent.as:

 

import flash.events.Event;
 public class LoginUserEvent extends Event
 {
  public static const LOGINUSEREVENT:String =”loginUser”;
  public var loginUserName:String = “”;
  
  public function LoginUserEvent(userName:String)
  {
   super(LOGINUSEREVENT, true, true);
   this.loginUserName = userName;
  }
  override public function clone():Event {
     
      return new LoginUserEvent(loginUserName);
     
   }

 

 

当登录成功后，密友列表页面将会显示，BuddyListVew.mxml：

重要的是在列表代码中，首先要监听LoginUserEvent，因此要创建一个preinitialize的方法：

 

<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” title=”Buddy List of {loginUserName}”     preinitialize=”init()” width=”500″ height=”320″>
   private function init():void{
   this.parentApplication.addEventListener(LoginUserEvent.LOGINUSEREVENT, getUserName);
 }

 

 

然后完成事件监听的管理程序：

 

private function getUserName(event:LoginUserEvent):void{
loginUserName = event.loginUserName;
loginReq.getAllFriends.send();
}

 

 

发送获得全部密友列表的请求，并且创建对应的管理方法：

   private function getAllFriendsHandler(event:ResultEvent):void{
   mybuddyList = event.result as ArrayCollection;
   
  }

 

在代码中，必须包含定义远程对象的标签：

<mx:RemoteObject  id=”loginReq” destination=”flexmvcRO”>
    <mx:method name=”getAllFriends” result=”getAllFriendsHandler(event)” fault=”mx.controls.Alert.show(event.fault.faultString)”>
     <mx:arguments>
      <userName>{loginUserName}</userName>
     </mx:arguments>
    </mx:method>
</mx:RemoteObject>

  

 

 

 

 

 

使用Flex标签完成程序方法非常简单，并且对于简单的系统来说， 也是非常有效，其商务逻辑层也不复杂。但在实际的应用中，并非只存在这样的项目，相反，实际工作中往往需要大量的远程对象的通讯。

 

好了，来看看：中央管理－Flex Central Management.