精通Flex 3.0――4.2.3 動態新增按鈕——SimpleButton類
SimpleButton類作用如名字一樣，表示一個簡單按鈕類。通過定義一個SimpleButton類，可以建立一個使用者互動的按鈕。SimpleButton用於處理使用者互動。而SimpleButton的顯示是與SimpleButton的處理過程分離的。這樣，可以使用相同的處理過程而有不同表現的SimpleButton。SimpleButton的顯示是由三種狀態——經過、按下和擡起決定的。所以，在定義按鈕的時候也需要定義一個SimpleButton狀態的類用來表現SimpleButton。
與其他顯示類不同，SimpleButton不可以直接使用。建立簡單按鈕實際是建立SimpleButton
（1）建立一個Flex專案，命名為“SimpleButtonStu”。在專案下建立FlexStuButtonState類和FlexStuButton類，建立這兩個類實際上也是建立兩個對應的ActionScript檔案。FlexStuButton.as檔案如下程式碼所示。
package flex.stu
{
//匯入包
import flash.display.*;
import flash.display.SimpleButton;
import flash.events.*;
import mx.controls.Alert;
import flex.stu.FlexStuButtonState;
//宣告FlexStuButton類,繼承於SimpleButton
public class FlexStuButton extends SimpleButton
{
//宣告為未選中狀態
public var selected:Boolean = false;
//宣告一個具有構造引數的構造器
public function FlexStuButton(txt:String)
{
//建立一個擡起狀態
upState= new FlexStuButtonState(0xFFFFFF, txt);
//建立一個按下狀態
downState = new FlexStuButtonState(0xCCCCCC, txt);
//單擊的狀態
hitTestState = upState;
//經過的狀態
overState = downState;
//新增一個單擊事件
addEventListener(MouseEvent.CLICK, buttonClicked);
}
//建立一個響應單擊事件的函式
public function buttonClicked(e:Event)
{
//彈出一個視窗
Alert.show("單擊了按鈕");
}
}
}
SimpleButton的樣式可以是任何一種由使用者建立的樣式，如文字、圖片、圖形或者動畫。在本例項中採用了一個簡單的本文加圖形的方式。使用了一個Sprite類的子類FlexStuButtonState作為樣式類。將SimpleButton的子類FlexStuButton類與FlexStuButtonState類結合在一起使用，就可以實現一個簡單按鈕的效果。
這裡引入了一個mx.controls.Alert類。這個類的作用是彈出一個對話方塊，用於顯示資訊。這個類在Flex應用中經常用到。通過這個類可以顯示提示資訊給使用者，也可以使用這個類讓使用者確認操作的內容。關於Alert類的詳細使用方法會在後面的章節詳細講解。在這裡使用mx.controls.Alert彈出一個提示對話方塊。
向FlexStuButton類添加了一個監聽器。這個監聽器用來響應作用在FlexStuButton上的滑鼠單擊事件（MouseEvent.CLICK）。當滑鼠單擊事件發生的時候，呼叫buttonClicked函式進行處理。FlexStuButtonState.as檔案程式碼如下所示。
package flex.stu
{
//匯入包
import flash.display.*;
import flash.text.TextField;
import flash.text.TextFormat;
//定義一個繼承於Sprite的按鈕樣式類FlexStuButtonState
public class FlexStuButtonState extends Sprite
{
//宣告一個包可見的TextField例項用於顯示按鈕上的文字
internal var label:TextField;
//建立一個建構函式，在構建按鈕的時候就傳入按鈕的顏色和顯示文字
public function FlexStuButtonState(color:uint, labelText:String)
{
//建立按鈕文字的例項
label = new TextField();
//將文字內容賦值給TextField例項
label.text = labelText;
//控制文字的位置
label.x = 2;
//宣告文字格式
var format:TextFormat = new TextFormat("bold");
//設定文字格式
label.setTextFormat(format);
//設定按鈕的寬度
var buttonWidth:Number = label.textWidth + 10;
//建立一個按鈕的幾何圖形
var background:Shape = new Shape();
//填充顏色
background.graphics.beginFill(color);
//確定邊界的顏色和粗細
background.graphics.lineStyle(1, 0x000000);
//繪畫一個矩形作為按鈕的形狀
background.graphics.drawRoundRect(0, 0, buttonWidth, 18, 4);
//新增新增背景和文字給按鈕
addChild(background);
addChild(label);
}
}
}
在FlexStuButtonState類中，使用了drawRoundRect方法。使用這個方法繪畫出來的是一個向量圖形。這樣可以大大減小SWF檔案的體積。同時定義了幾種狀態的樣式。這些樣式用於區分在使用按鈕時候按鈕不同顯示狀態。
（2）開啟SimpleButtonStu.mxml檔案，修改SimpleButtonStu.mxml程式碼如下所示。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" click="addSimpleButton()">
<mx:Script>
<![CDATA[
//引入包
import flex.stu.FlexStuButton;
//建立一個FlexStuButton的例項
private var flexbutton:FlexStuButton=new FlexStuButton("簡單按鈕");
//建立一個函式新增按鈕到舞臺上
private function addSimpleButton():void
{
//向舞臺上新增按鈕
stage.addChild(flexbutton);
//調整按鈕的位置
flexbutton.x=100;
flexbutton.y=100;
}
]]>
</mx:Script>
</mx:Application>
在建立FlexStuButton時，傳入一個字串“簡單按鈕”來標明按鈕顯示的文字。通過addSimpleButton函式響應舞臺單擊事件，並且在addSimpleButton函式中向舞臺新增按鈕。
（3）儲存並執行SimpleButtonStu應用，如圖所示。單擊舞臺後，建立按鈕並加添到舞臺上，如圖所示。
所示。如果單擊按鈕會彈出一個確認對話方塊，如圖所示。
將滑鼠移到出現的按鈕之上的時候發現按鈕的狀態發生改變，如圖
按鈕狀態改變是在FlexStuButtonState類中，定義的幾個狀態顏色切換的效果。而彈出的對話方塊就是在FlexStuButton類的定義響應click事件中呼叫的Alert類的show方法顯示出來的。