Flex学习记录（自定义popup弹出窗口的边框）

创建一个PanleSkin 类的子类，覆盖updateDisplayList 方法来绘画调出箭头。设定这个子类
为弹出窗口的borderSkin 风格。
2.13.3. 讨论
这个技术是基于Section 2.12CustomPopUp 组件修改的。定制你的窗口边框，这次设一个自
定义类CustomPanelSkin 到borderSkin 风格。
Code View:

<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 = true;
}
]]>
</mx:Script>
</mx:TitleWindow>

如下是CustomPanelSkin 类的代码。注意TitleWindow 的isPop 属性需要设为false，用来阻
止用户拖动弹出窗口。
Code View:

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

这个简单的类集成了TitleWindow 的默认边框皮肤类PanelSkin。updateDisplayList 方法被覆
盖，增加了在CustomPopUp 组件左上角绘制调出箭头的逻辑。