使用代码分离构建自定义组件

使用代码分离构建自定义组件

下面以一个TitleWindow的自定义组件为例：

1. 传统的创建自定义组件，是基于TitleWindow，建立一个mxml。 

Login.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.managers.PopUpManager;
   protected function submit_clickHandler(event:MouseEvent):void
   {
    var usernameValue:String = username.text;
    var passwordValue:String = password.text;
    if(usernameValue == "" || passwordValue == "") 
    {
     Alert.show("用户名或密码不能为空", "提示");
    }
    else if(usernameValue == "root" && passwordValue == "123") 
    {
     Alert.show("登录成功", "提示");
     PopUpManager.removePopUp(this);
    }
    else
    {
     Alert.show("用户名或密码不正确，请重新输入", "提示");
    }
   }
   
   protected function closeWindow_clickHandler(event:MouseEvent):void
   {
    navigateToURL(new URLRequest('javascript:window.opener=null;window.close()'),'_self');
   }
   
  ]]>
 </fx:Script>
 <s:Form>
  <s:FormHeading label="用户登录"/>
  <s:FormItem label="用户名：">
   <s:TextInput id="username"/>
  </s:FormItem>
  <s:FormItem label="密码：">
   <s:TextInput id="password"
       displayAsPassword="true"/>
  </s:FormItem>
 </s:Form>
 <s:Button id="submit" 
     x="25" y="168" 
     label="登录"
     click="submit_clickHandler(event)"/>
 <s:Button id="closeWindow" 
     x="138" y="168" 
     label="取消"
     click="closeWindow_clickHandler(event)"/>
</s:TitleWindow>

这样，使用一个script标签来编写as代码，mxml代码和as代码混淆在一起，比较混乱，维护困难，看着也比较乱。

2. 有了缺点才有了解决方案，下面是通过代码分离的方式定义自定义。

1) 首先创建一个as文件，LoginAS.as

package components.control
{
 import flash.events.MouseEvent;
 import flash.net.URLRequest;
 import flash.net.navigateToURL;
 
 import mx.controls.Alert;
 import mx.events.FlexEvent;
 import mx.managers.PopUpManager;
 
 import spark.components.Button;
 import spark.components.Form;
 import spark.components.TextInput;
 import spark.components.TitleWindow;
 
 public class LoginAS extends TitleWindow
 {
  public var username:TextInput;
  public var password:TextInput;
  public var submit:Button;
  public var closeWindow:Button;
  
  /**
   * 构造器
   */ 
  public function Login()
  {
   super();
   addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
  }
  
  /**
   * 组件初始化完成后调用的函数
   */ 
  protected function creationCompleteHandler(event:FlexEvent):void
  {
   submit.addEventListener(MouseEvent.CLICK, submit_clickHandler);
   closeWindow.addEventListener(MouseEvent.CLICK, closeWindow_clickHandler);
  }
  
  /**
   * 登录校验
   */ 
  protected function submit_clickHandler(event:MouseEvent):void
  {
   var usernameValue:String = username.text;
   var passwordValue:String = password.text;
   if(usernameValue == "" || passwordValue == "") 
   {
    Alert.show("用户名或密码不能为空", "提示");
   }
   else if(usernameValue == "root" && passwordValue == "123") 
   {
    Alert.show("登录成功", "提示");
    PopUpManager.removePopUp(this);
   }
   else
   {
    Alert.show("用户名或密码不正确，请重新输入", "提示");
   }
  }
  
  /**
   * 关闭浏览器
   */ 
  protected function closeWindow_clickHandler(event:MouseEvent):void
  {
   navigateToURL(new URLRequest('javascript:window.opener=null;window.close()'),'_self');
  }
 }
}

2) 然后建立一个基于LoginAS的mxml文件，Login.mxml

<?xml version="1.0" encoding="utf-8"?>
<control:Login xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*" xmlns:control="components.control.*">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 
 <s:Form>
  <s:FormHeading label="用户登录"/>
  <s:FormItem label="用户名：">
   <s:TextInput id="username"/>
  </s:FormItem>
  <s:FormItem label="密码：">
   <s:TextInput id="password"
       displayAsPassword="true"/>
  </s:FormItem>
  <s:Button id="submit" 
      x="25" y="168" 
      label="登录"/>
  <s:Button id="closeWindow" 
      x="138" y="168" 
      label="取消"/>
 </s:Form>
</control:Login>

这样，as代码和mxml代码分离，这样的好处是显而易见的，as文件负责逻辑，mxml负责展示，达到了分层开发的目的，后期容易维护，代码整洁，逻辑清晰。

注意：在进行代码分离的时候要注意两点，一是as中声明的组件变量名要与mxml文件中的组件id一一对应，并且组件类型要相同，二是as中的组件变量访问权限要设置为public。这样的话，在组件初始化的时候，就会给as中的组件变量进行实例化，然后在组件初始话完之后给组件注册事件。

本人初学flex，文中如有不当之处，请指出，谢谢。