2.12 显示并定位多个弹出框
2.12.1 问题
你希望用弹出窗口显示额外的消息给用户。
Recipe 2.12.2. Solution
2.12.2 解答
基于用户交互,用 PopUpManager 创建一个 TitleWindow 组件的实例。
Recipe 2.12.3. Discussion
2.12.3 讨论
Flex 框架包含了一个 PopUpManager 类,它包含有在 Flex 应用中创建,布置,移除最上层窗口的静态方法。请看如下的代码:
<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="#ff0000" 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 {
// create the popup
var popup:CustomPopUp = CustomPopUp(PopUpManager.createPopUp(this,
CustomPopUp,false));
popup.message = "This is the detail for " + evt.target.label;
// position the 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 属性被赋值为需要向用户显示的内容。
译者注: PopUpManager 的 createPopUp 方法创建一个弹出框,并返回对该弹出框的引用。 CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false) ) 是将返回强制改变类型为 CustomPopUp 。所以 var popup:CustomPopUp = CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false)) 也可以改成 var popup:CustomPopUp =PopUpManager.createPopUp(this,CustomPopUp,false) as CustomPopUp 。
最后,弹出框根据接收请求的 LinkButton 来定位。为了做到这一点,该 LinkButton 的左上角的本地坐标(在该 LinkButton 里,左上角的坐标是( 0 , 0 ))被转换成全局坐标(用的是 localToGlobal 方法)。这是一种对所有可视对象和他们的子对象都可用的很方便的方法。
CustomPopUp 类定义如下:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
width="300" height="50"
styleName="customPopUp"
showCloseButton="true"
close="handleClose(event)">
<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);
}
]]>
</mx:Script>
</mx:TitleWindow>
CustomPopUp 类继承自 TitleWindow 类,并增加了一个文本控件来显示消息。 TitleWindow 的 close 事件被指派给 handleClose 方法,这个方法用 PopUpManager 的 removePopUp 方法关闭弹出框,它还包含了定义 CustomPopUp 外观的 CSS 样式。