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

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

http://houwei.javaeye.com/blog/219304

混沌未开，顾名思义就是匹萨店里面烘烤的色香味俱全的一个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));  

 

 

 

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

 

 

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.