自定义组件与自定义事件(组件的数传递)
程序员文章站
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
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代码:
CustomEventId.as代码:
9. 在组件做以下修改
10.在应用程序文件代码做以下修改:
运行
然后修改之后再点击“修改”按钮看看效果:
[img]http://dl.iteye.com/upload/picture/pic/85725/e56a6a3b-6101-3768-b55c-6f851d582729.jpg[img]
留个笔记。^_^
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为组件添加属性和控件并做简单的数据绑定
<?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已经自动为我们做好了命名空间与标签。
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>
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. 在组件做以下修改
<?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/85725/e56a6a3b-6101-3768-b55c-6f851d582729.jpg[img]
留个笔记。^_^