使用事件监听器
当我们开发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 保存文件,编译完成后运行。
相关推荐
android 外部类作为事件监听器类 ,外部类形式的事件监听器不能自由访问创建GUI界面
当你将一个类用作事件监听器时,你已经设置好一个特定的事件类型,它会用该类进行监听。接下来的操作是:一个匹配的监听器必须被加入到该组件中 组件被创建之后,可以在组件上调用如下方法来将监听器与它联系起来 ...
2. 对某个源注册一个监听器,此源便成为一个事件源,当事件源上发生某一个动作时,监听器的某个方法将会被调用执行,在执行事件监听器的这个方法时,同时会把事件监听对象传递给此方法,开发人员在监听器中可以拿到...
JAVA事件监听器的四种实现方式,条理清晰,简明易懂,看过就学会
鼠标相应,监听器的设置等简单的代码,希望对你有帮助
使用Qt封装的支持Windows、Linux的跨平台全局鼠标、键盘事件监听器库
事件监听器
本资源用于servlet事件监听器和JSP基础学习,非常适合新手学习
定义一个按钮bn,并通过创建匿名内部类实现事件监听bn是否被按下。
Passive Event Listeners - 被动事件监听器在写webapp页面的时候,Chrome 提醒 [Violat
简单好用的全局监听器,没有用任何的第三方库,代码简单明了
ProductivityToolkit-Unity事件监听器系统插件 Unity事件监听器系统 直观且快速地设置自定义事件,用于减少对象依赖的常见方法!几乎没有额外的代码来结构化游戏逻辑,可以通过拖放在检查器中处理事件订阅,可以在...
1.原理: 当范围对象的状态发生变化的时候,服务器自动调用监听器对象中的方法。 例如:创建一个“人”类Class Person 人拥有吃的方法public void eat(){},我们的目的是,在这个人... 2.3事件监听器是由开
是笔者学习java swing事件、监听器、接口方法的总结,希望对初学java者有所帮助,是word格式,希望有人进一步总结。
JList事件监听器方法实现代码
按钮单击事件一例,Android环境下,单击按钮后,改变 按钮背景颜色,通过这个功能来练习单击事件的监听器用法: super.onCreate(savedInstanceState); setContentView(R.layout.main);//设置当前屏幕 Button ...
Java事件处理机制- 事件监听器的四种实现方式 分析的非常好
Java事件监听器即一组动作接口。如键盘事件KeyEvent对应的接口是: public interface KeyListener extends EventListener { public void keyPressed(KeyEvent ev); public void keyReleased(KeyEvent ev); public ...
主要介绍了Java设计模式之监听器模式,结合实例形式较为详细的分析了java设计模式中监听器模式的概念、原理及相关实现与使用技巧,需要的朋友可以参考下
keycloak-kafka-事件监听器自定义事件监听器,将所有Keycloak事件发布到Kafka