(flex)一个简单的flex登陆实例

下面是一个flex简单实例
开发工具:flex buider3
主要知识点：事件请求转发,其它相关信息有注释
首先在src下新建一个组件，命名为loginForm.mxml,在这个组件里，有两个标签，两个文件域，和一个按钮，相关代码如下：


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


<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="226" borderColor="#88F0DE" title="用户登陆" fontSize="14">


    <mx:Metadata>


        //使用系统事件进行提交        


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


        //使用自定义事件，在org.loginForm.LoginFormEvent里


        [Event(name="loginEvent",type="org.loginForm.LoginFormEvent")]    


    </mx:Metadata>


    <mx:Script>


        <![CDATA[


            import org.loginForm.LoginFormEvent; 




            internal function onClick(evt:MouseEvent):void

{


                //系统事件进行请求转发


                //this.dispatchEvent(new Event("loginEvent"));


                //自定义事件请求转发


                var lf:LoginFormEvent = new LoginFormEvent("loginEvent");


                //把得到的用户名，密码传到事件里


                lf.username = userName.text;


                lf.password = password.text;


                this.dispatchEvent(lf);


            }


        ]]>


    </mx:Script>


    <mx:Label x="48" y="38" text="用户名：" width="70" height="26" fontSize="15"/>


    <mx:Label x="48" y="92" text="密  码：" width="70" height="25" fontSize="15"/>


    <mx:TextInput x="126" y="36" id="userName"/>


    <mx:TextInput x="126" y="90" id="password" displayAsPassword="true"/>


    <mx:Button x="228" y="142" label="登陆" fontSize="15" id="login" click="onClick(event)"/>    


</mx:Panel>



下面是处理表单的actionscript代码：包为org.LoginForm ,名为LoginFormEvent，该类需继承Event


package org.loginForm






{


    import flash.events.Event;




    public class LoginFormEvent extends Event




    

{


        public var username:String = "";


        public var password:String = "";


        public function LoginFormEvent(type:String)




        

{


            super(type, false, false);


        }


        


    }


}
事件测试类，把loginForm.mxml添加到,名为event2.mxml  mxml application文件里


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


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


    <mx:Script>


        <![CDATA[


            import org.loginForm.LoginFormEvent;


            import mx.controls.Alert;


            //internal function login(evt:Event):void{


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


            //}




            internal function login(evt:LoginFormEvent):void

{




                if(evt.username == "gao" && evt.password == "qin")

{


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




                }else

{


                    Alert.show("你登陆失败");


                }


            }




            public function init():void

{                


                fLogin.addEventListener("loginEvent",login);


            }


        ]]>


    </mx:Script>


    <ns1:loginForm x="34" y="90" id="fLogin" loginEvent="login(event)">


    </ns1:loginForm>    


</mx:Application>