文档章节

Flex之理解Flash中的事件机制

爱吃猫的小萌鱼
 爱吃猫的小萌鱼
发布于 2014/01/11 22:30
字数 1370
阅读 85
收藏 0

上次测试中当我们点击“发送”按钮时,flex就会与后台中定义的Java方法交互并将结果返回给flex并呈现在前台页面,其实这靠的就是事件。事件贯穿在Flex中的所有过程中,如果没有事件,那么就谈不上什么人机交互。

Flash的ActionScript语言支持事件编程。在ActionScript中,每个事件都由一个事件对象表示。事件对象是flash.events.Event类或其某个子类的实例。事件对象不但存贮有关特定事件的信息,还包含便于操作事件对象的方法。事件对象有如下两个用途:

●事件对象通过将特定事件的信息存贮在一组属性中来代表实际事件。

●事件对象包含一组方法,可用于操作事件对象和影响事件处理系统的行为。

创建事件对象后,就可以通过ActionScript的API方法派发(dispatch)该事件对象。所谓的“派发”就是将该事件对象按照一定规则顺序地传递给其他对象并执行这些对象上注册的事件侦听器

这些能够收听到该事件的对象被称之为事件的目标(target)对象。我们可以编写事件侦听器对传递到目标对象上的事件进行处理。

事件侦听器是我们自己编写的,用于响应特定事件的函数和方法。事件侦听器可以是目标对象的函数和方法,也可以是其他对象上的函数和方法。但事件侦听器必须在目标对象上注册才能对传递给目标对象上的事件进行处理。

为了更好的理解Flash中的事件机制,我们通过一个小例子来看看事件是怎么进行的!

1.创建自定义事件类

在ActionScript中,自定义的事件类必须继承flash.events.Event类,下面是一个自定义的事件类TestEvent,代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.flex.ases
{
    import flash.events.Event;
    
    publicclass TestEvent extends Event
    {
       publicstaticconst TEST_EVENT:String="TEST_EVENT";
       publicvar data:Object;
       publicfunction TestEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
       {
           super(type, bubbles, cancelable);
       }
    }
}

这个类自定义了一个事件类型“TEST_EVENT”,而data则用于存贮事件信息。而TestEvent类的构造函数必须提供如上所示的3个参数,这么做是为了父类的构造函数提供所需的函数:

●type:表示事件类型的一个字符串。他不仅表示具体事件对象的含义,而且事件侦听器也是根据事件的类型对事件进行侦听。事件类型的字符串一般都是用静态变量定义的,即用const关键字修饰。

●bubbles:表示事件是否“冒泡”。这个以后会学习到。

●cancelable:表示事件调度过程中,目标对象上对事件的默认处理是否可以取消。这个稍后也会仔细分析的。

2.创建事件适配器

在ActionScript中,只有flash.events.EventDispathc类及其子类的实例才能派发事件。

派发事件的方法则是以要被派发的事件对象作为参数来调用EventDispatch类或其子类实例的dispatchEvent()方法。

在ActionScript中,只有flash.events.EventDispathc类及其子类的实例才可以成为事件的目标对象,因为只有flash.events.EventDispathc类及其子类的实例才可以注册事件侦听器,从而决定怎么处理达到该目标对象上的事件。

下面代码中创建了一个TestEventDispatch类并继承了EventDispatcher类,代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package com.flex.ases
{
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.events.IEventDispatcher;
    
    import mx.controls.Alert;
    
    publicclass TestEventDispatch extends EventDispatcher
    {
       publicfunctionTestEventDispatch(target:IEventDispatcher=null)
       {
           super(target);
           this.addEventListener(TestEvent.TEST_EVENT,testEventMethod);
       }
       
       protectedfunction testEventMethod(event:TestEvent):void
       {
           // TODOAuto-generated method stub
           Alert.show(event.data as String,"提示");
       }
       publicfunctioncreateTestEvent():void{
           var testEvent:TestEvent=new TestEvent(TestEvent.TEST_EVENT);
           testEvent.data="你已经触发自定义事件!";
           this.dispatchEvent(testEvent);
       }
       
    }
}

通过上面这段代码我们可以看出,TestEventDispatch类中createTestEvent方法中创建了一个TestEvent事件的实例,并指定此事件的类型为TEST_EVENT,并给此事件实例添加了一条信息。然后我们把此实例作为派发事件的参数进行派发事件。

我们在此类的构造函数中添加事件侦听器,并用testEventMethod作为TEST_EVENT事件类型的处理方法。

3.测试

现在开始调用此事件,代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xmlversion="1.0" encoding="utf-8"?>
<s:Application xmlns:fx=" http://ns.adobe.com/mxml/2009"
              xmlns:s=" library://ns.adobe.com/flex/spark"
              xmlns:mx=" library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    
    <fx:Script>
       <![CDATA[
           import com.flex.ases.TestEvent;
           import com.flex.ases.TestEventDispatch;
           protectedfunction test_clickHandler():void
           {
              // TODOAuto-generated method stub
              var testEventDispatch:TestEventDispatch=newTestEventDispatch();
              testEventDispatch.createTestEvent();
              
           }
       ]]>
    </fx:Script>
    
    <fx:Declarations>
       <!-- Place non-visualelements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Label x="34"y="97"fontSize="19" text="点击按钮触发自定义事件:"/>
    <s:Button id="test" x="284" y="87" height="28" label="触发" click="test_clickHandler()"
             fontSize="18"/>
</s:Application>

运行此页面,如下所示:

 

点击“触发”按钮,则会调用自定义的TestEvent事件,页面如下所示:

 

好了,经过这么一学习,现在对flash的事件机制有了一个质地的理解。

原创文章,转载请注明出处:http://www.it161.com/article/webDetail?articleid=140111222132

更多IT文章,请访问:http://www.it161.com/

© 著作权归作者所有

爱吃猫的小萌鱼
粉丝 1
博文 16
码字总数 10296
作品 0
东城
私信 提问
探究 Flex 组件的生命周期

司 美琴, 开发工程师, IBM 简介: 最为新一代 RIA 技术的典型框架,Adobe Flex 既有传统桌面程序的交互相应性强,健壮性以及容易编程调试的特点,又有着 Web 程序容易部署,更丰富多彩的 UI...

SeanCai
2012/03/08
0
1
深圳诚聘Flex工程师

我们是一家教育集团下的软件开发公司,目前主要负责教学平台以及相关的教育游戏开发。 公司名称为:耀华深圳信息咨询有限公司 网址为:http://www.ycef.com 工作地点:深圳 由于是内部招聘,故...

常雨
2011/04/25
198
1
Adobe Flex 4 、Flash Builder 4 正式发布

Adobe Flex SDK 4 、Flash Builder 4 正式发布(中文版同时发布) Flex主要是开发者(程序员)的工具,并且开发Flex应用程序的方式和开发Flash RIA(Rich Internet Application,富互联网应用...

红薯
2010/03/22
665
0
Flex通信篇——Flex和外部应用程序进行通信

Flash To EXE Flex端 Flex创建一个Flex Project命名为Demo1,类型选Web application(runs in Flash Player) 在Demo1.mxml上添加一个按钮,并未按钮添加点击事件 private function ButtonCli...

彭博
2012/03/09
229
0
15 非常有用的 Adobe Flex 教程

Adobe Flex是最初由Macromedia公司在2004年3月发布的,基于其专有的Macromedia Flash平台,它是涵盖了支持RIA(Rich Internet Applications)的开发和部署的一系列技术组合。Flex是开发富互联...

红薯
2011/09/30
11.7K
5

没有更多内容

加载失败,请刷新页面

加载更多

solidity智能合约如何判断地址为0或空

智能合约地址判断 在旧版本中可使用以下代码来进行比较: owner != 0x0 但如果在新版本中使用,则会提示错误信息。 那么,如何正确使用来比较地址是否为空呢。 解决方案 可以使用address(0...

程序新视界
13分钟前
2
0
RDS 5.7三节点企业版时代的数据一致性解决方案

  上篇我们看到了在MySQL主备模式下,我们在数据一致性上做了不少事情,但解决方案都有一定的局限性,适合部分场景或者解决不彻底的问题。随着以Google Spanner以及Amazon Aruora 为代表的...

阿里云官方博客
15分钟前
1
0
【百度飞浆AI Studio】1、百度飞浆AI Studio的初次使用

百度在AI人工智能方面的发力巨大,开源了优秀的PaddlePaddle平台,为开发者提供支持。 环境方面和硬件配备方面如果对于新手来说还是比较麻烦,及时使用Docker也还是对使用者有一定的门槛要求...

-个俗人
18分钟前
1
0
SaaS

什么是SaaS? SaaS(Software as a Service),即多租户(或多承租)软件应用平台. SaaS是这样一种架构模式:它让多个不同环境的用户使用同一套应用程序,且保证用户之间的数据相互隔离。 多租...

禅明
21分钟前
1
0
Nginx常用命令

#Nginx常用命令 nginx -V(大写)查看已安装的nginx安装了什么模块及其详细版本信息nginx -v查看nginx版本nginx -tnginx检查配置文件是否正确,同时显示配置文件路径nginx -c...

我爱吃炒鸡
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部