flex自定义组件和自定义事件

最新推荐文章于 2019-01-08 02:06:18 发布

xd1846

最新推荐文章于 2019-01-08 02:06:18 发布

阅读量673

点赞数

CC 4.0 BY-SA版权

分类专栏： Flex

本文链接：https://blog.youkuaiyun.com/u013258319/article/details/17511991

Flex 专栏收录该内容

7 篇文章

订阅专栏

本文通过生动的例子解释了自定义事件与组件的概念，并详细介绍了如何在Flex中创建自定义事件类MyEvent及自定义组件，同时展示了如何通过事件监听器响应这些事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 看了一个帖子，自己写了一下。主要讲了自定义组件跟自定义事件。
先看一下自定义事件。就跟在殿堂之路中写道一样。代码如生活，理解代码就如理解生活一样一样的。
什么是事件，事件是怎么运作的呢？我是这样理解的：
比如去了一家餐馆就餐，首先要制定服务员：我要求穿白裙子的那个美女为我服务（端茶倒水，上菜）；所以我落座后，说的话，都是穿白裙子妹妹，暂且叫，白美美。
这里指定服务员就比如在程序里注册事件监听器。mine.addEventListener( "点菜","白美美")。意思是如果mine发出“点菜” 的事件，“白美美”要去做。（注意，是如果，现在还没有发生这件事情，所以白美美什么事情也不会做。）假如 顾客类是 Customer， 则mine是Customer的一个实例。是顾客的一个实例如果发出点菜请求，则白美美要去做了。
顾客发出事件是：dispatchEvent（new Event）；这时候就会触发白美美为我们服务。
这里自定义一个自己的类。MyEvent.as
继承 Event。如下：
package classEvent
{
	import flash.events.Event;
	import flash.text.ReturnKeyLabel;
	
	
	public class MyEvent extends Event
	{
		public static const  PREVIEW:String="提交";
		public var _data:String;
		public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		public function get data():String
		{
			return _data;
		}
		public function set data(data:String):void
		{
			_data=data;
		}
		
		
	}
}

自定义了一个类，这个事件是“提交”事件。（谁注册事件，谁发出事件）。当发出的时间跟注册的事件一样的时候，这时候侦听器才会执行。下面自定义一个组件，组件发出该事件。（在主应用程序里提前注册该事件）。发出事件后，该组件在主应用程序里早已经在那注册了，一旦事件发生后，监听器就会执行。

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import classEvent.MyEvent;
			private function previewHanler(evt:MouseEvent):void
			{
				dispatchEvent(new MyEvent(MyEvent.PREVIEW));
			}
		]]>
	</fx:Script>
	
	<s:Button x="121" y="47" label="按钮"  click="previewHanler(event)"/>

</mx:Canvas>

然后把在组件拖到主应用程序中。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   xmlns:myComponent="myComponent.*"
					   creationComplete="initApp()">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import classEvent.MyEvent;
			
			import mx.controls.Alert;
			private function initApp():void
			{
				mycomponet.addEventListener(MyEvent.PREVIEW, previewHandler);
			}
			
			private function previewHandler(e:MyEvent):void
			{
				/* Alert.show("hello preview"); */
				textpr.text="hello preview";
			}
		]]>
	</fx:Script>
	<myComponent:MyComp id="mycomponet" x="113" y="93">
	</myComponent:MyComp>
	<s:TextArea id="textpr" x="200" y="208"/>
</s:WindowedApplication>