Flex4 事件机制2

前端开发作者： 2024-08-25 16:10:01

在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. 点击子组件的按钮会抛出一个事件，这个事件可以被主应用捕捉到并进行处理，显然这个事件需要我们自定义。

package events
{
	import flash.events.Event;	
	/**
	 * 自定义事件
	 * 
	 */
	public class TestEvent 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 TestEvent(type:String,bubbles:Boolean=false,cancelable:Boolean=false)
		{
			super(type,bubbles,cancelable);
		}
	}
}

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

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

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

<?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.TestEvent;
			protected function componentShowInfoHandler(event:TestEvent):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(TestEvent.SHOWINFO,componentShowInfoHandler);这种方式来处理。

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_68482.html

相关资讯： flex4 flex 4 事件机制 2