使用事件監(jiān)聽器

當我們開發(fā)Adob Flex程序時，事件處理是其中最基本也是最重要的一項任務。事件讓我們知道在一個Flex程序發(fā)生了一些事情。他們可以由用戶設備(如鼠標，鍵盤)產(chǎn)生，或者是外部輸入，如一個網(wǎng)絡服務調用的返回。當界面或是組件的生命周期發(fā)生變化時也變引發(fā)事件，例如一個組件的創(chuàng)建或銷毀，或是組件的調整。

我們可以在我們的代碼中使用事件監(jiān)聽器來處理這些事件。事件監(jiān)聽器是我們?yōu)榱颂幚硖囟ㄊ录帉懙暮瘮?shù)或是類的方法。他們也被稱之為事件處理器。

在這一節(jié)我們將會顯示如何使用一個事件監(jiān)聽器。我們將會學習如何為一個Button控件編寫一個事件監(jiān)聽器，并且學習如何使用兩種不同的方法將這個監(jiān)聽器與Button的click事件相關聯(lián)。

設置工程
在我們開始這一節(jié)之前，首先要確保我們完成了下面的任務：
創(chuàng)建了Lessons工程
打開自動編譯選項

創(chuàng)建一個簡單的用戶界面

我們決定為我們的在線商店創(chuàng)建一個簡單的貨幣轉換器。我們希望用戶可以指定美元數(shù)量，點擊按鈕后得到相應的日元數(shù)量。第一步是要設計一個簡單的用戶界面。

1 在瀏覽視圖中選擇Lessons工程，創(chuàng)建一個名為Events.mxml的新程序文件。

2 將Event.mxml程序設置為默認編譯的程序文件。

3 在MXML編輯器的設計模式中，向布局視圖中拖放一個Panel容器，并且設置如下的屬性：
Title: Currency Converter
Width: 450
Height: 150
X: 20
Y: 20

4 向Panel容器中添加兩個Label控件，一個TextInput控件以及一個Button控件。

5 安排控件，最終的結果如下圖所示：

6 選擇第一個Label控件，將其text屬性設置為Price in Dollars。

7 選擇TextInput控件，將其id屬性設置為txtPrice。

8 選擇按鈕控件并設置如下的屬性：
ID: btnConvert
Label: Convert to Yen

9 選擇第二個Label控件，執(zhí)行如下的操作：
清除他的Text屬性
將其id屬性設置為lblResult

10 設置控件的位置，最終的布局如下圖所示：

11 切換到代碼模式檢測Flex Builder生成的代碼。
代碼清單如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute">
<mx:Panel x="20" y="20" width="450" height="150" layout="absolute"
title="Currency Converter">
<mx:Label x="25" y="37" text="Price in Dollars"/>
<mx:Label x="120" y="65" id="lblResults"/>
<mx:TextInput x="120" y="35" id="txtPrice"/>
<mx:Button x="290" y="35" label="Convert to Yen" id="btnConvert"/>
</mx:Panel>
</mx:Application>

12 保存文件。

編寫一個事件監(jiān)聽器

下一步，我們將會為我們的按鈕編寫一個事件監(jiān)聽器。我們希望這個事件監(jiān)聽器由一個可以計算并且顯示指定美元轉換為日元的ActionScript函數(shù)組成。

1 切換到代碼模式并且在<mx:Application>標簽后放置插入點。

2 添加<mx:Script>標簽。

3 輸入下面的CDATA結構：
public function convertCurrency():void {
var rate:Number = 120;
var price:Number = Number(txtPrice.text);
if (isNaN(price)) {
lblResults.text = "Please enter a valid price.";
} else {
price = price * rate;
lblResults.text = "Price in Yen: " + String(price);
}
}

關鍵字public指定了這個函數(shù)的作用域。在這個例子中，這個函數(shù)在我們整個代碼中均可見。關鍵字void指定了這個函數(shù)的返回類型。所有的ActionScript函數(shù)都應指定一個返回類型。convertCurrency函數(shù)并沒有返回任何值。

用戶輸入的價格，txtPrice.text,是作為數(shù)字的情況，然后進行驗證來保證用戶輸入的為一個數(shù)字。如果價格為一個數(shù)字，就會執(zhí)行計算過程，并且將結果返回為一個字符串在lblResult控件中進行顯示。

在一個真正的程序中，匯率的值應是運行時通過調用一個網(wǎng)絡服務來進行設置。

4 保存文件。

將監(jiān)聽器與MXML事件相關聯(lián)

將監(jiān)聽器與一個事件相關聯(lián)，或者是說是注冊，就意味著在我們的程序中包含通報由一個特定的源引發(fā)特定類型的事件的監(jiān)聽器。對于我們的程序而言，我們希望事件監(jiān)聽器可以通報按鈕的點擊事件。當事件發(fā)生時，監(jiān)聽器執(zhí)行貨幣計算并且顯示結果。

注冊監(jiān)聽器的一個方法就是將其指定為<mx:Button>標簽的click屬性的值。

我們也可以使用ActionScript來注冊監(jiān)聽器。

1 在設計模式中，選擇Button控件并且在屬性視圖的On Clcik test輸入框中輸入convertCurrency()。

2 保存文件，待到編譯完成后運行程序。

3 測試運行程序。

將監(jiān)聽器與一個ActionScript事件相關聯(lián)

我們使用ActionScript來將監(jiān)聽器與一個特定的事件相關聯(lián)，例如鼠標點擊。當這些事件發(fā)生時，監(jiān)聽器就會通報并且運行。

1 切換到代碼模式。

2 刪除<mx:Button>標簽中的click屬性的值。

3 在我們的convertCurrency事件監(jiān)聽器的參數(shù)列表中聲明一個MouseEvent類型參數(shù)，或者是MouseEvent類的一個子類。
public function convertCurrency(e:MouseEvent):void {

在這個例子中，這個監(jiān)聽器函數(shù)帶有一個flash.Events.MouseEvent類型的對象，他是Event類的一個子類。當一個監(jiān)聽器函數(shù)調用時，F(xiàn)lex隱式的創(chuàng)建一個MouseEvent對象并且傳遞給函數(shù)。所以，在我們事件監(jiān)聽器函數(shù)的參數(shù)列表中聲明一個MouseEvent對象是一個很好的習慣。

4 在convertCurrency函數(shù)中輸入下面的代碼：
public function createListener():void {
btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}

當用戶點擊按鈕時，convertCurrency事件監(jiān)聽器就會被通報發(fā)生了事件。監(jiān)聽器函數(shù)執(zhí)行貨幣運算并且顯示結果。

腳本塊代碼如下：
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;

public function createListener():void {
btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}

public function convertCurrency(e:MouseEvent):void {
var rate:Number = 120;
var price:Number = Number(txtPrice.text);
if (isNaN(price)) {
lblResults.text = "Please enter a valid price.";
} else {
price = price * rate;
lblResults.text = "Price in Yen: " + String(price);
}
}
]]>
</mx:Script>

5 在<mx:Application>標簽中，輸入下面的屬性，這樣就地調用createListener()函數(shù)，并且在程序創(chuàng)建之后就會立刻注冊事件監(jiān)聽器。
creationComplete="createListener();"

最終的程序代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute" creationComplete="createListener();">
<mx:Script>
<![CDATA[

import flash.events.MouseEvent;

public function createListener():void {
btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}

public function convertCurrency(e:MouseEvent):void {
var rate:Number = 120;
var price:Number = Number(txtPrice.text);
if (isNaN(price)) {
lblResults.text = "Please enter a valid price.";
} else {
price = price * rate;
lblResults.text = "Price in Yen: " + String(price);
}
}
]]>
</mx:Script>

<mx:Panel x="20" y="20" width="450" height="150" layout="absolute"
title="Currency Converter">
<mx:Label x="25" y="37" text="Price in Dollars"/>
<mx:Label x="120" y="65" id="lblResults"/>
<mx:TextInput x="120" y="35" id="txtPrice"/>
<mx:Button x="290" y="35" label="Convert to Yen" id="btnConvert"/>
</mx:Panel>
</mx:Application>

6 保存文件，編譯完成后運行。