Flex中自定组件的事件处理

我们都知道可视化组件都俱有事件（Event）,属性（property）,方法（Method）这几个关键的概念，当然就Flex这方面来说，除了这些，还有与事件相关的效果(Effect),与展现相关的样式（Style）,主题（Theme）等，这里我简单说一个自定义事件，与效果的例子.

首先看一段代码：

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="112" height="16">   <mx:Script>    <![CDATA[            import com.zyx.ClickMeEvent;           private function lblClickhandler(event:Event):void           {                    var myEvent:ClickMeEvent = new ClickMeEvent(ClickMeEvent.CLICK_ME);                    this.dispatchEvent(myEvent);             }    ]]>   </mx:Script>

<mx:Metadata>   [Event(name="clickMe",type="com.zyx.ClickMeEvent")]  </mx:Metadata>

 <mx:Label x="0" y="0" text="Label" width="112" height="16" click="lblClickhandler(event)"/> </mx:Canvas>

这是自定义组件MyButton.mxml代码，下面我们做一个分析。我们知道系统事件是固定的，我们只将系统的固有事件与我们自定义的事件进行关联，才能实现自定义事件的触发机制（当然也有代码触发的方式，比如应用程序中的回调等）。在这个例子里面是将自定义控件内部标签中的click事件封装成ClickMeEvent对象，同时传入事件类型参数（ClickMeEvent.CLICK_ME）.同时用原数据标签定义了事件clickMe(注意，事件名（clickMe必须与ClickMeEvent.CLICK_ME值一样否则不能触发）)。

下面是调用代码：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="mycontrol.*">   <mx:Script>    <![CDATA[            import mx.controls.Alert;           import com.zyx.ClickMeEvent;                private function clickmehandle(event:ClickMeEvent):void             {                       Alert.show("clickMe事件被触发^_^");           }        ]]>   </mx:Script>   <ns1:MyButton x="125" y="266" clickMe="clickmehandle(event);">  </ns1:MyButton> </mx:Application>

点击label后的效果如下图：

做到这里自定义事件是实现了，但是感觉不好因为没有效果，下面我们再加点效果，代码如下（MyButton.mxml）：

注意：（效果是与事件相关的）

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="112" height="16" backgroundColor="#8D0E0E">  <mx:Script>    <![CDATA[              import com.zyx.ClickMeEvent;             private function lblClickhandler(event:Event):void             {                      var myEvent:ClickMeEvent = new ClickMeEvent(ClickMeEvent.CLICK_ME);                     this.dispatchEvent(myEvent);             }    ]]>   </mx:Script>   <mx:Metadata>                 [Event(name="clickMe",type="com.zyx.ClickMeEvent")]                 [Effect(name="clickMeEffect", event="clickMe")]   </mx:Metadata>  <mx:Label x="0" y="0" text="Label" width="112" height="16" click="lblClickhandler(event)"/> </mx:Canvas>

这里只要加一个原数据标签，下面的调用代码：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="mycontrol.*">  <mx:Script>    <![CDATA[          import mx.controls.Alert;          import com.zyx.ClickMeEvent;               private function clickmehandle(event:ClickMeEvent):void          {                  Alert.show("clickMe事件被触发^_^");         }        ]]>  </mx:Script>   <mx:Blur id="myEffect" blurXFrom="50" blurYFrom="50" blurXTo="0" blurYTo="0"/>   <ns1:MyButton x="125" y="266" clickMe="clickmehandle(event);" clickMeEffect="myEffect">  </ns1:MyButton> </mx:Application>

这样我就得到了事件效果，嘿嘿。（你看到效果了吗）祝你好运

用益无益   弟兄姊妹都顶下（不顶，好意嘛你，呵呵）