4、Flex3自定义事件、事件冒泡及传值、组件间的函数回调及传值

为了演示事件冒泡，demo写的可能有点繁琐。大家凑合看看。

1.project结构

 

2、主文件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ax="com.future.visual.*" 
layout="absolute" creationComplete="init();">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import com.future.event.SelectSongEvent;
			private function init():void{
				this.addEventListener(SelectSongEvent.SELECT_SONG,handler);
			}
			private function handler(event:SelectSongEvent):void{
				this.Song.text = "当前选择的歌曲是: "+event.selectedSong;
			}
		]]>
	</mx:Script>
	<mx:HBox>
		<mx:Label id="Song" text="none" x="100"/>
		<ax:WorkSpace id="ws"/>
	</mx:HBox>
</mx:Application>

 3、WorkSpace.as

package com.future.visual
{
	import com.future.event.SelectSongEvent;
	
	import component.SongList;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.containers.Canvas;
	import mx.controls.Alert;
	import mx.controls.Button;
	import mx.managers.PopUpManager;
	public class WorkSpace extends Canvas
	{
		private var songs:XML = <SongList>
									<song id="1" name="水手" songer="张雨生"/>
									<song id="2" name="大海" songer="张雨生"/>
									<song id="3" name="不在犹豫" songer="beyond"/>
									<song id="4" name="海阔天空" songer="beyond"/>
								</SongList>; 
		public function WorkSpace()
		{
			var btn:Button = new Button();
			btn.id="song";
			btn.label = "Select Song";
			btn.x = 30;
			btn.y = 400;
			btn.addEventListener(MouseEvent.CLICK,changeHandler);
			this.addChild(btn);
		}
		private function changeHandler(event:Event):void{
			var sl:SongList = SongList(PopUpManager.createPopUp(this,SongList,true));
			sl.title = "SongList" ;
			sl.data = songs;
			sl.callbackFunction = changeSong;
           	PopUpManager.centerPopUp(sl);
		}
		
		private function changeSong(str:String):void{
			var e:SelectSongEvent = new SelectSongEvent(SelectSongEvent.SELECT_SONG,true);
			e.selectedSong = str;
			this.dispatchEvent(e);
		}
	}
}

 4、弹出窗口SongList.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			import com.future.event.SelectSongEvent;
			
			import mx.controls.Alert;
			
			[Bindable]public var callbackFunction:Function;  //回调函数   
			[Bindable]public var str:String = "";  
			
			private function onQuit():void{
				PopUpManager.removePopUp(this);
            	return;
			}
			private function selectSong():void{
//				var sse:SelectSongEvent = new SelectSongEvent("select song",true);
//				sse.selectedSong = songList.selectedItem as String;
//				this.dispatchEvent(sse);				
				PopUpManager.removePopUp(this);
				callbackFunction.call(str,XML(songList.selectedItem).@name);
			}
		]]>
	</mx:Script>
	<mx:VBox>
		<mx:DataGrid id="songList" dataProvider="{XML(this.data).children()}">
			<mx:columns>
				<mx:DataGridColumn headerText="顺序" dataField="@id"/>
				<mx:DataGridColumn headerText="歌曲" dataField="@name"/>
				<mx:DataGridColumn headerText="歌手" dataField="@songer"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:HBox>
			<mx:Button label="确定" click="{selectSong();}"/>
			<mx:Button label="退出" click="{onQuit();}"/>		
		</mx:HBox>
	</mx:VBox>
</mx:TitleWindow>

 5、自定义事件、这里的属性最好写成private类型，再加上set、get方法。我这里写的是public 的

package com.future.event
{
	import flash.events.Event;

	public class SelectSongEvent extends Event
	{
		public static const SELECT_SONG:String = "select song";
		public var selectedSong:String;
		
		public function SelectSongEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		
	}
}