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实现组件之间的数据传递,并不局限于父子组件,敬请关注!
本文来自:高爽|Java And Flex Corder,原文地址:http://blog.csdn.net/ghsau/article/details/7392188。