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