Flex 3 cookbook翻译: 2.13 为弹出窗口创建自定义边框

 

2.13 为弹出窗口创建自定义边框

2.13.1 问题

你想为弹出窗口定义边框，让它显示一个标记，来指出是哪个控件触发了这个窗口。

2.13.2 解答

创建 PanelSkin 的子类并覆盖 updateDisplayList 方法，画出标记箭头。并把这个新的 skin 作为弹出窗口的 borderSkin.

2.13.3 讨论

 

以下是基于 2.12 节的。要修改 CustomPopUp 组件。要自定义窗口边框，就要设置 CustomPopUpd 的 borderSkin 样式为一个名为 CustomPanelSkin 的自定义类。

 

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    width="300" height="50"
    styleName="customPopUp"
    showCloseButton="true"
    close="handleClose(event)"
    borderSkin="CustomPanelSkin"
    initialize="initPopUp()">

    <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);
            }

            private function initPopUp():void {
                this.isPopUp = false;
            }
        ]]>
    </mx:Script>
</mx:TitleWindow>

 

 

CustomPanelSkin 类的代码如下。注意设置 TitleWindow 的 isPopUp 属性为 false ，以避免用户能拖动弹出框。

 

 

package
{
    import flash.display.Graphics;

    import mx.skins.halo.PanelSkin;

    public class CustomPanelSkin extends PanelSkin
    {
        override protected function updateDisplayList(w:Number, h:Number):void {
            super.updateDisplayList(w,h);

            var gfx:Graphics = this.graphics;
            gfx.beginFill(this.getStyle("borderColor"),
                            this.getStyle("borderAlpha"));
            gfx.moveTo(this.getStyle("cornerRadius"),0);
            gfx.lineTo(15,-10);
            gfx.lineTo(25,0);
        }
    }
}

 

 

这个简单的类扩展了 PanelSkin 类， PanelSkin 类是 TitleWindow 边框的默认皮肤。在被覆盖的 updateDisplayList 方法里，添加了在 CustomPopUp 控件左上角画一个标记箭头的代码。