Flex自定义事件和组件的使用方法

在Flex中使用自定义事件和组件可以使代码变得简洁清晰，需要注意的两点是在自定义事件中要重写clone方法，返回自定义事件对象；在自定义组件中要在Metadata中，声明组件事件的名字和类型。

自定义事件LoginEvent.as的代码如下：

package events
{
import flash.events.Event;

public class LoginEvent extends Event
{
public var username:String;
public var password:String;
public static const LOGIN:String = "login";

public function LoginEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}

override public function clone():Event
{
var newEvent:LoginEvent = new LoginEvent(type);
newEvent.username = username;
newEvent.password = password;
return newEvent;
}

}
}

自定义组件MyComponent.mxml的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
backgroundColor="#9DEDE8"
creationComplete="myInit()"
>
<fx:Metadata>
[Event(name="sizeSelected",type="flash.events.TextEvent")]
[Event(name="login",type="events.LoginEvent")]
</fx:Metadata>

<fx:Declarations>
<s:RadioButtonGroup id="sizeGroup" itemClick="clickHandler(event)"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import events.LoginEvent;

import mx.events.ItemClickEvent;
[Bindable]
public var firstName:String;
[Bindable]
public var lastName:String;

private function myInit():void{
userNameInput.text="123abc";
userNameInput.selectRange(0,userNameInput.text.length);
userNameInput.setFocus();
}

public function getFullName():String{
return firstName+lastName;
}

private function clickHandler(event:Event):void{
var e:TextEvent = new TextEvent("sizeSelected");
e.text=sizeGroup.selection.value as String;
dispatchEvent(e);
}

private function doLogin():void{
var e:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
e.username = userNameInput.text;
e.password = passwordInput.text;
dispatchEvent(e);
}

]]>
</fx:Script>

<s:Label text="{firstName}" />
<s:Label text="{lastName}" />

<s:Label text="{getFullName()}" id="label1"/>
<s:RadioButton groupName="sizeGroup" label="Small" value="Small"/>
<s:RadioButton groupName="sizeGroup" label="Medium" value="Medium"/>
<s:RadioButton groupName="sizeGroup" label="Large" value="Large"/>
<s:TextInput id="userNameInput" restrict="0-9"/>
<s:TextInput id="passwordInput"/>
<s:Button id="loginBtn" label="Log in" click="doLogin()" />
</mx:VBox>

在主文件中使用如下：

protected function mycomponent1_sizeSelectedHandler(event:TextEvent):void
{
sizeMessage.text="You selected the"+event.text;
}

protected function mycomponent1_loginHandler(event:LoginEvent):void
{
sizeMessage.text = event.username + event.password;
}

<components:MyComponent firstName="name1" lastName="name2" x="362" y="240" sizeSelected="mycomponent1_sizeSelectedHandler(event)" login="mycomponent1_loginHandler(event)"/>