Flex基礎控件--Button

Button是flex中最基本也是相對簡單的控件之一，基本對他沒有什麼特殊需求，他的那麼多屬性完全可以滿足我們的需求，而且我們隻需要了解幾個關鍵的常用屬性便OK。如下常用屬性：

1、emphasized：擷取或設定一個布爾值，訓示當按鈕處于彈起狀态時，Button 元件周圍是否繪有邊框。預設為：​<code>​false​</code>​

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

3、Icon:按扭上顯示的圖示。如：icon="@Embed('Images/mm-icon.png')",button有基本各種狀态都有icon，要把Button搞好最主要還是看美工的功底。 

4、click:按扭的監聽單擊事件所的方法。除了click也可以監聽它的其他識見，如​<code>​mouseMove​</code>​、​<code>​mouseOver​</code>​、​<code>​mouseOut​</code>​、​<code>​rollOver​</code>​、​<code>​rollOut​</code>​、​<code>​mouseDown​</code>​ 和 ​<code>​mouseUp​</code>​。

下面是tour flex中的一個例子

 &lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" viewSourceURL="srcview/index.html"

verticalAlign="middle" horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]"&gt;

&lt;mx:Script&gt;

&lt;!--[CDATA[

import mx.controls.Alert;

]]--&gt;

&lt;/mx:Script&gt;

&lt;mx:Panel title="Button Control Example" layout="vertical" height="100" color="0xffffff" borderAlpha="0.15"

paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center"&gt;

&lt;mx:HBox horizontalGap="10" verticalAlign="middle"&gt;

&lt;!-- normal button --&gt;

&lt;mx:Button id="defaultButton" color="0x323232" label="Default Button" click="{Alert.show('Default Button Pressed');}" /&gt;

&lt;mx:Button id="iconButton" label="Button With Icon" labelPlacement="right" paddingLeft="2"

icon="@Embed('assets/flex_icon.png')" downIcon="@Embed('assets/flex_icon_dwn.png')"

color="0x323232" click="{Alert.show('Button With Icon Pressed');}" /&gt;

&lt;mx:Button id="skinnedButton" label="Skinned Button" 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('Skinned Button Pressed');}" /&gt;

&lt;mx:Button id="customButton" label="CUSTOM BUTTON" 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('CUSTOM BUTTON Pressed');}"/&gt;

&lt;/mx:HBox&gt;

&lt;/mx:Panel&gt;

&lt;/mx:Application&gt;

不要被button那麼多的屬性給吓到，其實很多都是icon和style。

說到Button技術上，我用的最多的還是利用button的自定義事件：

&lt;mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="使用者登入"&gt; &lt;mx:Metadata&gt;

[Event("btnClicked")]

&lt;/mx:Metadata&gt;

[Inspectable]

public var status : String;

private function login(): void {

dispatchEvent(new Event("btnClicked"));

}

&lt;mx:Form width="248" height="100" label="Button" x="10" y="10"&gt;

&lt;mx:FormItem label="使用者名" fontSize="12"&gt;

&lt;mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/&gt;

&lt;/mx:FormItem&gt;

&lt;mx:FormItem label="密碼" fontSize="12"&gt;

&lt;mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"

displayAsPassword="true"/&gt;

&lt;/mx:Form&gt;

&lt;mx:Button id="loginbtn" click="login()" label="登入" textAlign="center" fontSize="12" x="190" y="118"/&gt;

&lt;/mx:TitleWindow&gt;

然後使用

&lt;?xml version="1.0" encoding="utf-8"?&gt;

&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*"&gt;

private function btnClick() : void {

Alert.show("test","Test");

private function btnClickHandler(event: Event) : void {

Alert.show("Event btnClicked Called");

&lt;mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/&gt;

&lt;widget:CLogin btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117"&gt;

&lt;/widget:CLogin&gt;