Flex自定义组件与自定义事件

最新推荐文章于 2025-02-16 16:46:38 发布

原创最新推荐文章于 2025-02-16 16:46:38 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flex #actionscript #function #button #components #application

Flex 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在Flex中创建自定义组件并定义自定义事件。通过实例演示了包含TextArea和两个Button的自定义组件的设计过程，以及如何通过ActionScript定义自定义事件，并在组件内外部进行事件的触发和监听。

1、自定义组件

2、自定义事件

3、结合使用

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

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

代码：

MyComponent.mxml

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

二、自定义事件

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

代码：

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

三、使用。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:cus="laxino.*" applicationComplete="initApp()"> <mx:Script>  </mx:Script> <mx:Label x="10" y="11" text="Custom Component"/>  <cus:MyComponent id="myComponent" x="10" y="37" commit="commitHandle(event)" ></cus:MyComponent> <mx:Label x="10" y="139" text="Standard Component（Text）"/> <mx:Text id="result" x="10" y="165" text="Empty" width="180" height="123" /> </mx:Application>

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

最终结果，如图：