flex自定义组件与自定义事件

今天研究了一下flex自定义控件与事件，成功！过程详细如下：

1，首先新建一个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" >
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			//定义需要给这个自定义组件传入的属性值
			[Bindable]
			public var imgPath:String;
			[Bindable]
			public var imgName:String;

			//自定义组件中，某一个控件的事件，
			protected function UserImg_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				//通过组件的事件，创建自定义的事件，   并分发（广播）事件;当点击图片时就触发了这一事件 
				this.dispatchEvent(new customEvent(customEvent.eventName,imgName));
			}

		]]>
	</fx:Script>
	<fx:Metadata>
		//由于是自定义的组件,如何知道它有哪些事件-----通过元数据     
		//以下据表明：本组件custonImage有一个imgClicked事件（在下文中声明的事件名称）,，类似与Button组件的click事件，   
		// 类型为customEvent（在下文中声明的事件类型）,类似于Button的MouseEvent 
		[Event(name="imgClicked", type="compent.customEvent")]
	</fx:Metadata>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Image id="UserImg" width="100%" height="100%" scaleMode="stretch"  source="{imgPath}" click="UserImg_clickHandler(event)"/>
</s:Group>

2，新建一个ActionScript类文件，定义名称，选择超类为“flash.events.Event”，

package compent
{
	import flash.events.Event;
	
	//定义事件类型
	public class customEvent extends Event
	{
		//定义事件名称
		public static const eventName:String="imgClicked";
		//定义事件需要传出的参数
		public var imgNameStr:String; 
		public function customEvent(type:String,$data:String=null, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			this.imgNameStr=$data;
		}
	}
}

3，自定义组件与事件的引用

protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
	img.imgPath="toolsPng/pageLeft.png";
	img.imgName="zk";
	img.addEventListener(customEvent.eventName,showImgName);
}
function showImgName(e:customEvent):void
{
	Alert.show(e.imgNameStr);
}
<compent:customImage id="img" x="696" y="354" width="200" height="100"/>