1. 程式人生 > >精通Flex 3.0――4.2.3 動態新增按鈕——SimpleButton類

精通Flex 3.0――4.2.3 動態新增按鈕——SimpleButton類

SimpleButton類作用如名字一樣,表示一個簡單按鈕類。通過定義一個SimpleButton類,可以建立一個使用者互動的按鈕。SimpleButton用於處理使用者互動。而SimpleButton的顯示是與SimpleButton的處理過程分離的。這樣,可以使用相同的處理過程而有不同表現的SimpleButtonSimpleButton的顯示是由三種狀態——經過、按下和擡起決定的。所以,在定義按鈕的時候也需要定義一個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方法顯示出來的。