Flex学习记要（popup弹出窗口的显示和位置）

Flex学习记录（popup弹出窗口的显示和位置）
Flex 框架包含了一个PopUpManager 类，它包含了若干静态方法来管理穿件，放置，移除Flex
应用程序的顶级窗口。如下代码所示：
Code View:

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Canvas horizontalCenter="0" verticalCenter="0">
	<mx:LinkButton label="Top" x="100" y="10" click="showDetail(event)"/>
	<mx:LinkButton label="Left" x="10" y="100" click="showDetail(event)"/>
	<mx:LinkButton label="Bottom" x="100" y="200" click="showDetail(event)"/>
	<mx:LinkButton label="Right" x="200" y="100" click="showDetail(event)"/>
	<mx:Canvas width="100" height="100" x="125" y="40" backgroundColor="#ffffff" rotation="45">
	</mx:Canvas>
</mx:Canvas>

<mx:Script>
	<![CDATA[
		import mx.managers.PopUpManager;
		private const POPUP_OFFSET:int = 10;
		
		private function showDetail(evt:MouseEvent):void {
			// 创建PopUp
			var popup:CustomPopUp = 
			CustomPopUp(PopUpManager.createPopUp(this, CustomPopUp , false));
			popup.message = "This is the detail for " + evt.target.label;
			// popup定位
			var pt:Point = new Point(0, 0);
			// 从组件内部坐标空间转换到全局坐标空间。
			pt = evt.target.localToGlobal(pt);
			popup.x = pt.x + POPUP_OFFSET;
			popup.y = pt.y + evt.target.height + POPUP_OFFSET;
		}
	]]>
</mx:Script>

</mx:Application>

在这个例子中，一系列的LinkButton 控件被创建并被绝对定位放置在Canvas 中。当用户点
击了一个LinkButton，一个弹出窗口会显示用来为用户显示详细信息。LinkButton 控件的
click 事件被连接到showDetail 方法上。showDetail 方法使用了PopUpManager 的createPopUp
方法来创建了一个自定义组件CustomPopUp 的实例。然后弹出窗口的message 属性被赋值
成需要被显示给用户的值。最后，弹出窗口被相对定位到发起初始请求的LinkButton。
LinkButton 左上角的（LinkButton 的坐标内，x=0,y=0），会被localToGlobal 方法从组件内
部坐标空间装换到全局坐标空间。这个转换方法在所有的显示元件和他们的子类都可用。
CustomPopUp 类代码如下所示：
Code View:

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
width="300" height="50"
styleName="customPopUp"
showCloseButton="true"
close="handleClose(event)"
mouseMove="aa(event)">
<!--popup的关闭触发事件必须写在自定义控件上 -->
<mx:Style>
.customPopUp {
header-height:2;
padding-left:5;
padding-right:5;
padding-top:5;
padding-bottom:5;
border-color:#000000;
border-alpha:.5;
border-thickness-left:5;
border-thickness-right:5;
border-thickness-bottom:5;
border-thickness-top:5;
background-color:#666666;
color:#ffffff;
}
</mx:Style>
<mx:Text width="100%" height="100%" text="{message}"/>
<mx:Script>
	<![CDATA[
		import mx.managers.PopUpManager;
		import mx.events.CloseEvent;
		[Bindable]
		public var message:String;
		private function handleClose(evt:CloseEvent):void {
			PopUpManager.removePopUp(this);
		}
		public function aa(evt:MouseEvent):void{
			PopUpManager.removePopUp(this);
		}
	]]>
</mx:Script>
</mx:TitleWindow>

CustomPopUp 类继承于TitleWindow 类，并且添加了一个Text 控件用来显示信息。当通过
PopUpManager 的removePopUp 方法来关闭弹出窗口时，TitleWindow 的close 事件被指向
到handleClose 方法。上面的代码还包含了自定义CustomPopUp 显示的CSS 风格。