改进ActionScript3的事件机制:事件桥EventBridge，加了一些自己的总结

来源：互联网发布：excel2003数据透视表编辑：程序博客网时间：2024/05/12 10:45

告示:本文为原创文章, 如果转载请注明出处！http://summerofthatyear-gmail-com.iteye.com/blog/328259
      在Flex应用中,由于actionscript3的事件机制是在显示对象一层层向上冒泡的,所以如果在比较复杂的页面结构的时候，你可能会被事件的一层层的冒泡搞的晕头转向.而且在底层派发事件,高层侦听事件，也是很麻烦的一件事情.
      有了"事件桥"这一切将不再是问题,事件桥的功能是它可以把一个事件从一个地方传到任意另外一个地方.不需要冒泡!因为他不通过显示对象的父子关系级级散发,而通过一个第三方类来跳转。这样即提高了性能又方便了用户。
      听不懂没关系, 举个例子就一目了然了.
      这个例子很简单, 是一个选择用户的模块, 就是一个TextArea和一个Button, 点击Button弹出一个TitleWindow(PopUpManager). TitleWindow有一个DataGrid, 然后在DataGrid里面选择一个用户返回；
      首先是一个用户对象:

Java代码

package com.montage.vo
{
/**
* @author Montage
*/
public class User
{
public function User()
{
}
public var name:String;
public var country:String;
}
}

选择完了用户, 所需要的事件

Java代码

package com.montage.events
{
import com.montage.vo.User;
import flash.events.Event;
/**
* @author Montage
*/
public class UserEvent extends Event
{
public static var SELECTED_USER:String = "selectedUser";
public var user:User;
public function UserEvent(type:String,
bubbles:Boolean=false,
cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

下面就是“事件桥”,他似乎没有什么代码，就是一个单件类的架子，但是可别小看了它，由于它继承了EventDispatcher所以它可以做到听/发事件！

Java代码

package com.montage.model
{
import flash.events.Event;
import flash.events.EventDispatcher;
//////////////////////
//
// events
//
//////////////////////
/**
* 给当前类注册一个事件，注册的作用下面有解释，这里要说明一下name的值，它是自定义事件中的type，类型为String．
*/
[Event(name="selectedUser", type="com.montage.events.UserEvent")]
/**
*
* @author Montage
*/
public class EventBridge extends EventDispatcher
{
private static var instance:EventMessage = null;
public function EventMessage()
{
if( instance != null )
{
throw new Error("EventBridge是一个单件类,只能被实例化一次!");
}
}
public static function getInstance():EventBridge
{
if( instance == null )
{
instance = new EventBridge();
}
return instance;
}
}
}

以下是用户列表界面UserList.mxml

Xml代码

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="选择用户">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import com.montage.events.UserEvent;
import com.montage.vo.User;
import com.montage.model.EventMessage;
import mx.managers.PopUpManager;
private var eventBridge:EventBridge = EventBridge.getInstance();
private function submitHandler():void
{
if( grid.selectedIndex > -1 )
{
var item:XML = XML( grid.selectedItem );
//创建一个用户
var user:User = new User();
user.name = item.@name;
user.country = item.@country;
//创建一个UserEvent事件, 把刚刚创建好的user赋给它
var event:UserEvent = new UserEvent( UserEvent.SELECTED_USER );
event.user = user;
//用EventBridge将这个事件发送出去
eventBridge.dispatch( event );
cancelHandler();
}
else
{
Alert.show("请选择一个用户！");
}
}
private function cancelHandler():void
{
PopUpManager.removePopUp( this );
}
]]>
</mx:Script>
<mx:XML id="users" source="user.xml"/>
<mx:DataGrid id="grid" width="100%" height="100%" dataProvider="{users.User}">
<mx:columns>
<mx:DataGridColumn headerText="姓名" dataField="@name"/>
<mx:DataGridColumn headerText="国家" dataField="@country"/>
</mx:columns>
</mx:DataGrid>
<mx:ControlBar width="100%">
<mx:Spacer width="100%"/>
<mx:Button label="确定" click="submitHandler()"/>
<mx:Button label="取消" click="cancelHandler()"/>
</mx:ControlBar>
</mx:TitleWindow>

用户数据源user.xml

Xml代码

<root>
<User name="David" country="America"/>
<User name="Tome" country="Canada"/>
<User name="Montage" country="China"/>
</root>

主界面:

Xml代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" fontSize="12">
<mx:Script>
<![CDATA[
import com.montage.events.UserEvent;
import com.montage.model.EventMessage;
import mx.managers.PopUpManager;
import com.montage.view.user.UserList;
private var eventBridge:EventBridge= EventBridge.getInstance();
private function init():void
{
eventBridge.addEventListener(UserEvent.SELECTED_USER, selectedUserHandler);
}
/**
* 选择好以后的反馈
*/
private function selectedUserHandler( event:UserEvent ):void
{
textArea.htmlText = "你选择了:<b>" + event.user.name + "</b>("+ event.user.country +")";
}
/**
* 弹出选择用户的窗口PopUpManager
*/
private function clickHandler():void
{
var userList:UserList = UserList( PopUpManager.createPopUp(this, UserList, true) );
userList.x = ( width - userList.width ) / 2;
userList.y = ( height - userList.height ) / 2;
}
]]>
</mx:Script>
<mx:Panel width="400" height="300" layout="vertical" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:TextArea id="textArea" width="100%"/>
<mx:Button label="选择用户" click="clickHandler()"/>
</mx:Panel>
</mx:Application>

这里解释一下，[Event]标签的作用.
[Event]
Event元数据标签用来声明那些被自定义类分派的事件。将这个元数据标签添加到类定义中之后，你就可以在MXML标签中添加事件处理函数来初始化该自定义类。
Custom ButtonLabel class using[Event]
package comps
{
import mx.controls.Button;
import flash.events.Event;
// Define the custom event
[Event(name="labelChanged",type="flash.events.Event")]
public classButtonLabel extends Button
{
// property to hold labelvalue
private var_myLabel:String;
// public setter method
public function setmyLabel(s:String):void
{
   _myLabel =s;
   this.label =s;
   // Create anddispatch custom event
   vareventObj:Event = new Event("labelChanged");
   dispatchEvent(eventObj);
}
}
}
Using the ButtonLabel class withthe labelChanged [Event]

<fx:Script>
<![CDATA[
import mx.controls.Alert;
importflash.events.Event;
// method to handle customevent
public functionlabelChanged(eventObj:Event):void
{
   myTA.text=myTA.text + "\n"+ eventObj.target.label;
   myTA.verticalScrollPosition= myTA.verticalScrollPosition +20;
}
]]>
</fx:Script>

<mx:Panel title="Event Sample"width="500" height="275"
paddingTop="10"paddingLeft="10" paddingRight="10" paddingBottom=" 10"layout="absolute">

<mx:TextInputid="buttonLabelTI"
   change="myButton.myLabel=buttonLabelTI.text"x="10" y="9"/>


<comps:ButtonLabelid="myButton" labelChanged="labelChanged(event);" x="10"y="39"/>
<mx:TextAreaid="myTA" width="200" height="200" x="249"y="10"/>

</mx:Panel>

上面两个例子中都用到了Event标签，告诉自定义组件，它可以监听哪些事件