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 控件左上角画一个标记箭头的代码。