Flex事件机制(二)

上一篇简单的介绍了Flex的事件机制以及处理事件的四种方式,本篇的主要内容是利用自定义事件在父子组件之间传递数据。

       在Flex开发中,很多时候需要在父子组件之间传递数据,通过事件可以实现数据的传递,现在写一个简单的例子,在一个Flex应用中有一个TextArea,并且引入了一个自定义组件,自定义组件中有一个Button,点击这个Button,传递一个字符串在TextArea中显示。详细过程如下:

       1. 创建主应用文件和自定以组件。

       EventTest.mxml

<?xml version="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" 
			   xmlns:components="components.*">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:TextArea id="textArea" />
	<components:component1 id="component" />
</s:Application>

       components/component1.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:Button label="显示内容" />
</s:Group>

       2. 点击子组件的按钮会抛出一个事件,这个事件可以被主应用捕捉到并进行处理,显然这个事件需要我们自定义。

       events/MyEvent.as,在实际开发中,并不推荐以My起头作为类名,这里只是用于测试。

package events
{
	import flash.events.Event;	
	/**
	 * 自定义事件
	 * @author gaoshuang
	 */
	public class MyEvent extends Event
	{
		/**
		 * 显示信息
		 * @default 
		 */
		public static const SHOWINFO:String = "showInfo";		
		/**
		 * 存储数据
		 * @default 
		 */
		public var data:*;		
		/**
		 * 
		 * @param type 事件类型
		 * @param bubbles 事件是否可以冒泡,true为可以,false为不可以
		 * @param cancelable 事件是否可以取消,true为可以,false为不可以
		 */
		public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
	}
}

       Flex中声明常量使用const,并且不需要var关键字,final用于声明方法和类,详情请查看Flex API,在实际开发中,可以把自定义事件按功能类别来划分,就像Flex中包含的那些事件一样。

       3. 在自定义组件中将事件抛出,在components/component1.mxml中加入如下代码。

<fx:Script>
  <![CDATA[
    import events.MyEvent;
    // 点击button触发的函数
    protected function buttonClickHandler(event:MouseEvent):void
    {
      var myEvent:MyEvent = new MyEvent(MyEvent.SHOWINFO);
      myEvent.data = "哈哈";
      this.dispatchEvent(myEvent);
    }
  ]]>
</fx:Script>
<fx:Metadata>
  [Event(name="showInfo", type="events.MyEvent")]
</fx:Metadata>

       这里在metadata标签下声明了showInfo事件,这样,在主应用中引入的自定义组件中就会有showInfo事件属性。

       4. 在主应用中捕获事件,并处理,EventTest.mxml改变成如下代码。

<?xml version="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" 
			   xmlns:components="components.*">
	<fx:Script>
		<![CDATA[
			import events.MyEvent;
			protected function componentShowInfoHandler(event:MyEvent):void
			{
				textArea.text = event.data;
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:TextArea id="textArea" />
	<components:component1 id="component" showInfo="componentShowInfoHandler(event)" />
</s:Application>

       这里要说明一下,有两种处理方式,第一种就是这样,在子组件的metadata标签中声明了showInfo事件,如果没有声明,就找不到showInfo属性了,只能通过component.addEventListener(MyEvent.SHOWINFO, componentShowInfoHandler);这种方式来处理。

       这样就可以实现父子组件之间的数据传递,说的可能比较罗嗦。下一篇讲到的主要内容是通过EventDispatcher实现组件之间的数据传递,并不局限于父子组件,敬请关注!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏卡少编程之旅

四个Vue的写法优化技巧

3106
来自专栏机器学习实践二三事

Shell && Vim快捷键

刚买到了自己一直想买的HHKB pro 2 type S,不得不说手感什么的确实没让我失望,重点是Ctrl的位置很适合类unix环境啊,不会快捷键都不好意思敲这...

1925
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

964
来自专栏郭少华

(第二季)Vue2.0-全局API

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

721
来自专栏超然的博客

不容忽略的——CSS规范

         当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

942
来自专栏liulun

自己动手写UI库——引入ExtJs(布局)

第一:来看一下最终的效果 ? 第二:来看一下使用方法: ? 第三: Component类代码如下所示: public class Compo...

1915
来自专栏静默虚空的博客

[JSP]自定义标签库taglib

自定义标签的步骤 自定义标签的步骤大概有三步: 1.继承javax.servlet.jsp.tagext.*下提供的几个标签类,如Tag、TagSupport、...

19010
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件

each 方法用来遍历 jQuery 对象的,它的参数是一个事件处理函数,这个事件处理函数有两个参数,第一个参数是索引,第二个参数时索引对应的 DOM 对象,使...

1174
来自专栏前端说吧

CSS3中的animation动画

2805
来自专栏超然的博客

事件委托和this

  事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主...

1203

扫码关注云+社区