Panel-Skin

环境背景：

1、Adobe提供的模式皮肤，样式一般化不能给予好的体验：

---

 

自定义皮肤须知：

1、因为我们是对组件的皮肤“重写”，标签的标识符（Id）必须跟默认的一样。

 static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "border"];

---

 

皮肤代码重写：

1、在设计模式下，右击Panel，选择“创建外观”，去掉“创建以下项的副本”，点击完成。

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.Panel")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabledWithControlBar" />
		<s:State name="normalWithControlBar" />
		<s:State name="disabled" />
		<s:State name="normal" />
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>
	
	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	name=titleDisplay, type=spark.core.IDisplayText, required=false
	name=controlBarGroup, type=spark.components.Group, required=false
	-->
</s:Skin>

2、编写Panel整体框架皮肤：

	<s:BorderContainer color="0xAAAAAA" 
					   cornerRadius="8"
					   width="100%" height="100%" 
					   borderColor="#aaaaaa" borderWeight="2">
		<s:Rect width="100%" height="45" 
				topLeftRadiusX="7" topLeftRadiusY="7" topRightRadiusX="7" topRightRadiusY="7"
				top="0">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:entries>
						<s:GradientEntry color="#bf0000" />
						<s:GradientEntry color="#ff0011" />
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
		
		<s:Rect bottomLeftRadiusX="7" bottomRightRadiusX="7"
				y="45"
				width="100%" height="100%">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:entries>
						<s:GradientEntry color="#f8f8f8" />
						<s:GradientEntry color="#CCCCCC" />
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
		
		<s:Rect width="100%" height="40" 
				excludeFrom="normal, disabled"
				bottomLeftRadiusX="7" bottomLeftRadiusY="7" bottomRightRadiusX="7" bottomRightRadiusY="7"
				bottom="0">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:entries>
						<s:GradientEntry color="#3f3f3f" />
						<s:GradientEntry color="#a5a5a5" />
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
	</s:BorderContainer>

3、为已有的标识符设置“占位”：

	<s:Label id="titleDisplay" 
			 paddingLeft="15" paddingRight="15" paddingTop="15"
			 color="white"
			 fontSize="18"
			 fontWeight="bold"
			 fontStyle="italic"/>
	
	<s:Group id="contentGroup">
		<s:layout>
			<s:VerticalLayout paddingTop="55" paddingBottom="10"
							  paddingLeft="15" paddingRight="15"
							  paddingBottom.disabledWithControlBar="55" 
							  paddingTop.disabledWithControlBar="55"
							  paddingBottom.normalWithControlBar="55"
							  paddingTop.normalWithControlBar="55"/>
		</s:layout>
	</s:Group>
	
	<s:Group id="controlBarGroup" bottom="10">
		<s:layout>
			<s:HorizontalLayout paddingLeft="5" paddingRight="5"/>
		</s:layout>
	</s:Group>

4、运行结果：

5、在为panel中的属性设置值：

	<s:Panel id="myPanel1" skinClass="skins.PanelSkin" title="My first panel title">
		
		<mx:Text width="200" text="Test。 "/>
		
		<s:controlBarContent>
			<s:Button label="Button"/>
		</s:controlBarContent>
		
	</s:Panel>

	<s:Panel id="myPanel2" skinClass="skins.PanelSkin" title="My second panel title">
		
		<mx:Text width="200" text="Test。"/>
		
	</s:Panel>

---

 完整代码：

1、PanelSkin

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.Panel")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabledWithControlBar" />
		<s:State name="normalWithControlBar" />
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>
	
	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	name=titleDisplay, type=spark.core.IDisplayText, required=false
	name=controlBarGroup, type=spark.components.Group, required=false
	-->
	<s:BorderContainer color="0xAAAAAA" 
					   cornerRadius="8"
					   width="100%" height="100%" 
					   borderColor="#aaaaaa" borderWeight="2">
		<s:Rect width="100%" height="45" 
				topLeftRadiusX="7" topLeftRadiusY="7" topRightRadiusX="7" topRightRadiusY="7"
				top="0">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:entries>
						<s:GradientEntry color="#bf0000" />
						<s:GradientEntry color="#ff0011" />
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
		
		<s:Rect bottomLeftRadiusX="7" bottomRightRadiusX="7"
				y="45"
				width="100%" height="100%">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:entries>
						<s:GradientEntry color="#f8f8f8" />
						<s:GradientEntry color="#CCCCCC" />
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
		
		<s:Rect width="100%" height="40" 
				excludeFrom="normal, disabled"
				bottomLeftRadiusX="7" bottomLeftRadiusY="7" 
				bottomRightRadiusX="7" bottomRightRadiusY="7"
				bottom="0">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:entries>
						<s:GradientEntry color="#3f3f3f" />
						<s:GradientEntry color="#a5a5a5" />
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
	</s:BorderContainer>
	
	<s:Label id="titleDisplay" 
			 paddingLeft="15" paddingRight="15" paddingTop="15"
			 color="white"
			 fontSize="18"
			 fontWeight="bold"
			 fontStyle="italic"/>
	
	<s:Group id="contentGroup">
		<s:layout>
			<s:VerticalLayout paddingTop="55" paddingBottom="10"
							  paddingLeft="15" paddingRight="15"
							  paddingBottom.disabledWithControlBar="55" 
							  paddingTop.disabledWithControlBar="55"
							  paddingBottom.normalWithControlBar="55"
							  paddingTop.normalWithControlBar="55"/>
		</s:layout>
	</s:Group>
	
	<s:Group id="controlBarGroup" bottom="10">
		<s:layout>
			<s:HorizontalLayout paddingLeft="5" paddingRight="5"/>
		</s:layout>
	</s:Group>
</s:Skin>

 

2、Application

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600">
	<s:layout>
		<s:HorizontalLayout horizontalAlign="center" paddingTop="5" verticalAlign="middle"/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Panel width="250" height="200" skinClass="skins.PanelSkin">
	</s:Panel>
	
	<s:Panel id="myPanel1" skinClass="skins.PanelSkin" title="My first panel title">
		
		<mx:Text width="200" text="Test。 "/>
		
		<s:controlBarContent>
			<s:Button label="Button"/>
		</s:controlBarContent>
		
	</s:Panel>
	
	<s:Panel id="myPanel2" skinClass="skins.PanelSkin" title="My second panel title">
		
		<mx:Text width="200" text="Test。"/>
		
	</s:Panel>

</s:Application>