Flex中的自定义事件[备忘]
面向对象语言中对象的三个要素:属性、方法和事件,其实最关键的就是事件,“事件驱动”机制使得两个对象之间能够互相沟通,并且是以一种松散耦合的方式。直接绑定的方式固然方便,但对对象的耦合较为紧密,无法适应多变的情况和“黑箱”原则。
FLEX中给组件定义自定义事件的方法同样简单,如果有点C#的事件与委托的概念,几分钟就能搞清楚FLEX的自定义事件问题。
首先当然是定义自定义事件类型,由于事件的基类是Event,因此自定义的事件需要从该类中继承:
package
{
import flash.events.Event;
public class SearchEvent extends Event
{
// 新添加的一个参数
public var searchText:String;
public function SearchEvent(type:String,searchText:String){
super(type);
this.searchText = searchText;
}
override public function clone():Event{
return new SearchEvent(type,searchText);
}
}
}
在上面的类SearchEvent中,我们新添加了一个searchText属性,这样就能在使用该事件时传递该参数。
接下来我们创建一个自定义组件,它由一个InputText和一个Button组成,我们希望在Button按下时,能够触发一个search事件,即该组件拥有一个自定义事件search:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="236" height="38">
<mx:Metadata>
[Event(name="search",type="SearchEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
private function clickHandler(event:MouseEvent):void{
//新建search对象
var searchObj:SearchEvent=new SearchEvent("search",searchText.text);
//事件分发
dispatchEvent(searchObj);
}
]]>
</mx:Script>
<mx:TextInput x="10" y="10" id="searchText"/>
<mx:Button x="178" y="10" label="搜索" click="clickHandler(event)"/>
</mx:Canvas>
我们可以看到,当Button按下时,它将执行clickHandler函数,而该函数中将新建一个SearchEvent对象,并使用dispatchEvent函数进行事件分发,这样,该自定义组件就能够拥有search事件。
我们现在来调用该组件:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="connection.*">
<mx:Script>
<![CDATA[
private function showGrid(event:SearchEvent):void
{
panel.title = event.searchText;
}
]]>
</mx:Script>
<ns1:Search x="77" y="49" search="showGrid(event)">
</ns1:Search>
<mx:Panel x="194" y="125" width="250" height="200" layout="absolute" id="panel">
</mx:Panel>
</mx:Application>
非常简单,我们可以看到<ns1:Search>这个组件已经拥有了一个search事件。