自定义组件与自定义事件(组件的数传递)

自定义组件与自定义事件(组件的数传递)
1. 新建一个Flex工程 File-New-Flex Project
2. 为工程命一个名字（如：CustomComponent）
3. 在Flex Navigator视图下展开CustomComponent – src 右击src文件夹新建一个文件夹components
4. 新建一个组件 File – new – MXML component 如命为MyIntroduce 路径为CustomComponent/src/components
[img]http://dl.iteye.com/upload/picture/pic/85723/bb8a3e31-17fc-31d4-b63e-03deb53acd82.jpg[/img]
5. 打开MyIntroduce.mxml为组件添加属性和控件并做简单的数据绑定

[img]http://dl.iteye.com/upload/picture/pic/85721/4f6239d3-f66d-3a9c-bda1-bdaf17775d59.jpg[/img]

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
		/**
		 * 为组件添加两个属性
		 */
			[Bindable]
			public var myName:String;
			[Bindable]
			public var myPosition:String;
		]]>
	</mx:Script>
	<mx:Label text="名字："/>
	<mx:TextInput id="myname" text="{myName}"/>
	<mx:Label text="职位："/>
	<mx:TextInput id="myposition" text="{myPosition}"/>
	<mx:Button label="确定" id="ok"/>
</mx:VBox>

6. 返回到应用程序文件CustomComponent.mxml Design视图 ,在Components视图下展开Custom文件夹

http://dl.iteye.com/upload/picture/pic/85719/57d3e7da-1c9e-3068-9521-0146d587e130.jpg
将MyIntroduce组件拖入设计区,然后再切换到Source视图下看看代码

[img]http://dl.iteye.com/upload/picture/pic/85717/d99a3a91-404f-3df9-a03b-20fb9e57aba7.jpg[/img]

[img]http://dl.iteye.com/upload/picture/pic/85715/805400dc-b940-3368-8422-44649b2a91a5.jpg[/img]
Flex已经自动为我们做好了命名空间与标签。
7. 设置组件属性 然后运行

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				layout="absolute" 
				xmlns:ns1="components.*" initialize="initApp()">
	<mx:Script>
		<![CDATA[
			private function initApp():void{
				introduce.myName="中国星";
				introduce.myPosition="Manager";
			}
		]]>
	</mx:Script>
	<ns1:MyIntroduce x="364" y="51" id="introduce">
	</ns1:MyIntroduce>
</mx:Application>

[img]http://dl.iteye.com/upload/picture/pic/85731/dbb6be8a-d567-3e25-b3cf-ac5b6b3147db.jpg[/img]
8. 自定义事件

[img]http://dl.iteye.com/upload/picture/pic/85729/eef65094-88ac-3f2e-b204-77870f3193f8.jpg[/img]
CustomEvent.as代码：

package com.zkl.events
{
	import flash.events.Event;

	public class CustomEvent extends Event
	{
		public static const EVENT_TYPE:String="event_type";
		public var id:int;
		public var myname:String;
		public var myposition:String;
		public function CustomEvent(type:String, id:int, myname:String,myposition:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			this.id=id;
			this.myname=myname;
			this.myposition=myposition;
		}
		override public function clone():Event{
			return new CustomEvent(type,id,myname,myposition,bubbles,cancelable);
		}

	}
}

CustomEventId.as代码：

package com.zkl.events
{
	public class CustomEventId
	{
		public static const COMPONENT_EVENT:int=0;
	}
}

9. 在组件做以下修改

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
		import com.zkl.events.*;
		/**
		 * 为组件添加两个属性
		 */
			[Bindable]
			public var myName:String;
			[Bindable]
			public var myPosition:String;

			private function customHandler():void{
				this.dispatchEvent(new CustomEvent(CustomEvent.EVENT_TYPE,CustomEventId.COMPONENT_EVENT,myname.text,myposition.text));
			}
		]]>
	</mx:Script>
	<mx:Label text="名字："/>
	<mx:TextInput id="myname" text="{myName}"/>
	<mx:Label text="职位："/>
	<mx:TextInput id="myposition" text="{myPosition}"/>
	<mx:Button label="确定" id="ok"/>
	<mx:Button label="修改" click="customHandler()"/>
</mx:VBox>

10．在应用程序文件代码做以下修改：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				layout="absolute" 
				xmlns:ns1="components.*" initialize="initApp()">

	<mx:Script>
		<![CDATA[
		    import com.zkl.events.*;
		    import mx.controls.Alert;
			private function initApp():void{
				introduce.myName="中国星";
				introduce.myPosition="Manager";
				introduce.addEventListener(CustomEvent.EVENT_TYPE,customEventHandler);
			}
			private function customEventHandler(e:CustomEvent):void{
				Alert.show("收到组件的事件了：\n名字=" + e.myname + "\n职位=" + e.myposition);
			}
		]]>
	</mx:Script>
	<ns1:MyIntroduce x="364" y="51" id="introduce">
	</ns1:MyIntroduce>

</mx:Application>

运行

[img]http://dl.iteye.com/upload/picture/pic/85727/c3e5ee3a-5875-3a76-9d6f-f4803dd34f64.jpg[/img]

然后修改之后再点击“修改”按钮看看效果：

[img]http://dl.iteye.com/upload/picture/pic/85725/e56a6a3b-6101-3768-b55c-6f851d582729.jpg[img]

留个笔记。^_^