flex学习笔记-布局

flex中设置图片平铺
<mx:Image source="assets/images/main.jpg" width="500" height="500" maintainAspectRatio="false" />
<s:Image source="assets/images/main.jpg" width="500" height="500" scaleMode="stretch" />

flex填充：
<s:Group includeIn="login" top="0" bottom="0" left="0" right="0">
<s:Rect width="100%" height="100%">
<s:fill>
<s:BitmapFill source="@Embed('assets/images/main.jpg')"/>
</s:fill>
</s:Rect>
</s:Group>
这里如果把embed取消掉，就不会填充任何东西，不知道什么原因？
<s:Group top="0" bottom="0" left="0" right="0">
<s:Rect width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="0xbc276a" weight="2"/>
</s:stroke>
<s:fill>
<s:RadialGradient>
<s:entries>
<s:GradientEntry color="0xECEC21" ratio="0.66" alpha="0.5"/>
</s:entries>
</s:RadialGradient>
</s:fill>
</s:Rect>
</s:Group>

stroke表示边框
fill就是填充色了
GradientEntry中的ratio不太明白啥意思

下面是一个弹出框：
本来可以不添加group来填充颜色的，由于我重写了bordercontainer的皮肤，导致这里再设置bgcolor不起作用，还不知道什么原因？

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				   xmlns:s="library://ns.adobe.com/flex/spark" 
				   xmlns:mx="library://ns.adobe.com/flex/mx"
				   creationComplete="init()"
				   backgroundColor="{labelBackColor}"
				   backgroundAlpha="0.9"
				   borderAlpha="0"
				   cornerRadius="5"
				   mouseDownOutside="removeHandler()"
				   mouseWheelOutside="removeHandler()"
				   width="160" height="80">

	<s:states>
		<s:State name="messageAlert"/>
	</s:states>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import cn.dnr.Constants;

			import mx.managers.PopUpManager;

			[Bindable]
			/***显示提示消息*/
			public var label:String ;
			[Bindable]
			public var labelColor:uint = 0x000000;
			[Bindable]
			public var labelFontSize:Number = 14;
			[Bindable]
			public var labelBackColor:uint = 0x841553;

			private function init():void
			{
				TimerDelay();
			}

			public function TimerDelay():void
			{
				currentState = "messageAlert";
				var myTimer:Timer = new Timer(Constants.ALERTTIME);
				myTimer.addEventListener("timer", timerHandler);
				myTimer.start();
			}

			public function timerHandler(event:TimerEvent):void {
				removeHandler();
			}

			protected function removeHandler():void
			{
				PopUpManager.removePopUp(this);
			}


		]]>
	</fx:Script>
	<!--提示对话窗口-->
	<s:Group top="0" bottom="0" left="0" right="0">
		<s:Rect width="100%" height="100%">
			<s:stroke>
				<s:SolidColorStroke color="0xbc276a" weight="2"/>
			</s:stroke>
			<s:fill>
				<s:RadialGradient>
					<s:entries>
						<s:GradientEntry color="0xECEC21" ratio="0.66" alpha="0.5"/>
					</s:entries>
				</s:RadialGradient>
			</s:fill>
		</s:Rect>
	</s:Group>

	<s:Group top="10" bottom="10" left="20" right="20">
		<s:Rect width="100%" height="100%">
			<s:fill>
				<s:RadialGradient>
					<s:entries>
						<s:GradientEntry color="0x0056FF" ratio="0.00" alpha="0.5"/>
					</s:entries>
				</s:RadialGradient>
			</s:fill>
		</s:Rect>
	</s:Group>

	<s:VGroup includeIn="messageAlert" width="100%" height="100%"
			  horizontalAlign="center" verticalAlign="middle">
		<s:Label text="{label}" 
				 color="{labelColor}" 
				 fontSize="{labelFontSize}"/>
	</s:VGroup>
</s:BorderContainer>

有关重写皮肤，皮肤主要作用是来布局对应组件和设置样式，但同样也可以出发事件，这里需要注意到是，如果要扩展原有组件添加的元素的变量名称需要和皮肤中的一样
如：组件中有一个元素：
[SkinPart(required="false")]
public var btnMin:Image;
皮肤中就应该有对应的
<s:Image id="btnMin" toolTip="最小化" source="assets\images\Buttonminimize.png"
width="18" height="18" right="27" top="7"/>
类型也需要相同，而且[SkinPart(required="false")]这句话不能少，原因也不清楚，先用着吧

下面为重写的titleWindow组件，添加了最小化按钮，是项目中用到的，直接帖过来的
组件：

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   skinClass="cn.dnr.skins.TitleWindowSkin">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>

	<s:states>
		<s:State name="open"/>
		<s:State name="minimized"/>
		<s:State name="restore"/>
		<s:State name="closed"/>
	</s:states>

	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.core.FlexGlobals;
			import mx.events.CloseEvent;
			import mx.managers.CursorManager;

			import spark.components.Button;
			import spark.components.Image;

			[SkinPart(required="false")] 
			public var btnMin:Image;
//			[SkinPart(required="false")] 
//			public var btnMax:Image;
//			[SkinPart(required="false")] 
//			public var btnRestore:Image;
			[SkinPart(required="false")] 
			public var btnClose:Image;

			private var theStatus:int=0;//窗口状态，0正常 1最大化 2最小化；
			public var isReSize:Boolean;//是否允许缩放
			private var theMinWidth:Number=200;//窗口最小宽度
			private var theMinHeight:Number=200;//窗口最大高度
			private var theOldPoint:Point;//改变大小前窗口的x，y坐标
			private var theOldWidth:Number;//最大最小化时的宽
			private var theOldHeight:Number;//最大最小化时的高

			private var mouseMargin:Number=4;//响应范围
			//设置光标的位置值 右上：3  右下：6 左下：11  左上8
			private var theSide:Number=0;
			private var SIDE_OTHER:Number=0;
			private var SIDE_TOP:Number=1;
			private var SIDE_RIGHT:Number=2;
			private var SIDE_LEFT:Number=7;
			private var SIDE_BOTTOM:Number=4;

			private var preWidth:Number;
			private var preHeight:Number;
			private var preX:Number;
			private var preY:Number;

			//当前鼠标光标类
			public var currentType:Class=null;

			//鼠标光标图标
			[Embed("assets/images/resizeCursorH.gif")]
			private var CursorH:Class;
			[Embed("assets/images/resizeCursorTLBR.gif")]
			private var CursorR:Class;
			[Embed("assets/images/resizeCursorTRBL.gif")]
			private var CursorL:Class;
			[Embed("assets/images/resizeCursorV.gif")]
			private var CursorV:Class;
			private var CursorNull:Class=null;

			protected override function createChildren():void{
				super.createChildren();				
				//监听按钮事件
//				btnClose.addEventListener(MouseEvent.CLICK,onCloseClick);
				btnMin.addEventListener(MouseEvent.CLICK,onMinClick);
//				btnMax.addEventListener(MouseEvent.CLICK,onMaxClick);
//				btnRestore.addEventListener(MouseEvent.CLICK,onReClick);
				//侦听拖拽相关的事件
				this.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
				this.addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);
				this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);	
			}

			private function onCloseClick(event:MouseEvent):void
			{
//				btnMax.visible=true;
//				btnRestore.visible=false;
				theStatus=0;
				this.dispatchEvent(new Event("myClose"));
			}
			private function onMinClick(event:MouseEvent):void
			{
				onSaveRestore();
				this.dispatchEvent(new Event("myMin"));
//				btnMax.visible = false;
//				btnRestore.visible=true;
				theStatus=2;
			}
			private function onMaxClick(event:MouseEvent):void
			{
				onSaveRestore();
				this.dispatchEvent(new Event("myMax"));
				this.isPopUp=false;
//				btnMax.visible=false;
//				btnRestore.visible=true;
				theStatus=1;

				preWidth = this.width;
				preHeight = this.height;
				preX = this.x;
				preY = this.y;

				this.width = stage.width;
				this.height = stage.height-50;
				this.x=0;
				this.y=0;
			}
			private function onReClick(event:MouseEvent):void
			{
				onGetRestore();
				this.dispatchEvent(new Event("myRestore"));
				this.isPopUp=true;
//				btnMax.visible=true;
//				btnRestore.visible=false;
				theStatus=0;

				this.width = preWidth;
				this.height = preHeight;
				this.x=preX;
				this.y=preY;
			}
			private function onMouseUp(event:MouseEvent):void
			{
				if(isReSize)
				{
					FlexGlobals.topLevelApplication.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
					FlexGlobals.topLevelApplication.removeEventListener(MouseEvent.MOUSE_MOVE,onResize);
					isReSize=false;
				}
				onChangeCursor(CursorNull);
			}
			private function onMouseDown(event:MouseEvent):void
			{
				if(theSide!=0)
				{
					isReSize=true;
					FlexGlobals.topLevelApplication.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
					FlexGlobals.topLevelApplication.addEventListener(MouseEvent.MOUSE_MOVE,onResize);
					var point:Point=new Point();
					point=this.localToContent(point);
					theOldPoint=point;
				}
			}
			private function onResize(event:MouseEvent):void
			{
				if(isReSize)
				{
					var xPlus:Number=FlexGlobals.topLevelApplication.mouseX-this.x;
					var yPlus:Number=FlexGlobals.topLevelApplication.mouseY-this.y;
					switch(theSide)
					{
						case SIDE_RIGHT+SIDE_BOTTOM:
							this.width=xPlus>theMinWidth?xPlus:theMinWidth;
							this.height=yPlus>theMinHeight?yPlus:theMinHeight;
							break;
						case SIDE_LEFT+SIDE_TOP:
							this.width=this.width-xPlus>theMinWidth?this.width-xPlus:theMinWidth;
							this.height=this.height-yPlus>theMinHeight?this.height-yPlus:theMinHeight;
							this.x=this.width>theMinWidth?FlexGlobals.topLevelApplication.mouseX:this.x;
							this.y=this.height>theMinHeight?FlexGlobals.topLevelApplication.mouseY:this.y;
							break;
						case SIDE_LEFT+SIDE_BOTTOM:
							this.width=this.width-xPlus>theMinWidth?this.width-xPlus:theMinWidth;
							this.height=yPlus>theMinHeight?yPlus:theMinHeight;
							this.x=this.width>theMinWidth?FlexGlobals.topLevelApplication.mouseX:this.x;
							break;
						case SIDE_RIGHT+SIDE_TOP:
							this.width=xPlus>theMinWidth?xPlus:theMinWidth;
							this.height=this.height-yPlus>theMinHeight?this.height-yPlus:theMinHeight;
							this.y=this.height>theMinHeight?FlexGlobals.topLevelApplication.mouseY:this.y;
							break;
						case SIDE_RIGHT:
							this.width=xPlus>theMinWidth?xPlus:theMinWidth;
							break;
						case SIDE_LEFT:
							this.width=this.width-xPlus>theMinWidth?this.width-xPlus:theMinWidth;
							this.x=this.width>theMinWidth?FlexGlobals.topLevelApplication.mouseX:this.x;
							break;
						case SIDE_BOTTOM:
							this.height=yPlus>theMinHeight?yPlus:theMinHeight;
							break;
						case SIDE_TOP:
							this.height=this.height-yPlus>theMinHeight?this.height-yPlus:theMinHeight;
							this.y=this.height>theMinHeight?FlexGlobals.topLevelApplication.mouseY:this.y;
							break;
					}
				}
			}
			private function onMouseOut(event:MouseEvent):void
			{
				if(!isReSize&&this.theStatus==0)
				{
					theSide=0;
					onChangeCursor(CursorNull);
					this.isPopUp=true;
				}
			}
			private function onMouseMove(event:MouseEvent):void
			{
				if(!theStatus)
				{
					var point:Point=new Point();
					point=this.localToGlobal(point);
					var xPosition:Number=FlexGlobals.topLevelApplication.mouseX;
					var yPosition:Number=FlexGlobals.topLevelApplication.mouseY;
					if(xPosition>=(point.x+this.width-mouseMargin)&&yPosition>=(point.y+this.height-mouseMargin))
					{//右下
						onChangeCursor(CursorR,-9,-9);
						theSide=SIDE_RIGHT+SIDE_BOTTOM;
						this.isPopUp=false;
					}else if(xPosition<=(point.x+mouseMargin)&&yPosition<=(point.y+mouseMargin))
					{//左上
						onChangeCursor(CursorR,-9,-9);
						theSide=SIDE_LEFT+SIDE_TOP;
						this.isPopUp=false;
					}else if(xPosition<=(point.x+mouseMargin)&&yPosition>=(point.y+this.height-mouseMargin))
					{//左下
						onChangeCursor(CursorL,-9,-9);
						theSide=SIDE_BOTTOM+SIDE_LEFT;
						this.isPopUp=false;
					}else if(xPosition>=(point.x+this.width-mouseMargin)&&yPosition<=(point.y+mouseMargin))
					{//右上
						onChangeCursor(CursorL,-9,-9);
						theSide=SIDE_RIGHT+SIDE_TOP;
						this.isPopUp=false;
					}else if(xPosition>(point.x+this.width-mouseMargin))
					{//右
						onChangeCursor(CursorH,-9,-9);
						theSide=SIDE_RIGHT;
						this.isPopUp=false;
					}else if(xPosition<(point.x+mouseMargin))
					{//左
						onChangeCursor(CursorH,-9,-9);
						theSide=SIDE_LEFT;
						this.isPopUp=false;
					}else if(yPosition<(point.y+mouseMargin))
					{//上
						onChangeCursor(CursorV,-9,-9);
						theSide=SIDE_TOP;
						this.isPopUp=false;
					}
					else if(yPosition>(point.y+this.height-mouseMargin))
					{//下
						onChangeCursor(CursorV,-9,-9);
						theSide=SIDE_BOTTOM;
						this.isPopUp=false;
					}
					else
					{
						onChangeCursor(CursorNull);
						if(!isReSize&&theStatus==0)
						{
							theSide=0;
							this.isPopUp=true;
						}
					}
					event.updateAfterEvent();
				}
			}
			private function onChangeCursor(type:Class,xOffset:Number=0,yOffset:Number=0):void
			{
				if(currentType!=type)
				{
					currentType=type;
					CursorManager.removeCursor(CursorManager.currentCursorID);
					if(type!=null)
					{
						CursorManager.setCursor(type,2,xOffset,yOffset);
					}
				}
			}
			private function onSaveRestore():void
			{
				var point:Point=new Point();
				theOldPoint=this.localToGlobal(point);
				theOldWidth=this.width;
				theOldHeight=this.height;
			}
			private function onGetRestore():void
			{
				this.x=theOldPoint.x;
				this.y=theOldPoint.y
				this.width=theOldWidth;
				this.height=theOldHeight;
			}
		]]>
	</fx:Script>
</s:TitleWindow>

皮肤：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
			 minWidth="176" minHeight="76" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">

	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.TitleWindow")]
		]]>
	</fx:Metadata> 

	<fx:Script fb:purpose="styling">
		<![CDATA[
			import mx.core.FlexVersion;

			/* Define the skin elements that should not be colorized. 
			For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
			static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "border"];

			/* exclusions before Flex 4.5 for backwards-compatibility purposes */
			static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup"];

			/**
			 * @private
			 */
			override public function get colorizeExclusions():Array 
			{
				// Since border is styleable via borderColor, no need to allow chromeColor to affect
				// the border.  This is wrapped in a compatibility flag since this change was added  
				// in Flex 4.5
				if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
				{
					return exclusions_4_0;
				}

				return exclusions;
			}

			/**
			 * @private
			 */
			override protected function initializationComplete():void
			{
				useChromeColor = true;
				super.initializationComplete();
			}

			/**
			 * @private
			 */
			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
			{
				if (getStyle("borderVisible") == true)
				{
					border.visible = true;
					background.left = background.top = background.right = background.bottom = 1;
					contents.left = contents.top = contents.right = contents.bottom = 1;
				}
				else
				{
					border.visible = false;
					background.left = background.top = background.right = background.bottom = 0;
					contents.left = contents.top = contents.right = contents.bottom = 0;
				}

				dropShadow.visible = getStyle("dropShadowVisible");

				var cr:Number = getStyle("cornerRadius");
				var withControls:Boolean = 
					(currentState == "disabledWithControlBar" || 
						currentState == "normalWithControlBar" ||
						currentState == "inactiveWithControlBar");

				if (cornerRadius != cr)
				{
//					cornerRadius = cr;

					dropShadow.tlRadius = cornerRadius;
					dropShadow.trRadius = cornerRadius;
					dropShadow.blRadius = withControls ? cornerRadius : 0;
					dropShadow.brRadius = withControls ? cornerRadius : 0;

					setPartCornerRadii(topMaskRect, withControls); 
					setPartCornerRadii(border, withControls); 
					setPartCornerRadii(background, withControls);
				}

				if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls); 

				borderStroke.color = getStyle("borderColor");
				borderStroke.alpha = getStyle("borderAlpha");
				backgroundFill.color = getStyle("backgroundColor");
				backgroundFill.alpha = getStyle("backgroundAlpha");

				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}

			/**
			 * @private
			 */  
			private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
			{            
				target.topLeftRadiusX = cornerRadius;
				target.topRightRadiusX = cornerRadius;
				target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
				target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
			}

			private var cornerRadius:Number=5;
		]]>
	</fx:Script>

	<s:states>
		<s:State name="normal" />
		<s:State name="inactive" stateGroups="inactiveGroup" />
		<s:State name="disabled" />
		<s:State name="normalWithControlBar" stateGroups="withControls" />
		<s:State name="inactiveWithControlBar" stateGroups="withControls, inactiveGroup" />
		<s:State name="disabledWithControlBar" stateGroups="withControls" />
	</s:states>

	<!--- drop shadow can't be hittable so it stays sibling of other graphics @private-->
	<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" 
							 alpha.inactiveGroup="0.22" distance="11"  distance.inactiveGroup="7"
							 angle="90" color="0x000000" left="0" top="0" right="0" bottom="0"/>

	<!--- drop shadow can't be hittable so all other graphics go in this group -->
	<s:Group left="0" right="0" top="0" bottom="0">

		<!--- top group mask @private-->
		<s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask">
			<!--- @private-->
			<s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0" >
				<s:fill>
					<s:SolidColor alpha="0"/>
				</s:fill>
			</s:Rect>
		</s:Group>

		<!--- bottom group mask @private-->
		<s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask" 
				 includeIn="withControls">
			<!--- @private-->
			<s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
				<s:fill>
					<s:SolidColor alpha="0"/>
				</s:fill>
			</s:Rect>
		</s:Group>

		<!--- layer 1: border @private -->
		<s:Rect id="border" left="0" right="0" top="0" bottom="0" >
			<s:stroke>
				<!--- Defines the TitleWindowSkin class's border stroke. The default value is 1. -->
				<s:SolidColorStroke id="borderStroke" weight="1" />
			</s:stroke>
		</s:Rect>

		<!-- layer 2: background fill -->
		<!--- Defines the appearance of the TitleWindowSkin class's background. -->
		<s:Rect id="background" left="1" top="1" right="1" bottom="1">
			<s:fill>
				<!--- Defines the TitleWindowSkin class's background fill. The default color is 0xFFFFFF. -->
				<s:SolidColor id="backgroundFill" color="#FFFFFF"/>
			</s:fill>
		</s:Rect>

		<!-- layer 3: contents -->
		<!--- Contains the vertical stack of title bar content and control bar. -->
		<s:Group left="1" right="1" top="1" bottom="1" id="contents">
			<s:layout>
				<s:VerticalLayout gap="0" horizontalAlign="justify" />
			</s:layout>
			<!--- @private -->
			<s:Group id="topGroup" mask="{topGroupMask}">

				<!--- layer 0: title bar fill @private -->
				<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
					<s:fill>
						<s:LinearGradient rotation="90">
							<s:GradientEntry color="0x3399CC"
											 color.inactiveGroup="0x99aaaa"/>
							<s:GradientEntry color="0x0066aa"
											 color.inactiveGroup="0x808080"/>
							<!---
							<s:GradientEntry color="0xD2D2D2"
											 color.inactiveGroup="0xEAEAEA"/>
							<s:GradientEntry color="0x9A9A9A"
											 color.inactiveGroup="0xCECECE"/>
							-->
						</s:LinearGradient>
					</s:fill>
				</s:Rect>

				<!--- layer 1: title bar highlight @private -->
				<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
					<s:stroke>
						<s:LinearGradientStroke rotation="90" weight="1">
							<s:GradientEntry color="0xE6E6E6" />
							<s:GradientEntry color="0xFFFFFF" alpha="0.22"/>
						</s:LinearGradientStroke>
					</s:stroke>
					<s:fill>
						<s:LinearGradient rotation="90">
							<s:GradientEntry color="0xFFFFFF" alpha="0.15" />
							<s:GradientEntry color="0xFFFFFF" alpha="0.15" ratio="0.44"/>
							<s:GradientEntry color="0xFFFFFF" alpha="0" ratio="0.4401"/>
						</s:LinearGradient>
					</s:fill>
				</s:Rect>

				<!--- layer 2: title bar divider @private -->
				<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0" >
					<s:fill>
						<s:SolidColor color="0x000000" alpha="0.75" />
					</s:fill>
				</s:Rect>

				<!-- layer 3: text -->
				<!--- @copy spark.components.Panel#titleDisplay -->
				<s:Label id="titleDisplay" maxDisplayedLines="1"
						 left="9" right="36" top="1" bottom="0" minHeight="30"
						 verticalAlign="middle" fontWeight="bold" />

				<!-- layer 4: moveArea -->
				<!--- @copy spark.components.TitleWindow#moveArea -->
				<s:Group id="moveArea" left="0" right="0" top="0" bottom="0" />

				<!--- @copy spark.components.TitleWindow#closeButton 
				<s:Image id="btnMax" toolTip="最大化" source="assets\images\Buttonmaximize.png"
						 width="18" height="18" right="27" top="7"/>
				<s:Image id="btnRestore" visible="false" toolTip="还原" source="assets\images\Buttonrestore.png"
						 width="18" height="18" right="27" top="7"/>
				-->
				<s:Image id="btnMin" toolTip="最小化" source="assets\images\Buttonminimize.png"
						 width="18" height="18" right="27" top="7"/>
				<s:Button id="closeButton" skinClass="spark.skins.spark.TitleWindowCloseButtonSkin"
						  width="15" height="15" right="7" top="7" />
			</s:Group>

			<!--
			Note: setting the minimum size to 0 here so that changes to the host component's
			size will not be thwarted by this skin part's minimum size.   This is a compromise,
			more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
			-->
			<!--- @copy spark.components.SkinnableContainer#contentGroup -->
			<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
			</s:Group>

			<!--- @private -->
			<s:Group id="bottomGroup" minWidth="0" minHeight="0" 
					 includeIn="withControls">  

				<s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">

					<!-- layer 0: control bar divider line -->
					<s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
						<s:fill>
							<s:SolidColor color="0x000000" />
						</s:fill>
					</s:Rect>

					<!-- layer 1: control bar highlight -->
					<s:Rect left="0" right="0" top="1" bottom="0">
						<s:stroke>
							<s:LinearGradientStroke rotation="90" weight="1">
								<s:GradientEntry color="0xFFFFFF" />
								<s:GradientEntry color="0xD8D8D8" />
							</s:LinearGradientStroke>
						</s:stroke>
					</s:Rect>

					<!-- layer 2: control bar fill -->
					<s:Rect left="1" right="1" top="2" bottom="1">
						<s:fill>
							<s:LinearGradient rotation="90">
								<s:GradientEntry color="0xEDEDED"/>
								<s:GradientEntry color="0xCDCDCD"/>
							</s:LinearGradient>
						</s:fill>
					</s:Rect>
				</s:Group>

				<!--- @copy spark.components.Panel#controlBarGroup -->
				<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
					<s:layout>
						<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
					</s:layout>
				</s:Group>
			</s:Group>
		</s:Group>
	</s:Group>
</s:SparkSkin>