学步园

1、自定义组件

2、自定义事件

3、结合使用

一、自定义组件（使用的是Flex组件，ActionScript组件相对麻烦点，可视化差点）

该组件由一个TextArea和两个Button组成，如图：

代码：

MyComponent.mxml

<?xml version="1.0" encoding="utf-8"?><br /> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="180" height="94" creationComplete="initComponent()"><br /> <mx:Metadata><br /> /**<br /> * 1. 编译期间执行<br /> * 2. 自定义组件一般可以通过dispatchEvent委派parent来处理某个事件，这就需要在parent中设置一个addEventLister来监听事件。<br /> * 就像Button的Event.CLICK事件，除了可以通过addEventLister(Event.CLICK, clickHandle)来监听处理外，在Flex组件中还可以<br /> * 直接 mx:Button click="clickHandle(event)" / 。怎么定义自定义组件也可以达到如此效果呢？<br /> * 2.1) 内部声明：[Event(name="commit",type ="laxino.MyEvent")]，type是指事件的类型（如1的类型是int,'aaa'的类型是String）,name是指<br /> * Event中的构造函数中type。<br /> * 2.2) 外部使用：commit="commitHandle(myEvent)"是指为该组件注册了一个监听器，监听名字叫commit的事件，并通过commitHandle处理。事件的触发和<br /> * 委派必须在组件内实现。<br /> *<br /> */</p> <p> /**<br /> *<br /> * Using the Event metadata tag<br /> * You use the [Event] metadata tag to define events dispatched by a component so that the Flex compiler can recognize<br /> * them as MXML tag attributes in an MXML file. You add the [Event] metadata tag in one of the following locations:<br /> * ActionScript components Above the class definition, but within the package definition, so that the events are bound<br /> * to the class and not a particular member of the class.<br /> * MXML components In the mx:Metadata tag of an MXML file.<br /> *<br /> */</p> <p> [Event(name="commit",type ="laxino.MyEvent")]<br /> [Event(name="preview",type ="laxino.MyEvent")]<br /> </mx:Metadata><br /> <mx:Script><br /> <!--[CDATA[<br /> private function initComponent():void<br /> {</p> <p> }</p> <p> private function preview(event:Event):void<br /> {<br /> this.dispatchEvent(new MyEvent(MyEvent.PREVIEW, content.text));<br /> }</p> <p> private function commitHandle(event:Event):void<br /> {<br /> this.dispatchEvent(new MyEvent(MyEvent.COMMIT, content.text));<br /> }</p> <p> ]]--><br /> </mx:Script><br /> <mx:TextArea x="10" y="10" id="content"/><br /> <mx:Button x="10" y="62" label="Preview" width="82" click="preview(event)"/><br /> <mx:Button x="100" y="62" label="Commit" click="commitHandle(event)" /><br /> </mx:Canvas><br />

二、自定义事件

当按Button1时触发preview事件，点击Button2时触发commit事件，传输数据通过$data变量存储。

代码：

package laxino<br /> {<br /> import flash.events.Event;</p> <p> public class MyEvent extends Event<br /> {<br /> public static const COMMIT:String = "commit";<br /> public static const PREVIEW:String = "preview";</p> <p> private var $data:Object;</p> <p> public function MyEvent(type:String, $data:Object=null, bubbles:Boolean=true, cancelable:Boolean=false)<br /> {<br /> super(type, bubbles, cancelable);<br /> this.$data = $data;<br /> }</p> <p> public function get data():Object<br /> {<br /> return $data;<br /> }</p> <p> public function set data($data:Object):void<br /> {<br /> this.$data = $data;<br /> }<br /> }<br /> }

三、使用。

<?xml version="1.0" encoding="utf-8"?><br /> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:cus="laxino.*" applicationComplete="initApp()"><br /> <mx:Script><br /> <!--[CDATA[<br /> import mx.controls.Alert;<br /> import laxino.MyEvent;</p> <p> private function initApp():void<br /> {<br /> // 方式一，监听preview事件<br /> myComponent.addEventListener(MyEvent.PREVIEW, previewHandle);<br /> }</p> <p> private function commitHandle(event:MyEvent):void<br /> {<br /> result.text = event.data.toString();<br /> }</p> <p> private function previewHandle(event:MyEvent):void<br /> {<br /> Alert.show(event.data.toString(), "Preview");<br /> }<br /> ]]--><br /> </mx:Script><br /> <mx:Label x="10" y="11" text="Custom Component"/><br /> <!-- 方式二，监听commit事件 --><br /> <cus:MyComponent id="myComponent" x="10" y="37" commit="commitHandle(event)" ></cus:MyComponent><br /> <mx:Label x="10" y="139" text="Standard Component（Text）"/><br /> <mx:Text id="result" x="10" y="165" text="Empty" width="180" height="123" /><br /> </mx:Application><br />

有时候我们还需要加上一个自定义的EventDispatcher,通过继承EventDispatcher或实现IEventDispatcher接口。

最终结果，如图：