本文和大家重点讨论一下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中的一个例子
viewplaincopytoclipboardprint?
<?xmlversionxmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="horizontal"viewSourceURL="srcview/index.html"
verticalAlign="middle"horizontalAlign="center"backgroundGradientColors="[0x000000,0x323232]">
<mx:Script>
<!--[CDATA[
importmx.controls.Alert;
]]-->
</mx:Script>
<mx:Paneltitlemx:Paneltitle="ButtonControlExample"layout="vertical"height="100"color="0xffffff"borderAlpha="0.15"
paddingTop="10"paddingRight="10"paddingBottom="10"paddingLeft="10"horizontalAlign="center">
<mx:HBoxhorizontalGapmx:HBoxhorizontalGap="10"verticalAlign="middle">
<!--normalbutton-->
<mx:Buttonidmx:Buttonid="defaultButton"color="0x323232"label="DefaultButton"click="{Alert.show('DefaultButtonPressed');}"/>
<mx:Buttonidmx:Buttonid="iconButton"label="ButtonWithIcon"labelPlacement="right"paddingLeft="2"
icon="@Embed('assets/Flex_icon.png')"downIcon="@Embed('assets/Flex_icon_dwn.png')"
color="0x323232"click="{Alert.show('ButtonWithIconPressed');}"/>
<mx:Buttonidmx:Buttonid="skinnedButton"label="SkinnedButton"width="150"upSkin="@Embed('assets/btn_up.png')"
overSkin="@Embed('assets/btn_over.png')"downSkin="@Embed('assets/btn_down.png')"
focusSkin="@Embed('assets/btn_focus.png')"disabledSkin="@Embed('assets/btn_disabled.png')"
color="0x323232"textRollOverColor="0xffffff"textSelectedColor="0xffffff"paddingLeft="20"
click="{Alert.show('SkinnedButtonPressed');}"/>
<mx:Buttonidmx:Buttonid="customButton"label="CUSTOMBUTTON"fontFamily="Arial"fontStyle="italic"fontWeight="normal"cornerRadius="12"
color="0xffffff"fillColors="[0x55C0FF,0x0050AA]"fillAlphas="[1.0,1.0]"highlightAlphas="[1.0,0.2]"focusAlpha="0.2"
textRollOverColor="0xffffff"textSelectedColor="0x55C0FF"click="{Alert.show('CUSTOMBUTTONPressed');}"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
<?xmlversionxmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="horizontal"viewSourceURL="srcview/index.html"
verticalAlign="middle"horizontalAlign="center"backgroundGradientColors="[0x000000,0x323232]">
<mx:Script>
<!--[CDATA[
importmx.controls.Alert;
]]-->
</mx:Script>
<mx:Paneltitlemx:Paneltitle="ButtonControlExample"layout="vertical"height="100"color="0xffffff"borderAlpha="0.15"
paddingTop="10"paddingRight="10"paddingBottom="10"paddingLeft="10"horizontalAlign="center">
<mx:HBoxhorizontalGapmx:HBoxhorizontalGap="10"verticalAlign="middle">
<!--normalbutton-->
<mx:Buttonidmx:Buttonid="defaultButton"color="0x323232"label="DefaultButton"click="{Alert.show('DefaultButtonPressed');}"/>
<mx:Buttonidmx:Buttonid="iconButton"label="ButtonWithIcon"labelPlacement="right"paddingLeft="2"
icon="@Embed('assets/Flex_icon.png')"downIcon="@Embed('assets/Flex_icon_dwn.png')"
color="0x323232"click="{Alert.show('ButtonWithIconPressed');}"/>
<mx:Buttonidmx:Buttonid="skinnedButton"label="SkinnedButton"width="150"upSkin="@Embed('assets/btn_up.png')"
overSkin="@Embed('assets/btn_over.png')"downSkin="@Embed('assets/btn_down.png')"
focusSkin="@Embed('assets/btn_focus.png')"disabledSkin="@Embed('assets/btn_disabled.png')"
color="0x323232"textRollOverColor="0xffffff"textSelectedColor="0xffffff"paddingLeft="20"
click="{Alert.show('SkinnedButtonPressed');}"/>
<mx:Buttonidmx:Buttonid="customButton"label="CUSTOMBUTTON"fontFamily="Arial"fontStyle="italic"fontWeight="normal"cornerRadius="12"
color="0xffffff"fillColors="[0x55C0FF,0x0050AA]"fillAlphas="[1.0,1.0]"highlightAlphas="[1.0,0.2]"focusAlpha="0.2"
textRollOverColor="0xffffff"textSelectedColor="0x55C0FF"click="{Alert.show('CUSTOMBUTTONPressed');}"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
不要被Flex Button控件那么多的属性给吓到，其实很多都是icon和style。
说到Button技术上，我用的最多的还是利用Flex Button控件的自定义事件：
viewplaincopytoclipboardprint?
<mx:TitleWindowxmlns:mxmx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"
width="286"height="208"layout="absolute"title="用户登录">
<mx:Metadata>
[Event("btnClicked")]
</mx:Metadata>
<mx:Script>
<!--[CDATA[
[Inspectable]
publicvarstatus:String;
privatefunctionlogin():void{
dispatchEvent(newEvent("btnClicked"));
}
]]-->
</mx:Script>
<mx:Formwidthmx:Formwidth="248"height="100"label="Button"x="10"y="10">
<mx:FormItemlabelmx:FormItemlabel="用户名"fontSize="12">
<mx:TextInputidmx:TextInputid="username"width="158"height="28"fontSize="15"textAlign="left"/>
</mx:FormItem>
<mx:FormItemlabelmx:FormItemlabel="密码"fontSize="12">
<mx:TextInputidmx:TextInputid="password"width="159"height="30"fontSize="15"textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Buttonidmx:Buttonid="loginbtn"click="login()"label="登录"textAlign="center"fontSize="12"x="190"y="118"/>
</mx:TitleWindow>
<mx:TitleWindowxmlns:mxmx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"
width="286"height="208"layout="absolute"title="用户登录">
<mx:Metadata>
[Event("btnClicked")]
</mx:Metadata>
<mx:Script>
<!--[CDATA[
[Inspectable]
publicvarstatus:String;
privatefunctionlogin():void{
dispatchEvent(newEvent("btnClicked"));
}
]]-->
</mx:Script>
<mx:Formwidthmx:Formwidth="248"height="100"label="Button"x="10"y="10">
<mx:FormItemlabelmx:FormItemlabel="用户名"fontSize="12">
<mx:TextInputidmx:TextInputid="username"width="158"height="28"fontSize="15"textAlign="left"/>
</mx:FormItem>
<mx:FormItemlabelmx:FormItemlabel="密码"fontSize="12">
<mx:TextInputidmx:TextInputid="password"width="159"height="30"fontSize="15"textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Buttonidmx:Buttonid="loginbtn"click="login()"label="登录"textAlign="center"fontSize="12"x="190"y="118"/>
</mx:TitleWindow>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
然后使用
viewplaincopytoclipboardprint?
<?xmlversionxmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:widget="*">
<mx:Script>
<!--[CDATA[
importmx.controls.Alert;
privatefunctionbtnClick():void{
Alert.show("test","Test");
}
privatefunctionbtnClickHandler(event:Event):void{
Alert.show("EventbtnClickedCalled");
}
]]-->
</mx:Script>
<mx:Buttonidmx:Buttonid="bb"x="107"y="37"label="Button"click="btnClick()"/>
<widget:CLoginbtnClickedwidget:CLoginbtnClicked="btnClickHandler(event)"x="107"y="94"width="204"height="117">
</widget:CLogin>
</mx:Application>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
【编辑推荐】
- 学习笔记 Flex Panel控件内部容器大小计算方法
- Flex基础 创建***个Flex项目
- FlexBuilder教程教你如何创建自定义控件
- FlexBuilder3.0与Eclipse3.4的***结合
- 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件
