使用事件监听器

使用事件监听器

当我们开发Adob Flex程序时，事件处理是其中最基本也是最重要的一项任务。事件让我们知道在一个Flex程序发生了一些事情。他们可以由用户设备(如鼠标，键盘)产生，或者是外部输入，如一个网络服务调用的返回。当界面或是组件的生命周期发生变化时也变引发事件，例如一个组件的创建或销毁，或是组件的调整。

我们可以在我们的代码中使用事件监听器来处理这些事件。事件监听器是我们为了处理特定事件而编写的函数或是类的方法。他们也被称之为事件处理器。

在这一节我们将会显示如何使用一个事件监听器。我们将会学习如何为一个Button控件编写一个事件监听器，并且学习如何使用两种不同的方法将这个监听器与Button的click事件相关联。

 

设置工程
在我们开始这一节之前，首先要确保我们完成了下面的任务：
创建了Lessons工程
打开自动编译选项

 

创建一个简单的用户界面

我们决定为我们的在线商店创建一个简单的货币转换器。我们希望用户可以指定美元数量，点击按钮后得到相应的日元数量。第一步是要设计一个简单的用户界面。

1 在浏览视图中选择Lessons工程，创建一个名为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控件，执行如下的操作：
清除他的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 保存文件。

 

编写一个事件监听器

下一步，我们将会为我们的按钮编写一个事件监听器。我们希望这个事件监听器由一个可以计算并且显示指定美元转换为日元的ActionScript函数组成。

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指定了这个函数的作用域。在这个例子中，这个函数在我们整个代码中均可见。关键字void指定了这个函数的返回类型。所有的ActionScript函数都应指定一个返回类型。convertCurrency函数并没有返回任何值。

用户输入的价格，txtPrice.text,是作为数字的情况，然后进行验证来保证用户输入的为一个数字。如果价格为一个数字，就会执行计算过程，并且将结果返回为一个字符串在lblResult控件中进行显示。

在一个真正的程序中，汇率的值应是运行时通过调用一个网络服务来进行设置。

4 保存文件。

 

将监听器与MXML事件相关联

将监听器与一个事件相关联，或者是说是注册，就意味着在我们的程序中包含通报由一个特定的源引发特定类型的事件的监听器。对于我们的程序而言，我们希望事件监听器可以通报按钮的点击事件。当事件发生时，监听器执行货币计算并且显示结果。

注册监听器的一个方法就是将其指定为<mx:Button>标签的click属性的值。

我们也可以使用ActionScript来注册监听器。

1 在设计模式中，选择Button控件并且在属性视图的On Clcik test输入框中输入convertCurrency()。

2 保存文件，待到编译完成后运行程序。

3 测试运行程序。

 

将监听器与一个ActionScript事件相关联

我们使用ActionScript来将监听器与一个特定的事件相关联，例如鼠标点击。当这些事件发生时，监听器就会通报并且运行。

1 切换到代码模式。

2 删除<mx:Button>标签中的click属性的值。

3 在我们的convertCurrency事件监听器的参数列表中声明一个MouseEvent类型参数，或者是MouseEvent类的一个子类。
public function convertCurrency(e:MouseEvent):void {

在这个例子中，这个监听器函数带有一个flash.Events.MouseEvent类型的对象，他是Event类的一个子类。当一个监听器函数调用时，Flex隐式的创建一个MouseEvent对象并且传递给函数。所以，在我们事件监听器函数的参数列表中声明一个MouseEvent对象是一个很好的习惯。

4 在convertCurrency函数中输入下面的代码：
public function createListener():void {
    btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}

当用户点击按钮时，convertCurrency事件监听器就会被通报发生了事件。监听器函数执行货币运算并且显示结果。

脚本块代码如下：
<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()函数，并且在程序创建之后就会立刻注册事件监听器。
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 保存文件，编译完成后运行。