Flex自定义事件

 

 对于自定义组件，我们通常希望能够把它写的通用一些，比如一个自定义的按钮，在A处调用，我们希望它能弹出一个窗口，而在B处调用，我们希望它能够发送请 求到后台服务等。我们希望在调用自定义组件的地方能够定制这些功能，这就需要使用自定义事件把自定义组件和调用程序关联起来。

 

下面我们就来看一下，如何实现这样的功能，有两种方法：

第一种：

自定义组件myButton的代码：

 

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
 <fx:Script>
  <![CDATA[
   private function onClick(event:MouseEvent):void{
    dispatchEvent(new Event("customClick"));
   }
  ]]>
 </fx:Script>
 <s:Button label="click me" click="onClick(event)" />
</s:Group>

*点击自定义组件中的按钮时，创建一个Event对象，在构造函数中添加自定义的事件类型，然后使用dispatchEvent方法发送。在主窗体中对该组件添加事件监听。

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      xmlns:components="com.fgj.components.*"
      creationComplete="init()">
 <fx:Script>
  <![CDATA[
    private function init():void{
    myBtn.addEventListener("customClick", onClickHandler);
   }   
   private function onClickHandler(event:Event):void{
    trace("123");
   }
  ]]>
 </fx:Script>
  <components:MyButton id="myBtn"/>
</s:Application>

 *主窗体中对该组件监听类型为customClick的事件。通过这种方式就把两个文件关联起来了。

 

如果要由自定义组件向主窗体传递参数，可以创建一个事件对象，将参数赋值给该对象的属性进行传递。

自定义事件：

 

public class MyEvent extends Event
 {
  public var param:String = ""; 
  public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
  {
   super(type, bubbles, cancelable);
  }
 }

 

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
 <fx:Script>
  <![CDATA[
   import com.fgj.events.MyEvent;
   
   private function onClick(event:MouseEvent):void{
    var e:MyEvent = new MyEvent("passParam");
    e.param = "abc";
    this.dispatchEvent(e);
   }
  ]]>
 </fx:Script>
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:Button label="Click" click="onClick(event)" />
</s:Group>

 

 

customBtn.addEventListener("passParam", onClick);
private function onClick(event:MyEvent):void{
 trace(event.param);
}

<components:CustomEventComp id="customBtn" />

 

 

 

第二种（标签式监听）：

这里需要用到元数据标签，这是一种特殊的标签，它在代码中的作用是像编译器提供如何编译程序的信息。实际上，这些标签并没有被编译进swf文件中，而只是告诉编译器如何生成swf文件。

Flex为事件定义了[Event]元标签，用来声明那些被自定义类派发的事件。

 

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
 <fx:Metadata>
  [Event(name="customClick", type="flash.events.Event")]
 </fx:Metadata>
 <fx:Script>
  <![CDATA[
   private function onClick(event:MouseEvent):void{
    dispatchEvent(new Event("customClick"));
   }
  ]]>
 </fx:Script>

 <s:Button label="click me" click="onClick(event)" />
</s:Group>

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      xmlns:components="com.fgj.components.*">      
 <fx:Script>
  <![CDATA[
   private function onClickHandler(event:Event):void{
    trace("123");
   }
  ]]>
 </fx:Script>
 <components:MyButton id="myBtn" customClick="onClickHandler(event)" />
</s:Application>

   个人比较推荐第二种做法，因为动态添加事件监听器（addEventListener），会使程序的可读性变差。

评论

1 楼 lanliying 2013-08-22  

主窗体报错
Multiple markers at this line:
-Line breakpoint: demoMXML.mxml [line: 21]
-1120: Access of undefined property customBtn.
-1120: Access of undefined property onClick.

这行customBtn.addEventListener("passParam",onClick);

要什么解决？