超级面板皮肤及其使用
画出类似于遨游那样的最大化,最小化,关闭,还原按钮的皮肤。
使用path路径画笔进行绘制。
CloseButtonSkin:
Skinxmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
[HostComponent("spark.components.Button")]
MaximizeButtonSkin:
Skinxmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
[HostComponent("spark.components.Button")]
MinimizeButtonSkin:
Skinxmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt">
[HostComponent("spark.components.Button")]
Skinxmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
[HostComponent("spark.components.Button")]
package
{
importevents.FxWindowEvent;
importskins.FxWindowSkin;
importflash.events.Event;
importflash.events.MouseEvent;
importflash.geom.Rectangle;
importmx.core.IVisualElementContainer;
importmx.managers.CursorManager;
importspark.components.Button;
importspark.components.Panel;
[Event(name="close",type="events.CzWindowEvent")]
[Event(name="maximize",type="events.CzWindowEvent")]
[Event(name="minimize",type="events.CzWindowEvent")]
[Event(name="restore",type="events.CzWindowEvent")]
[Event(name="focusstart",type="events.CzWindowEvent")]
[Event(name="focusend",type="events.CzWindowEvent")]
publicclassFxWindowextendsPanel
{
[Embed(source="assets/resizeCursorH.gif")]
privatestaticvarDEFAULT_RESIZE_CURSOR_HORIZONTAL:Class;
[Embed(source="assets/resizeCursorTLBR.gif")]
privatestaticvarDEFAULT_RESIZE_CURSOR_TL_BR:Class;
[Embed(source="assets/resizeCursorTRBL.gif")]
privatestaticvarDEFAULT_RESIZE_CURSOR_TR_BL:Class;
[Embed(source="assets/resizeCursorV.gif")]
privatestaticvarDEFAULT_RESIZE_CURSOR_VERTICAL:Class;
publicfunctionFxWindow()
{
super();
setStyle("cornerRadius",6);
setStyle("skinClass",FxWindowSkin);
windowState=FxWindowState.NORMAL;
}
//改变窗口尺寸的按钮=========start==============
[SkinPart(required="false")]
publicvarbottomLeftResizeButton:Button;
[SkinPart(required="false")]
publicvarbottomResizeButton:Button;
[SkinPart(required="false")]
publicvarbottomRightResizeButton:Button;
[SkinPart(required="false")]
publicvarleftResizeButton:Button;
[SkinPart(required="false")]
publicvarrightResizeButton:Button;
[SkinPart(required="false")]
publicvartopLeftResizeButton:Button;
[SkinPart(required="false")]
publicvartopResizeButton:Button;
[SkinPart(required="false")]
publicvartopRightResizeButton:Button;
//改变窗口尺寸的按钮=========end==============
//控制窗口状态的按钮=========start==============
[SkinPart(required="false")]
publicvarminimizeButton:Button;
[SkinPart(required="false")]
publicvarrestoreButton:Button;
[SkinPart(required="false")]
publicvarmaximizeButton:Button;
[SkinPart(required="false")]
publicvarcloseButton:Button;
//控制窗口状态的按钮=========end==============
privatevar_hasFocus:Boolean;
privatevar_windowState:int;
privatevarcurrentResizeHandle:Button;
privatevardragAmountX:Number;
privatevardragAmountY:Number;
privatevardragMaxX:Number;
privatevardragMaxY:Number;
privatevardragStartMouseX:Number;
privatevardragStartMouseY:Number;
privatevarnormalHeight:Number;
privatevarnormalWidth:Number;
privatevarnormalX:Number;
privatevarnormalY:Number;
privatevarsavedWindowRect:Rectangle;
privatevar_maximizable:Boolean=true;
privatevar_minimizable:Boolean=true;
privatevar_resizable:Boolean=true;
privatevar_closable:Boolean=true;
privatevar_dragable:Boolean=true;
publicfunctiongetdragable():Boolean
{
return_dragable;
}
publicfunctionsetdragable(value:Boolean):void
{
_dragable=value;
}
publicfunctiongetclosable():Boolean
{
return_closable;
}
publicfunctionsetclosable(value:Boolean):void
{
_closable=value;
}
publicfunctiongetresizable():Boolean
{
return_resizable;
}
publicfunctionsetresizable(value:Boolean):void
{
_resizable=value;
}
publicfunctiongetminimizable():Boolean
{
return_minimizable;
}
publicfunctionsetminimizable(value:Boolean):void
{
_minimizable=value;
}
publicfunctiongetmaximizable():Boolean
{
return_maximizable;
}
publicfunctionsetmaximizable(value:Boolean):void
{
_maximizable=value;
}
publicfunctiongethasFocus():Boolean
{
return_hasFocus;
}
publicfunctionsethasFocus(value:Boolean):void
{
if(_hasFocus==value)
{
return;
}
_hasFocus=value;
focusHandle();
}
privatefunctionfocusHandle():void
{
if(hasFocus==true)
{
this.alpha=1;
IVisualElementContainer(parent).setElementIndex(this,this.parent.numChildren-1);
dispatchEvent(newFxWindowEvent(FxWindowEvent.FOCUS_START));
}
else
{
this.alpha=0.6;
dispatchEvent(newFxWindowEvent(FxWindowEvent.FOCUS_END));
}
}
/**
*按住窗口标题开始移动时调用
*/
privatefunctiondragStart(event:MouseEvent):void
{
if(windowState==FxWindowState.NORMAL)
{
this.startDrag(false,newRectangle(0,0,parent.width-this.width,parent.height-this.height));
}
systemManager.addEventListener(MouseEvent.MOUSE_UP,dragStop);
systemManager.stage.addEventListener(Event.MOUSE_LEAVE,dragStop);
}
/**
*按住窗口标题停止移动时调用
*/
privatefunctiondragStop(event:Event):void
{
this.stopDrag();
systemManager.removeEventListener(MouseEvent.MOUSE_UP,dragStop);
systemManager.stage.removeEventListener(Event.MOUSE_LEAVE,dragStop);
}
/**
*派发最小化事件
*/
privatefunctionminimize(event:MouseEvent):void
{
dispatchEvent(newFxWindowEvent(FxWindowEvent.MINIMIZE));
}
/**
*窗口向下还原时调用
*/
privatefunctionrestore():void
{
if(windowState==FxWindowState.MAXIMIZED)
{
this.x=this.normalX;
this.y=this.normalY;
this.width=this.normalWidth;
this.height=this.normalHeight;
windowState=FxWindowState.NORMAL;
restoreButton.visible=false;
restoreButton.enabled=false;
maximizeButton.visible=true;
maximizeButton.enabled=true;
dispatchEvent(newFxWindowEvent(FxWindowEvent.RESTORE));
}
}
/**
*窗口最大化时调用
*/
privatefunctionmaximize():void
{
if(windowState==FxWindowState.NORMAL)
{
normalX=this.x;
normalY=this.y;
normalHeight=this.height;
normalWidth=this.width;
this.x=0;
this.y=0;
this.percentHeight=100;
this.percentWidth=100;
windowState=FxWindowState.MAXIMIZED;
maximizeButton.visible=false;
maximizeButton.enabled=false;
restoreButton.visible=true;
restoreButton.enabled=true;
dispatchEvent(newFxWindowEvent(FxWindowEvent.MAXIMIZE));
}
}
/**
*派发关闭事件
*/
privatefunctionclose(event:MouseEvent):void
{
dispatchEvent(newFxWindowEvent(FxWindowEvent.CLOSE));
}
/**
*在窗口标题双击时调用
*/
privatefunctiontitleDoubleClick(event:MouseEvent):void
{
if(windowState==FxWindowState.NORMAL)
{
maximize();
}
else
{
restore();
}
}
/**
*窗口尺寸改变时调用
*/
privatefunctionresize(event:Event):void
{
dragAmountX=parent.mouseX-dragStartMouseX;
dragAmountY=parent.mouseY-dragStartMouseY;
if(currentResizeHandle==topResizeButton&&parent.mouseY>0)
{
this.y=Math.min(savedWindowRect.y+dragAmountY,dragMaxY);
this.height=Math.max(savedWindowRect.height-dragAmountY,this.skin.minHeight);
}
elseif(currentResizeHandle==rightResizeButton)
{
this.width=Math.max(savedWindowRect.width+dragAmountX,this.skin.minWidth);
}
elseif(currentResizeHandle==bottomResizeButton&&parent.mouseY0)
{
this.x=Math.min(savedWindowRect.x+dragAmountX,dragMaxX);
this.width=Math.max(savedWindowRect.width-dragAmountX,this.skin.minWidth);
}
elseif(currentResizeHandle==topLeftResizeButton&&parent.mouseX>0&&parent.mouseY>0)
{
this.x=Math.min(savedWindowRect.x+dragAmountX,dragMaxX);
this.y=Math.min(savedWindowRect.y+dragAmountY,dragMaxY);
this.width=Math.max(savedWindowRect.width-dragAmountX,this.skin.minWidth);
this.height=Math.max(savedWindowRect.height-dragAmountY,this.skin.minHeight);
}
elseif(currentResizeHandle==topRightResizeButton&&parent.mouseX0)
{
this.y=Math.min(savedWindowRect.y+dragAmountY,dragMaxY);
this.width=Math.max(savedWindowRect.width+dragAmountX,this.skin.minWidth);
this.height=Math.max(savedWindowRect.height-dragAmountY,this.skin.minHeight);
}
elseif(currentResizeHandle==bottomRightResizeButton&&parent.mouseX0&&parent.mouseY<parent.height)
{
this.x=Math.min(savedWindowRect.x+dragAmountX,dragMaxX);
this.width=Math.max(savedWindowRect.width-dragAmountX,this.skin.minWidth);
this.height=Math.max(savedWindowRect.height+dragAmountY,this.skin.minHeight);
}
}
/**
*在窗口边缘并按下鼠标左键时调用
*/
privatefunctionresizeButtonDown(event:MouseEvent):void
{
if(windowState==FxWindowState.NORMAL)
{
currentResizeHandle=event.targetasButton;
setCursor(currentResizeHandle);
dragStartMouseX=parent.mouseX;
dragStartMouseY=parent.mouseY;
savedWindowRect=newRectangle(this.x,this.y,this.width,this.height);
dragMaxX=savedWindowRect.x+(savedWindowRect.width-this.skin.minWidth);
dragMaxY=savedWindowRect.y+(savedWindowRect.height-this.skin.minHeight);
systemManager.addEventListener(Event.ENTER_FRAME,resize);
systemManager.addEventListener(MouseEvent.MOUSE_UP,resizeButtonRelease);
systemManager.stage.addEventListener(Event.MOUSE_LEAVE,resizeButtonRelease);
}
}
/**
*在窗口边缘并弹开鼠标左键时调用
*/
privatefunctionresizeButtonRelease(event:MouseEvent):void
{
currentResizeHandle=null;
systemManager.removeEventListener(Event.ENTER_FRAME,resize);
systemManager.removeEventListener(MouseEvent.MOUSE_UP,resizeButtonRelease);
systemManager.stage.removeEventListener(Event.MOUSE_LEAVE,resizeButtonRelease);
CursorManager.removeAllCursors();
}
/**
*在窗口边缘并鼠标离开时调用
*/
privatefunctionresizeButtonRollOut(event:MouseEvent):void
{
if(!event.buttonDown)
CursorManager.removeAllCursors();
}
/**
*在窗口边缘并鼠标进入时调用
*/
privatefunctionresizeButtonRollOver(event:MouseEvent):void
{
if(windowState==FxWindowState.NORMAL)
{
if(!event.buttonDown)
{
setCursor(event.targetasButton);
}
}
}
/**
*鼠标经过窗口边缘时设置鼠标显示形状
*/
privatefunctionsetCursor(target:Button):void
{
switch(target)
{
casetopResizeButton:
casebottomResizeButton:
CursorManager.setCursor(DEFAULT_RESIZE_CURSOR_VERTICAL,2,-10,-10);
break;
caserightResizeButton:
caseleftResizeButton:
CursorManager.setCursor(DEFAULT_RESIZE_CURSOR_HORIZONTAL,2,-10,-10);
break;
casetopLeftResizeButton:
casebottomRightResizeButton:
CursorManager.setCursor(DEFAULT_RESIZE_CURSOR_TL_BR,2,-10,-10);
break;
casetopRightResizeButton:
casebottomLeftResizeButton:
CursorManager.setCursor(DEFAULT_RESIZE_CURSOR_TR_BL,2,-10,-10);
break;
}
}
/**
*窗口初始化时调用该函数加载皮肤
*/
overrideprotectedfunctionpartAdded(partName:String,instance:Object):void
{
super.partAdded(partName,instance);
if(instance==titleDisplay)
{
if(dragable)
{
titleDisplay.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);
titleDisplay.addEventListener(MouseEvent.MOUSE_UP,dragStop);
}
if(maximizable)
{
titleDisplay.addEventListener(MouseEvent.DOUBLE_CLICK,titleDoubleClick);
}
}
if(instance==closeButton)
{
if(closable)
{
closeButton.addEventListener(MouseEvent.CLICK,close);
}
else
{
closeButton.visible=false;
closeButton.enabled=false;
}
}
if(instance==maximizeButton)
{
if(maximizable)
{
maximizeButton.addEventListener(MouseEvent.CLICK,titleDoubleClick);
}
else
{
maximizeButton.visible=false;
maximizeButton.enabled=false;
}
}
if(instance==restoreButton)
{
restoreButton.visible=false;
restoreButton.enabled=false;
if(maximizable)
{
restoreButton.addEventListener(MouseEvent.CLICK,titleDoubleClick);
}
}
if(instance==minimizeButton)
{
if(minimizable)
{
minimizeButton.addEventListener(MouseEvent.CLICK,minimize);
}
else
{
minimizeButton.visible=false;
minimizeButton.enabled=false;
}
}
if(instance==topResizeButton)
{
if(resizable)
{
topResizeButton.addEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver);
topResizeButton.addEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown);
topResizeButton.addEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut);
}
else
{
topResizeButton.visible=false;
topResizeButton.enabled=false;
}
}
if(instance==bottomResizeButton)
{
if(resizable)
{
bottomResizeButton.addEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
bottomResizeButton.addEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
bottomResizeButton.addEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
else
{
bottomResizeButton.visible=false;
bottomResizeButton.enabled=false;
}
}
if(instance==leftResizeButton)
{
if(resizable)
{
leftResizeButton.addEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver);
leftResizeButton.addEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown);
leftResizeButton.addEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut);
}
else
{
leftResizeButton.visible=false;
leftResizeButton.enabled=false;
}
}
if(instance==rightResizeButton)
{
if(resizable)
{
rightResizeButton.addEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
rightResizeButton.addEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
rightResizeButton.addEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
else
{
rightResizeButton.visible=false;
rightResizeButton.enabled=false;
}
}
if(instance==topLeftResizeButton)
{
if(resizable)
{
topLeftResizeButton.addEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
topLeftResizeButton.addEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
topLeftResizeButton.addEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
else
{
topLeftResizeButton.visible=false;
topLeftResizeButton.enabled=false;
}
}
if(instance==topRightResizeButton)
{
if(resizable)
{
topRightResizeButton.addEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver);
topRightResizeButton.addEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown);
topRightResizeButton.addEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut);
}
else
{
topRightResizeButton.visible=false;
topRightResizeButton.enabled=false;
}
}
if(instance==bottomLeftResizeButton)
{
if(resizable)
{
bottomLeftResizeButton.addEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver);
bottomLeftResizeButton.addEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown);
bottomLeftResizeButton.addEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut);
}
else
{
bottomLeftResizeButton.visible=false;
bottomLeftResizeButton.enabled=false;
}
}
if(instance==bottomRightResizeButton)
{
if(resizable)
{
bottomRightResizeButton.addEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver);
bottomRightResizeButton.addEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown);
bottomRightResizeButton.addEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut);
}
else
{
bottomRightResizeButton.visible=false;
bottomRightResizeButton.enabled=false;
}
}
}
/**
*窗口销毁时调用该函数卸载皮肤
*/
overrideprotectedfunctionpartRemoved(partName:String,instance:Object):void
{
super.partRemoved(partName,instance);
if(instance==titleDisplay)
{
titleDisplay.removeEventListener(MouseEvent.MOUSE_DOWN,dragStart);
titleDisplay.removeEventListener(MouseEvent.MOUSE_UP,dragStop);
titleDisplay.removeEventListener(MouseEvent.DOUBLE_CLICK,titleDoubleClick)
}
if(instance==closeButton)
{
closeButton.removeEventListener(MouseEvent.CLICK,close);
}
if(instance==restoreButton)
{
restoreButton.removeEventListener(MouseEvent.CLICK,maximize);
}
if(instance==maximizeButton)
{
maximizeButton.removeEventListener(MouseEvent.CLICK,titleDoubleClick);
}
if(instance==minimizeButton)
{
minimizeButton.removeEventListener(MouseEvent.CLICK,minimize);
}
if(instance==topResizeButton)
{
topResizeButton.removeEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
topResizeButton.removeEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
topResizeButton.removeEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
if(instance==bottomResizeButton)
{
bottomResizeButton.removeEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
bottomResizeButton.removeEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
bottomResizeButton.removeEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
if(instance==leftResizeButton)
{
leftResizeButton.removeEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
leftResizeButton.removeEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
leftResizeButton.removeEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
if(instance==rightResizeButton)
{
rightResizeButton.removeEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
rightResizeButton.removeEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
rightResizeButton.removeEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
if(instance==topLeftResizeButton)
{
topLeftResizeButton.removeEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
topLeftResizeButton.removeEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
topLeftResizeButton.removeEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
if(instance==topRightResizeButton)
{
topRightResizeButton.removeEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
topRightResizeButton.removeEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
topRightResizeButton.removeEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
if(instance==bottomLeftResizeButton)
{
bottomLeftResizeButton.removeEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
bottomLeftResizeButton.removeEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
bottomLeftResizeButton.removeEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
if(instance==bottomRightResizeButton)
{
bottomRightResizeButton.removeEventListener(MouseEvent.ROLL_OVER,resizeButtonRollOver)
bottomRightResizeButton.removeEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown)
bottomRightResizeButton.removeEventListener(MouseEvent.ROLL_OUT,resizeButtonRollOut)
}
}
privatefunctiongetwindowState():int
{
return_windowState;
}
privatefunctionsetwindowState(windowState:int):void
{
_windowState=windowState;
}
}
}