Flex 3 cookbook翻译: 2.12 显示并定位多个弹出框

ycy303

 
2.12 显示并定位多个弹出框
2.12.1 问题
你希望用弹出窗口显示额外的消息给用户。
Recipe2.12.2. Solution
2.12.2 解答
基于用户交互，用PopUpManager创建一个TitleWindow组件的实例。
Recipe2.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样式。