首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-23 
自定义组件与自定义事件(组件的数传递)自定义组件与自定义事件(组件的数传递)1.新建一个Flex工程 File-New

自定义组件与自定义事件(组件的数传递)
自定义组件与自定义事件(组件的数传递)
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]

留个笔记。^_^

热点排行