欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-18 14:38:04
...
自定义组件与自定义事件(组件的数传递)
1. 新建一个Flex工程 File-New-Flex Project
2. 为工程命一个名字(如:CustomComponent)
3. 在Flex Navigator视图下展开CustomComponent – src 右击src文件夹新建一个文件夹components
4. 新建一个组件 File – new – MXML component 如命为MyIntroduce 路径为CustomComponent/src/components
自定义组件与自定义事件(组件的数传递)
            
    
    博客分类: Flex ITeyeFlexXMLFlash 
5. 打开MyIntroduce.mxml为组件添加属性和控件并做简单的数据绑定

自定义组件与自定义事件(组件的数传递)
            
    
    博客分类: Flex ITeyeFlexXMLFlash 
<?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视图下看看代码

自定义组件与自定义事件(组件的数传递)
            
    
    博客分类: Flex ITeyeFlexXMLFlash 

自定义组件与自定义事件(组件的数传递)
            
    
    博客分类: Flex ITeyeFlexXMLFlash 
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>


自定义组件与自定义事件(组件的数传递)
            
    
    博客分类: Flex ITeyeFlexXMLFlash 
8. 自定义事件

自定义组件与自定义事件(组件的数传递)
            
    
    博客分类: Flex ITeyeFlexXMLFlash 
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>


运行

自定义组件与自定义事件(组件的数传递)
            
    
    博客分类: Flex ITeyeFlexXMLFlash 

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

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

留个笔记。^_^