[原]自定义组件的属性与事件

在开发Flex程序后经常会使用到自定义组件，通过设置它的属性来初始化一些值，最经常用到的就是自定义事件与属性了，当然还有方法。对于自定义事件可以在元数据标签中加入[Event(name="Login", type="flash.events.Event")]声明一个组件的事件，既然声明了肯定就有一个能够用来触发的事件，使用dispatchEvent(new Event("Login"))来分发时间。对于属性直接声明一个公有的属性即可，方法也是一样。

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

< mx:Panel xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" width ="275" height ="150" title ="untitled" >

3

< mx:Metadata >
4

[Event(name="Login", type="flash.events.Event")]
5

</ mx:Metadata >
6

< mx:Script >
7

<![CDATA[
//声明为public属性之后，就变成了组件的公有属性了
8

[Bindable]
9

public var upitem:String="";
10

[Bindable]
11

public var downitem:String="";
12

[Bindable]
13

public var eafterclk:Boolean = false ;
14

private function handleLoginEvent():void
15

{
16

txtUID.editable = eafterclk ;
17

txtPwd.editable = eafterclk ;
18

lblTest.htmlText = "<b>logging in

</b>" ;
19

//分发事件Login
20

dispatchEvent(new Event("Login"));
21

}
22

]]>
23

</ mx:Script >
24

< mx:Model id ="login" >
25

< user >
26

< name > {txtUID.text} </ name >
27

< password > {txtPwd.text} </ password >
28

</ user >
29

</ mx:Model >
30

< mx:Label x ="10" y ="12" text ="{upitem}" />
31

< mx:Label x ="10" y ="42" text ="{downitem}" />
32

< mx:TextInput x ="74" y ="10" id ="txtUID" />
33

< mx:TextInput x ="74" y ="40" id ="txtPwd" displayAsPassword ="true" />
34

< mx:Button x ="178" y ="70" label ="Login" click ="handleLoginEvent()" />
35

< mx:Label x ="74" y ="72" id ="lblTest" />
36

</ mx:Panel >

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

< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" backgroundGradientColors ="[#804000, #ffffff]" xmlns:ns1 ="*" >
3

< mx:states >
4

< mx:State name ="t" >
5

< mx:RemoveChild target ="{user}" />
6

< mx:AddChild position ="lastChild" >
7

< mx:ProgressBar maximum ="100" minimum ="0" enabled ="true" labelPlacement ="center" horizontalCenter ="0" verticalCenter ="0" />
8

</ mx:AddChild >
9

< mx:AddChild position ="lastChild" >
10

< mx:HBox width ="195" right ="2" top ="2" >
11

< mx:Image right ="84" top ="10" source ="file:///D|/www/images/icon_acct_active.gif" />
12

< mx:Label text ="Welcome,{user.login.name}" color ="#ffffff" right ="22" top ="10" />
13

</ mx:HBox >
14

</ mx:AddChild >
15

</ mx:State >
16

</ mx:states >
17

< mx:Script >
18

<![CDATA[
19

import mx.controls.Alert ;
20

public function login():void{
21

if( user.login.name == "Fisher" )
22

{
23

//Alert.show("User:"+user.login.name+"\n\nPass:******","Login

");
24

this.currentState = "t";
25

}
26

}
27

]]>
28

</ mx:Script >
29

< ns1:LoginBox title ="LOGIN" upitem ="Username" eafterclk ="true" downitem ="Password" id ="user" y ="181" horizontalCenter ="0" Login ="login()" >
30

</ ns1:LoginBox >
31

</ mx:Application >

[原]自定义组件的属性与事件

你可能感兴趣的:([原]自定义组件的属性与事件)