Flex 3 cookbook翻译: 2.12 显示并定位多个弹出框
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> <!]> </mx:Script></mx:Application>
http://www.agoit.com/bbs/../../../upload/attachment/39055/e4edecab-cc47-3b61-b622-5cb38e30f799.jpg
在这个例子里，创建了四个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> <! 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样式。
页:
[1]