(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 >