利用flex自定义事件进行数据传递

有时候我们需要让两个组件之间实现联动，并且在其中传递数据，自定义事件机制可以帮助我们比较优雅的实现这种需要.


下面的例子，是打算实现一个列表和一个编辑框的联动.

编辑框代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">

	<mx:Script>
		<![CDATA[
			import my.DummySelectEvent;
			import mx.controls.Alert;
			private function init():void
			{
				DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener);
			}

			private function dataChangeListener(event:DummySelectEvent):void
			{
				var data = event.data;
				//Alert.show(event.data.name);
				detailPanel.changeMode(Detail.EDIT_SIMPLE,data);
			}
		]]>
	</mx:Script>

	<mx:HBox x="104" y="126" width="1000">
		<ns1:List>
		</ns1:List>
		<ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">
		</ns1:Detail>
	</mx:HBox>

</mx:Application>

列表代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="300" xmlns:my="my.*" creationComplete="initList()" xmlns:local="*">
	<mx:Script>
		<![CDATA[
			import my.DummySelectEvent;
			import mx.events.FlexEvent;
			import my.Dummy;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;

			private var dummyList:ArrayCollection;

			private var itemSelected:Boolean = false;

			private function initList():void{
				dummyList = new ArrayCollection();
				for( var i:Number = 0;i<10;i++)
				{
					var dummy:Dummy = new Dummy();
					dummy.name = "name"+i;
					dummy.email = "email"+i;
					dummy.mobile = "mobile" +i;
					dummy.address = "address"+i;
					dummy.qq = "qq"+i;
					dummy.msn = "msn"+i;

					dummyList.addItem(dummy);

				}
				dataGrid.dataProvider = dummyList;
			}

			private function itemSelect():void
			{
				var dataChangeEvent:DummySelectEvent = new DummySelectEvent(dataGrid.selectedItem,DummySelectEvent.SELECTED_DATA_CHANGE);
				DummySelectEvent.dispatcher.dispatchEvent(dataChangeEvent);
			}

			private function deleteItem():void{
				Alert.show("确定要删除？");
			}

		]]>
	</mx:Script>
	<!--<mx:Label id="selectedItem" visible="false" data = "{dataGrid.selectedItem}" dataChange="itemSelect()"/>-->
	<mx:Spacer height="2">
	</mx:Spacer>
	<local:ListBar>
	</local:ListBar>
	<mx:DataGrid id="dataGrid" 
		x="0" y="0" width="100%" height="100%"
		data="{dataGrid.selectedItem}"
		dataChange="itemSelect()" >
		<mx:columns>
			<mx:DataGridColumn headerText="name" dataField="name"/>
			<mx:DataGridColumn headerText="email" dataField="email"/>
			<mx:DataGridColumn headerText="mobile" dataField="mobile"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:HBox width="100%">
		<mx:Button label="删除选中" enabled="{itemSelected}" click="deleteItem()"/>
	</mx:HBox>

</mx:Panel>

DummyVO代码

package my
{
	[Bindable]
	public class Dummy
	{
		public function Dummy()
		{

		}

		public var name:String;
		public var mobile:String;
		public var email:String;

		public var qq:String;
		public var msn:String;
		public var address:String;

	}
}

自定义事件代码

package my
{
	import flash.events.Event;
	import flash.events.EventDispatcher;

	public class DummySelectEvent extends Event
	{
		public var data:Object;
		public static var SELECTED_DATA_CHANGE:String = "selectedDataChange";
		public static const dispatcher:EventDispatcher=new EventDispatcher();
		public function DummySelectEvent(data:Object,type:String)
		{
			super(type,true,false);
			this.data = data;	
		}

		override public function clone():Event
        {
            return new DummySelectEvent(data,type);
        }
	}
}

主程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">

	<mx:Script>
		<![CDATA[
			import my.DummySelectEvent;
			import mx.controls.Alert;
			private function init():void
			{
				DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener);
			}

			private function dataChangeListener(event:DummySelectEvent):void
			{
				var data = event.data;
				//Alert.show(event.data.name);
				detailPanel.changeMode(Detail.EDIT_SIMPLE,data);
			}
		]]>
	</mx:Script>

	<mx:HBox x="104" y="126" width="1000">
		<ns1:List>
		</ns1:List>
		<ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">
		</ns1:Detail>
	</mx:HBox>

</mx:Application>