flex 自定义控件、事件

最新推荐文章于 2022-06-29 20:23:06 发布

whp0731

最新推荐文章于 2022-06-29 20:23:06 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

分类专栏： flex 文章标签： Flex Adobe XML Flash

本文链接：https://blog.youkuaiyun.com/whp0731/article/details/83677847

flex 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用MXML创建自定义控件及事件，通过实例展示了一个登录表单组件，该组件能触发自定义事件并进行事件处理。

自定义控件、自定义事件

引子：前面主要用action script3来定义事件、在此用MXML来自定义控件、自定义事件

具体可参考源代码及其执行：

一、源代码

见1是通过新建new/MXML conpoment 同时，在填入信息时选择继承自panel；

1、LoginForm.mxml

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

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="348" height="200" borderColor="#3CD5E3" title="登录表单" fontSize="12" fontWeight="bold">

    <mx:Metadata>

       [Event(name="loginEvent",type="com.events.loginformEvent")]-执行过程④

 

    </mx:Metadata>

    

    <mx:Script>

       <![CDATA[

           import com.events.loginformEvent;

           

           internal function onClick(evt:MouseEvent):void{-执行过程②

              var e:loginformEvent=new loginformEvent("loginEvent");-执行过程③

              e.name=txt_name.text;

              e.password=txt_pwd.text;

              

              dispatchEvent(e);

           }

           

       ]]>

    </mx:Script>

    

    <mx:Label x="42" y="33" text="用户名：" height="22" fontSize="12" fontWeight="bold"/>

    <mx:Label x="42" y="76" text="密码：" fontSize="12" fontWeight="bold"/>

    <mx:TextInput x="110" y="33" id="txt_name"/>

    <mx:TextInput x="110" y="74" id="txt_pwd" displayAsPassword="true"/>

    <mx:Button x="110" y="114" label="登录" id="btn_login" fontSize="12" 

       fontWeight="bold" width="69" click="onClick(event)"/>-执行过程①

    

</mx:Panel>

 

2、EventMXML.xml

<?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 mx.controls.Alert;

           import com.events.loginformEvent;

           

           internal function login(evt:loginformEvent):void-执行过程⑦

 

           {

              if ((evt.name=="zhangsan") && (evt.password=="123")){

                  Alert.show("你已经成功登录！","提示");

              } 

              else

              {

                  Alert.show("输入信息有误！","提示");

              }

                         

           }

           

//下文的    loginEvent="login(event)"类似于以前例子中调用init()函数，然后触发

//     init(){

//            loginform.addEventListener("loginEven",login);

//         }

       ]]>

    </mx:Script>

    

    <ns1:LoginForm x="70.5" y="29" id="loginform" loginEvent="login(event)"> -执行过程⑥

 

    </ns1:LoginForm>

    

</mx:Application>

 

3、loginformEvent.as

package com.events

{

    import flash.events.Event;

 

    public class loginformEvent extends Event

    {

       public var name:String="";

       public var password:String="";

       

       public function loginformEvent(type:String) -执行过程⑤

 

       {

           super(type, false, false);

       }

       

    }

}