Flex自定义事件二

7.使用MXML来实现事件处理机制:用一个例子来演示。



  <1>首先创建一个MXML Component文件，使用已有的ActionScript组件来组装一个自定义的组件。

  其实就是创建一个新类，继承已经存在的组件(如Panel)，然后在自定义类中封装几个已存在的组件作为属性，以组成自己的类！！

   <?xml version="1.0" encoding="utf-8"?>

   <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="后台管理">

    <mx:Label x="41" y="30" text="用户名："/>

    <mx:Label x="41" y="76" text="密   码："/>

    <mx:TextInput id="t_username" x="119" y="28" borderColor="#0B65A4" backgroundColor="#CE6363" backgroundAlpha="0.18"/>

    <!-- displayAsPassword="true"表示输入密码后用黑点儿显示 -->

    <mx:TextInput id="t_password" x="119" y="76" displayAsPassword="true" borderColor="#0B65A4" backgroundColor="#CE6363" backgroundAlpha="0.18"/>

    <!-- 为按钮注册鼠标点击监听器事件方法clickButton -->

    <mx:Button x="119" y="123" label="登陆" width="72" click="clickButton()"/>



    <!-- 这里不是为该自定义组件注册一个Event事件，而是指定该组件可以注册这个事件，事件类型叫做"login" -->

    <mx:Metadata>

     [Event (name="login", type="flash.events.Event")]

    </mx:Metadata>



    <!-- 点击按钮触发事件方法后，为整个自定义组件的事件流中添加一个新的上边声明了的login类型的事件

    此事件添加到事件流后，如果自定义组件或子节点组件有注册login类型的监听器，那么会立即触发-->

    <mx:Script>

     <![CDATA[

      internal function clickButton():void{

       //向这个组件的事件流中制造一个新的事件，以便可以触发对应的监听器

       this.dispatchEvent(new Event("login"));

      }

     ]]>

    </mx:Script>



   </mx:Panel>

   *说明:因为表单有登陆按钮对象，所以要为按钮注册一个"登陆事件‘(即鼠标点击事件),

   当点击时当然就会触发事件监听方法，进而完成对应的功能(判断用户名、密码等)。



   *注意: 这样一个自定义组件不能独立运行，只能供一个MXML文件引用而使用。

   所以是否触发login类型的事件要看引用该组件对象的MXML文件中的声明了。见下边！！



  <2>在MXML文件中引入自定义组件，使用<ns1:LoginForm>元素引用(也可以从组件视图上拖动)。

   <?xml version="1.0" encoding="utf-8"?>

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="*">

   

    <!-- 事件监听方法，当自定义组件有login类型的事件发生时，就会调用loginClick()方法 -->

    <mx:Script>

     <![CDATA[

      import mx.controls.Alert;

     

      //监听器方法

      internal function loginClick(evt:Event):void{

       Alert.show("登陆成功","提示");

      }

     ]]>

    </mx:Script>



    <!-- 在MXML中引入自定义组件，并且为组件注册login类型的事件监听器，监听方法为loginClick，参数一定要传入event对象，

    之所以要传入参数是因为声明的事件监听方法要接收这个参数 -->

    <ns1:LoginForm id="loginForm" login="loginClick(event)" verticalAlign="middle">

    </ns1:LoginForm>

    * 说明:login="loginClick(event)"中的login是事件类型，而loginClick则是事件监听器方法

   </mx:Application>



  <3>总结: 上边例子中，首先在自定义组件中为自定义组件声明了一个可以使用的事件类型"login"，

  然后为自定义组件中的按钮的鼠标点击事件注册监听器方法为clickButton()方法，方法体中是为自定义组件的事件流中制造一个login类型的事 件。

  也就是说运行时，点击按钮后，会触发clickButton方法，然后该方法为自定义组件事件流中制造一个新的login事件，

  这回导致注册了 login事件类型的监听器被调用，即loginClick被调用。这是上边例子点击登陆后的操作流程。



  <4>上边为自定义组件声明的事件类型都是ActionScript提供的事件Event类型的，我们当然也可以想在 ActionScript中那样，定义自定义的事件类型。

  

   //自定义事件类型

   public class LoginEvent extends Event{

    //保存用户名

    public var username:String;

    //保存密码

    public var password:String;

   

    public function LoginEvent(type:String){

     super(type, false, false);

    }

   }



   *修改<1>中代码:

    <mx:Metadata>

     <!-- type的值改成了自定义事件类型 -->

     [Event (name="login", type="com.events.LoginEvent")]

    </mx:Metadata>

   

    <mx:Script>

     <![CDATA[

      import com.events.LoginEvent;

    

      internal function clickButton():void{

       //创建自定义事件对象，并且指定类型名为"login"

       var loginEvent:LoginEvent = new LoginEvent("login");

       //得到用户名值

       loginEvent.username = t_username.text;

       //得到密码值

       loginEvent.password = t_password.text;

       //向事件流中制造事件

       this.dispatchEvent(loginEvent);

      }

     ]]>

    </mx:Script>



   *修改<2>中代码:

    //此处参数类型改成了LoginEvent自定义类型，如果不改将会得不到 username和password属性值

    internal function loginClick(evt:LoginEvent):void{

     //判断用户名和密码

     if((evt.username == "admin") && (evt.password == "admin")){

      Alert.show(" 登陆成功","提示");

      return;

     }

     Alert.show("登陆失败","警告");

    }



  *说明:其实我们可以直接在按钮的鼠标点击事件中进行表单的验证，不过如果这样代码的复用能力就比较差，

  因为我们可能会在很多地方都会使用自定义组件，如果验证写在鼠标单击按钮事件方法中，那么在每一次引用自定义组件后，

  如果各个需求的验证方法不同，那么就要总是修改自定义组件的鼠标点击事件方法中的代码了。

  而向上边那样写，就无需修改自定义组件中的代码了。