Flex basic control-Button

Button is one of the most basic and relatively simple controls in flex. It basically has no special requirements for it. So many of its attributes can fully meet our needs, in addition, we only need to know a few key common attributes. Common attributes are as follows:

1. emphasized: gets or sets a Boolean value to indicate whether a border is painted around the Button when the Button is in the pop-up state. Default Value:false

2. Label: The text displayed on the button.

3. Icon: the Icon displayed on the button. For example: icon = "@ Embed ('images/mm-icon.png ')", the button has a basic state of icon, to do a good job of the Button is the most important thing to see the art skills.

4. click: click the event Method for the listener. In addition to click, you can also listen for other insights, suchmouseMove,mouseOver,mouseOut,rollOver,rollOut,mouseDownAndmouseUp.

The following is an example of tour flex.

 <? Xml version = "1.0" encoding = "UTF-8"?> <Br/> <mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "horizontal" viewSourceURL = "srcview/index.html" <br/> verticalAlign = "middle" horizontalAlign = "center" align = "[0x323232, 0 x] "> <br/> <mx: script> <br/> <! -- [CDATA [<br/> import mx. controls. alert; <br/>] --> <br/> </mx: Script> <br/> <mx: panel title = "Button Control Example" layout = "vertical" height = "100" color = "0 xffffff" borderAlpha = "0.15" <br/> paddingTop = "10" paddingRight = "10" paddingBottom = "10" paddingLeft = "10" horizontalAlign = "center"> </p> <mx: HBox horizontalGap = "10" verticalAlign = "middle"> <br/> <! -- Normal button --> <br/> <mx: Button id = "defaultButton" color = "0x323232" label = "Default Button" click = "{Alert. show ('default Button Pressed ');} "/> </p> <mx: button id = "iconButton" label = "Button With Icon" labelPlacement = "right" paddingLeft = "2" <br/> icon = "@ Embed ('Assets/flex_icon.png ') "downIcon =" @ Embed ('Assets/flex_icon_dwn.png ') "<br/> color =" 0x323232 "click =" {Alert. show ('button With Icon Pressed ');} "/> </p> <mx: button id = "skinnedButton" label = "Skinned Button" width = "150" upSkin = "@ Embed ('Assets/btn_up.png ') "<br/> overSkin =" @ Embed ('Assets/btn_over.png ') "downSkin =" @ Embed ('Assets/btn_down.png ') "<br/> focusSkin =" @ Embed ('Assets/btn_focus.png ') "disabledSkin =" @ Embed ('Assets/btn_disabled.png ') "<br/> color =" 0x323232 "textrolovercolor =" 0 xffffff "textSelectedColor =" 0 xffffff "paddingLeft =" 20 "<br/> click =" {Alert. show ('skinned Button Pressed ');} "/> </p> <mx: button id = "customButton" label = "custom button" fontFamily = "Arial" fontStyle = "italic" fontWeight = "normal" cornerRadius = "12" <br/> color = "0 xffffff "fillColors =" [0x55C0FF, 0x0050AA] "fillAlphas =" [1.0, 1.0] "highlightAlphas =" [1.0, 0.2] "focusAlpha =" 0.2 "<br/> textroalovercolor =" 0 xffffff "textSelectedColor =" 0x55C0FF "click =" {Alert. show ('m m button Pressed ');} "/> <br/> </mx: HBox> <br/> </mx: panel> <br/> </mx: Application>

Do not be scared by the many attributes of the button. In fact, many of them are icons and styles.

Speaking of the Button technology, the most commonly used is the use of button custom events:

<Mx: TitleWindow xmlns: mx = "http://www.adobe.com/2006/mxml" width = "286" height = "208" layout = "absolute" title = "User Logon"> <br/> <mx: metadata> <br/> [Event ("btnClicked")] <br/> </mx: Metadata> <br/> <mx: Script> <br/> <! -- [CDATA [<br/> [Inspectable] <br/> public var status: String; </p> <p> private function login (): void {<br/> dispatchEvent (new Event ("btnClicked"); <br/>}< br/>] --> <br/> </mx: script> <br/> <mx: form width = "248" height = "100" label = "Button" x = "10" y = "10"> <br/> <mx: formItem label = "User Name" fontSize = "12"> <br/> <mx: textInput id = "username" width = "158" height = "28" fontSize = "15" textAlign = "left"/> <br/> </mx: formItem> <br/> <mx: FormItem label = "password" fontSize = "12"> <br/> <mx: textInput id = "password" width = "159" height = "30" fontSize = "15" textAlign = "left" <br/> displayAsPassword = "true"/> <br/> </mx: formItem> <br/> </mx: Form> <br/> <mx: Button id = "loginbtn" click = "login () "label =" Log on "textAlign =" center "fontSize =" 12 "x =" 190 "y =" 118 "/> <br/> </mx: titleWindow> </p> <p>

Then use

<? Xml version = "1.0" encoding = "UTF-8"?> <Br/> <mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "absolute" xmlns: widget = "*"> <br/> <mx: script> <br/> <! -- [CDATA [<br/> import mx. controls. alert; <br/> private function btnClick (): void {<br/> Alert. show ("test", "Test"); <br/>}< br/> private function btnClickHandler (event: Event): void {<br/> Alert. show ("Event btnClicked Called"); <br/>}< br/>] --> <br/> </mx: Script> <br/> <mx: button id = "bb" x = "107" y = "37" label = "Button" click = "btnClick ()"/> <br/> <widget: CLogin btnClicked = "btnClickHandler (event)" x = "107" y = "94" width = "204" height = "117"> <br/> </widget: CLogin> <br/> </mx: Application> </p> <p>