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

阅读更多

自定义组件与自定义事件(组件的数传递)
1. 新建一个Flex工程 File-New-Flex Project
2. 为工程命一个名字（如：CustomComponent）
3. 在Flex Navigator视图下展开CustomComponent – src 右击src文件夹新建一个文件夹components
4. 新建一个组件 File – new – MXML component 如命为MyIntroduce 路径为CustomComponent/src/components

5. 打开MyIntroduce.mxml为组件添加属性和控件并做简单的数据绑定

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

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




Flex已经自动为我们做好了命名空间与标签。
7. 设置组件属性 然后运行

8. 自定义事件


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. 在组件做以下修改

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

运行



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

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

留个笔记。^_^

• CustomComponent.zip (15.4 KB)
• 下载次数: 0