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

 

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 样式。