2.13.自定义弹出式窗口边框
2.13.1. 问题
我想要自定义弹出窗口的边框来显示窗口。
2.13.2. 解决办法
创建一个PanleSkin 类的子类，覆盖updateDisplayList 方法来绘画调出箭头。设定这个子类为弹出窗口的borderSkin 风格。
2.13.3. 讨论
这个技术是基于Section 2.12CustomPopUp 组件修改的。定制你的窗口边框，这次设一个自定义类CustomPanelSkin 到borderSkin 风格。
如下是CustomPanelSkin 类的代码。注意TitleWindow 的isPop 属性需要设为false，用来阻止用户拖动弹出窗口。
这个简单的类集成了TitleWindow 的默认边框皮肤类PanelSkin。updateDisplayList 方法被覆盖，增加了在CustomPopUp 组件左上角绘制调出箭头的逻辑。
我想要自定义弹出窗口的边框来显示窗口。
2.13.2. 解决办法
创建一个PanleSkin 类的子类，覆盖updateDisplayList 方法来绘画调出箭头。设定这个子类为弹出窗口的borderSkin 风格。
2.13.3. 讨论
这个技术是基于Section 2.12CustomPopUp 组件修改的。定制你的窗口边框，这次设一个自定义类CustomPanelSkin 到borderSkin 风格。
+展开
-XML
<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>
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 的isPop 属性需要设为false，用来阻止用户拖动弹出窗口。
+展开
-ActionScript
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);
}
}
}
{
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 组件左上角绘制调出箭头的逻辑。
加支付宝好友偷能量挖...
