Flex Button控件常见属性用法指导

开发 后端
本文向大家简单介绍一下Flex基础控件--Flex Button控件的常用属性用法,这里和大家分享一下,希望对你有所帮助。

本文和大家重点讨论一下Flex Button控件,它是Flex中最基本也是相对简单的控件之一,它的那么多属性完全可以满足我们的需求,而且我们只需要了解几个关键的常用属性便OK。

Flex基础控件--Button

Flex Button控件是Flex中最基本也是相对简单的控件之一,基本对他没有什么特殊需求,他的那么多属性完全可以满足我们的需求,而且我们只需要了解几个关键的常用属性便OK。如下常用属性:

1、emphasized:获取或设置一个布尔值,指示当按钮处于弹起状态时,Button组件周围是否绘有边框。默认为:false

2、Label:按扭上显示的文本。

3、Icon:按扭上显示的图标。如:icon="@Embed('Images/mm-icon.png')",button有基本各种状态都有icon,要把Flex Button控件搞好最主要还是看美工的功底。

4、click:按扭的监听单击事件所的方法。除了click也可以监听它的其他识见,如mouseMove、mouseOver、mouseOut、rollOver、rollOut、mouseDown和mouseUp。

下面是tourFlex中的一个例子

  1. viewplaincopytoclipboardprint?  
  2. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="horizontal"viewSourceURL="srcview/index.html" 
  4. verticalAlign="middle"horizontalAlign="center"backgroundGradientColors="[0x000000,0x323232]"> 
  5. <mx:Script> 
  6. <!--[CDATA[  
  7. importmx.controls.Alert;  
  8. ]]--> 
  9. </mx:Script> 
  10. <mx:Paneltitlemx:Paneltitle="ButtonControlExample"layout="vertical"height="100"color="0xffffff"borderAlpha="0.15" 
  11. paddingTop="10"paddingRight="10"paddingBottom="10"paddingLeft="10"horizontalAlign="center"> 
  12.  
  13. <mx:HBoxhorizontalGapmx:HBoxhorizontalGap="10"verticalAlign="middle"> 
  14. <!--normalbutton--> 
  15. <mx:Buttonidmx:Buttonid="defaultButton"color="0x323232"label="DefaultButton"click="{Alert.show('DefaultButtonPressed');}"/> 
  16.  
  17. <mx:Buttonidmx:Buttonid="iconButton"label="ButtonWithIcon"labelPlacement="right"paddingLeft="2"  
  18. icon="@Embed('assets/Flex_icon.png')"downIcon="@Embed('assets/Flex_icon_dwn.png')"  
  19. color="0x323232"click="{Alert.show('ButtonWithIconPressed');}"/> 
  20.  
  21. <mx:Buttonidmx:Buttonid="skinnedButton"label="SkinnedButton"width="150"upSkin="@Embed('assets/btn_up.png')"  
  22. overSkin="@Embed('assets/btn_over.png')"downSkin="@Embed('assets/btn_down.png')"  
  23. focusSkin="@Embed('assets/btn_focus.png')"disabledSkin="@Embed('assets/btn_disabled.png')"  
  24. color="0x323232"textRollOverColor="0xffffff"textSelectedColor="0xffffff"paddingLeft="20"  
  25. click="{Alert.show('SkinnedButtonPressed');}"/> 
  26.  
  27. <mx:Buttonidmx:Buttonid="customButton"label="CUSTOMBUTTON"fontFamily="Arial"fontStyle="italic"fontWeight="normal"cornerRadius="12"  
  28. color="0xffffff"fillColors="[0x55C0FF,0x0050AA]"fillAlphas="[1.0,1.0]"highlightAlphas="[1.0,0.2]"focusAlpha="0.2" 
  29. textRollOverColor="0xffffff"textSelectedColor="0x55C0FF"click="{Alert.show('CUSTOMBUTTONPressed');}"/> 
  30. </mx:HBox> 
  31. </mx:Panel> 
  32. </mx:Application> 
  33. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  34. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="horizontal"viewSourceURL="srcview/index.html" 
  35. verticalAlign="middle"horizontalAlign="center"backgroundGradientColors="[0x000000,0x323232]"> 
  36. <mx:Script> 
  37. <!--[CDATA[  
  38. importmx.controls.Alert;  
  39. ]]--> 
  40. </mx:Script> 
  41. <mx:Paneltitlemx:Paneltitle="ButtonControlExample"layout="vertical"height="100"color="0xffffff"borderAlpha="0.15" 
  42. paddingTop="10"paddingRight="10"paddingBottom="10"paddingLeft="10"horizontalAlign="center"> 
  43.  
  44. <mx:HBoxhorizontalGapmx:HBoxhorizontalGap="10"verticalAlign="middle"> 
  45. <!--normalbutton--> 
  46. <mx:Buttonidmx:Buttonid="defaultButton"color="0x323232"label="DefaultButton"click="{Alert.show('DefaultButtonPressed');}"/> 
  47.  
  48. <mx:Buttonidmx:Buttonid="iconButton"label="ButtonWithIcon"labelPlacement="right"paddingLeft="2"  
  49. icon="@Embed('assets/Flex_icon.png')"downIcon="@Embed('assets/Flex_icon_dwn.png')"  
  50. color="0x323232"click="{Alert.show('ButtonWithIconPressed');}"/> 
  51.  
  52. <mx:Buttonidmx:Buttonid="skinnedButton"label="SkinnedButton"width="150"upSkin="@Embed('assets/btn_up.png')"  
  53. overSkin="@Embed('assets/btn_over.png')"downSkin="@Embed('assets/btn_down.png')"  
  54. focusSkin="@Embed('assets/btn_focus.png')"disabledSkin="@Embed('assets/btn_disabled.png')"  
  55. color="0x323232"textRollOverColor="0xffffff"textSelectedColor="0xffffff"paddingLeft="20"  
  56. click="{Alert.show('SkinnedButtonPressed');}"/> 
  57.  
  58. <mx:Buttonidmx:Buttonid="customButton"label="CUSTOMBUTTON"fontFamily="Arial"fontStyle="italic"fontWeight="normal"cornerRadius="12"  
  59. color="0xffffff"fillColors="[0x55C0FF,0x0050AA]"fillAlphas="[1.0,1.0]"highlightAlphas="[1.0,0.2]"focusAlpha="0.2" 
  60. textRollOverColor="0xffffff"textSelectedColor="0x55C0FF"click="{Alert.show('CUSTOMBUTTONPressed');}"/> 
  61. </mx:HBox> 
  62. </mx:Panel> 
  63. </mx:Application> 
  64.  

 不要被Flex Button控件那么多的属性给吓到,其实很多都是icon和style。

说到Button技术上,我用的最多的还是利用Flex Button控件的自定义事件:

  1. viewplaincopytoclipboardprint?  
  2. <mx:TitleWindowxmlns:mxmx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml" 
  3.  
  4. width="286"height="208"layout="absolute"title="用户登录"> 
  5. <mx:Metadata> 
  6. [Event("btnClicked")]  
  7. </mx:Metadata> 
  8. <mx:Script> 
  9. <!--[CDATA[  
  10. [Inspectable]  
  11. publicvarstatus:String;  
  12.  
  13. privatefunctionlogin():void{  
  14. dispatchEvent(newEvent("btnClicked"));  
  15. }  
  16. ]]--> 
  17. </mx:Script> 
  18. <mx:Formwidthmx:Formwidth="248"height="100"label="Button"x="10"y="10"> 
  19. <mx:FormItemlabelmx:FormItemlabel="用户名"fontSize="12"> 
  20. <mx:TextInputidmx:TextInputid="username"width="158"height="28"fontSize="15"textAlign="left"/> 
  21. </mx:FormItem> 
  22. <mx:FormItemlabelmx:FormItemlabel="密码"fontSize="12"> 
  23. <mx:TextInputidmx:TextInputid="password"width="159"height="30"fontSize="15"textAlign="left" 
  24. displayAsPassword="true"/> 
  25. </mx:FormItem> 
  26. </mx:Form> 
  27. <mx:Buttonidmx:Buttonid="loginbtn"click="login()"label="登录"textAlign="center"fontSize="12"x="190"y="118"/> 
  28. </mx:TitleWindow> 
  29. <mx:TitleWindowxmlns:mxmx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml" 
  30.  
  31. width="286"height="208"layout="absolute"title="用户登录"> 
  32. <mx:Metadata> 
  33. [Event("btnClicked")]  
  34. </mx:Metadata> 
  35. <mx:Script> 
  36. <!--[CDATA[  
  37. [Inspectable]  
  38. publicvarstatus:String;  
  39.  
  40. privatefunctionlogin():void{  
  41. dispatchEvent(newEvent("btnClicked"));  
  42. }  
  43. ]]--> 
  44. </mx:Script> 
  45. <mx:Formwidthmx:Formwidth="248"height="100"label="Button"x="10"y="10"> 
  46. <mx:FormItemlabelmx:FormItemlabel="用户名"fontSize="12"> 
  47. <mx:TextInputidmx:TextInputid="username"width="158"height="28"fontSize="15"textAlign="left"/> 
  48. </mx:FormItem> 
  49. <mx:FormItemlabelmx:FormItemlabel="密码"fontSize="12"> 
  50. <mx:TextInputidmx:TextInputid="password"width="159"height="30"fontSize="15"textAlign="left" 
  51. displayAsPassword="true"/> 
  52. </mx:FormItem> 
  53. </mx:Form> 
  54. <mx:Buttonidmx:Buttonid="loginbtn"click="login()"label="登录"textAlign="center"fontSize="12"x="190"y="118"/> 
  55. </mx:TitleWindow> 
  56.  

 然后使用

  1. viewplaincopytoclipboardprint?  
  2. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:widget="*"> 
  4. <mx:Script> 
  5. <!--[CDATA[  
  6. importmx.controls.Alert;  
  7. privatefunctionbtnClick():void{  
  8. Alert.show("test","Test");  
  9. }  
  10. privatefunctionbtnClickHandler(event:Event):void{  
  11. Alert.show("EventbtnClickedCalled");  
  12. }  
  13. ]]--> 
  14. </mx:Script> 
  15. <mx:Buttonidmx:Buttonid="bb"x="107"y="37"label="Button"click="btnClick()"/> 
  16. <widget:CLoginbtnClickedwidget:CLoginbtnClicked="btnClickHandler(event)"x="107"y="94"width="204"height="117"> 
  17. </widget:CLogin> 
  18. </mx:Application> 
  19.  

【编辑推荐】

  1. 学习笔记 Flex Panel控件内部容器大小计算方法
  2. Flex基础 创建***个Flex项目
  3. FlexBuilder教程教你如何创建自定义控件
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件 

 

 

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-07-30 10:02:40

Flex验证控件

2010-07-28 10:38:29

Flex开源框架

2010-08-12 09:25:35

Flex控件

2010-08-06 10:32:49

Flex数据类型

2010-07-27 15:28:02

Flex DataBi

2010-08-12 13:59:37

FlexList控件

2010-08-06 15:11:44

Flex界面控件

2010-08-05 10:08:06

Flex效果

2010-07-29 09:44:17

Flex编程

2010-08-13 09:21:12

FlexButton组件

2010-08-13 13:46:04

Flex效果组件

2010-07-27 13:53:15

Flex ComboB

2010-07-26 14:45:17

Perl Hash

2010-07-23 14:12:14

Perl Hash

2010-08-25 10:21:49

CSSmargin

2010-07-28 10:48:48

FlexReport开

2010-08-05 13:44:12

Flex布局

2010-07-30 10:13:38

Flex控件

2010-08-13 11:21:31

Flex渲染器

2010-09-06 13:04:16

CSS浮动float
点赞
收藏

51CTO技术栈公众号