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

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

下面以一个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，文中如有不当之处，请指出，谢谢。