Flex经验谈---用事件模拟一个Flex内部消息机制

最新推荐文章于 2023-11-19 12:18:54 发布

dream8062

最新推荐文章于 2023-11-19 12:18:54 发布

阅读量2.3k

点赞数

文章标签： flex datagrid user function string encoding

本文链接：https://blog.csdn.net/dream8062/article/details/3981367

版权

     告示:本文为原创文章, 如果转载请注明出处！http://summerofthatyear-gmail-com.javaeye.com/admin/blogs/328259
     看到消息不要头皮发麻, 这只是我自己随便瞎起的名字. 其实就是一个"单件类"继承了flash.events.EventDispatcher, 因此实现了发送和侦听事件(消息)的功能.是不是挺神奇的~~~^-^
      听不懂没关系, 举个例子就一目了然了.
      这个例子很简单, 是一个选择用户的模块, 就是一个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;
}
}

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);
}
}
}

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负责派发和注册事件, 他是一个"单件类"所以可以做到总是只有一个实例. send()方法用来发送消息(事件).

Java代码

package com.montage.model
{
import flash.events.Event;
import flash.events.EventDispatcher;
//
//
// events
//
//
/**
* 给当前类注册一个事件
*/
[Event(name="selectedUser", type="com.montage.events.UserEvent")]
/**
*
* @author Montage
*/
public class EventMessage extends EventDispatcher
{
private static var instance:EventMessage = null;
public function EventMessage()
{
if( instance != null )
{
throw new Error("EventMessage是一个单件类,只能被实例化一次!");
}
}
public static function getInstance():EventMessage
{
if( instance == null )
{
instance = new EventMessage();
}
return instance;
}
/**
* 发送各种类型事件(消息)
* @param event
*/
public function send( event:Event ):void
{
dispatchEvent( event );
}
}
}

package com.montage.model
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	
	//
	//
	// events
	//
	//
	/**
	 * 给当前类注册一个事件
	 */	
	[Event(name="selectedUser", type="com.montage.events.UserEvent")]

	/**
	 * 
	 * @author Montage 
	 */	
	public class EventMessage extends EventDispatcher
	{
		
		private static var instance:EventMessage = null;
		
		public function EventMessage()
		{
			if( instance != null )
			{
				throw new Error("EventMessage是一个单件类,只能被实例化一次!");
			}
		}
		
		public static function getInstance():EventMessage
		{
			if( instance == null )
			{
				instance = new EventMessage();
			}
			return instance;
		}
		
		/**
		 * 发送各种类型事件(消息)
		 * @param event
		 */		
		public function send( event:Event ):void
		{
			dispatchEvent( event );
		}

	}
}

以下是用户列表界面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 eMessage:EventMessage = EventMessage.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;
//用EventMessage将这个事件发送出去
eMessage.send( 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>

<?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 eMessage:EventMessage = EventMessage.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;
					
					//用EventMessage将这个事件发送出去
					eMessage.send( 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>

<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 eMessage:EventMessage = EventMessage.getInstance();
private function init():void
{
eMessage.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>

dream8062

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex经验谈---用事件模拟一个Flex内部消息机制

告示:本文为原创文章, 如果转载请注明出处！http://summerofthatyear-gmail-com.javaeye.com/admin/blogs/328259 看到消息不要头皮发麻, 这只是我自己随便瞎起的名字. 其实就是一个"单件类"继承了flash.events.EventDispatcher, 因此实现了发送和侦
复制链接

扫一扫