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>

------完成。