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

 

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

 

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

 

Loginview，用户界面部分：

 

Xml代码

1. <mx:Form id=”loginForm” x=”0″ y=”0″>  
2.           <mx:FormItem label=”Username:” >  
3.                <mx:TextInput id=”username” />  
4.            </mx:FormItem>  
5.            <mx:FormItem label=”Password:” >  
6.                <mx:TextInput id=”password” displayAsPassword=”true” />  
7.            </mx:FormItem>  
8.            <mx:FormItem direction=”horizontal” verticalGap=”15″ paddingTop=”5″ width=”170″>  
9.                <mx:Button id=”loginBtn” label=”Login” click=”login()”/>  
10.            </mx:FormItem>  
11.  </mx:Form>  

<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> 标签调用远程服务：

 

 

Xml代码

1. <mx:RemoteObject  id=”loginReq” destination=”flexmvcRO”>  
2.     <mx:method name=”login” result=”loginHandler(event)” fault=”mx.controls.Alert.show(event.fault.faultString)”>  
3.      <mx:arguments>  
4.       <userName>{username.text}</userName>  
5.       <password>{password.text}</password>  
6.      </mx:arguments>  
7.     </mx:method>  
8. </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方法中发送请求：

 

Xml代码

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

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

 

 

 

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

 

 

Xml代码

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

  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));
   }
  }

 

 

 

 

 

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

 

 

Xml代码

1. dispatchEvent(new LoginUserEvent(username.text));  

dispatchEvent(new LoginUserEvent(username.text));

 

 

 

 

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

 

 

Xml代码

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

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

 

 

 

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

 

 

Xml代码

1. import flash.events.Event;  
2.  public class LoginUserEvent extends Event  
3.  {  
4.   public static const LOGINUSEREVENT:String =”loginUser”;  
5.   public var loginUserName:String = “”;  
6.     
7.   public function LoginUserEvent(userName:String)  
8.   {  
9.    super(LOGINUSEREVENT, true, true);  
10.    this.loginUserName = userName;  
11.   }  
12.   override public function clone():Event {  
13.        
14.       return new LoginUserEvent(loginUserName);  
15.        
16.    }  

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的方法：

 

 

Xml代码

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

<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);
 }

 

 

 

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

 

 

Xml代码

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

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

 

 

 

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

 

Xml代码

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

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

 

 

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

 

Xml代码

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

<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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Flex 开发架构渐变 | Flex 开发架构(二): 中央管理－Flex Cen ...