在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)"/>
