Flex的自定义事件(组件)的那些事儿

Demo:Login

1.创建一个UserLogin类。

package com
{   
    [Bindable]
    public class UserLogin
    {
        public var logUserNam:String=""; //用户名
        public var logUserPass:String=""; //用户密码
        public var logCompanyNam:String=""; //公司名称
        public function UserLogin(userNam:String, userPass:String, companyNam:String)
        {
            this.logUserNam=userNam;
            this.logUserPass=userPass;
            this.logCompanyNam=companyNam;
        }
    }
}

2.自定义事件MyEvent。

package com
{
    import flash.events.Event;
    public class MyCustomEvent extends Event
    {
        public static const TESTMYEVENT:String="testMyEvent"; //使用常量定义事件的触发方式名称
        [Bindable]
        public var userLog:UserLogin;
        public function MyCustomEvent(userLogin:UserLogin,type:String)
        {
            super(type);
            this.userLog=userLogin;
        }
    }
}

3.自定义组件Component。

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
         >
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Metadata>
        [Event(name="testMyEvent",type="com.MyCustomEvent")]
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
            import com.MyCustomEvent;
            import com.UserLogin;
            protected function login(event:MouseEvent):void
            {   
                var userLog:UserLogin;
                var myEvent:MyCustomEvent;
                if(logName.text!="" && password.text!="")
                {   
                    userLog = new UserLogin(logName.text,password.text,company.text);
                    myEvent = new MyCustomEvent(userLog,"testMyEvent");
                    this.dispatchEvent(myEvent);
                }
            }
        ]]>
    </fx:Script>

    <s:Panel width="100%" height="100%">
        <s:Form>
            <s:FormItem label="LogName:">
                <s:TextInput id="logName"/>
            </s:FormItem>
            <s:FormItem label="password">
                <s:TextInput id="password"/>
            </s:FormItem>
            <s:FormItem label="company">
                <s:TextInput id="company"/>
            </s:FormItem>
            <s:FormItem>
                <s:Button id="btn" label="login" click="login(event)"/>
            </s:FormItem>
        </s:Form>
    </s:Panel>
</s:Group>

4.创建Login.mxml。

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:com="*"
               minWidth="955" minHeight="600"
               >
    <fx:Script>
        <![CDATA[
            import com.MyCustomEvent;
            import com.UserLogin;
            import mx.controls.Alert;
            protected function component_testMyEventHandler(event:MyCustomEvent):void
            {
                var userLog:UserLogin = event.userLog;
                text.appendText(userLog.logUserNam+","+userLog.logCompanyNam);
            }

        ]]>
    </fx:Script>
    <fx:Metadata>
        [Event(name="testMyEvent",type="com.MyCustomEvent")]
    </fx:Metadata>
     <s:TextArea id="text" text="abc" width="500" height="100"/>
        <com:Component id="component" width="500" height="300" x="500" y="100"
                    testMyEvent="component_testMyEventHandler(event)">
     </com:Component>
</s:Application>

------完成。