Flex4 Skinning 1: 自定义一个简单按钮的皮肤

　　Flex4使得改变应用程序的外观变得异常简单，这主要归功于新的皮肤框架（skinning architecture），通过它我们可以将组件中的可视化元素和逻辑完全分离。也正因为这个思想的引导，我们可以发现Flex4中的组件本身都不再包含外观信息的定义，而是把这些信息放在相关的皮肤（skin）文件中。

　　通过这系列文章，笔者将展示一下Flex4中的皮肤框架（skinning architecture）。首先，我们为常用的按钮（Button）组件定义一个新的皮肤。

　　新建相关的项目和包，然后新建一个MXML Skin文件。

Figure 1. 新建皮肤文件并将其Host component设置为apark.components.Button

　　代码如下。

<?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.Button")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="down" />
		<s:State name="over" />
		<s:State name="up" />
	</s:states>
	
	<!-- dropshadow for the down state only -->
	<s:Rect radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0" includeIn="down">
		<s:fill>
			<s:SolidColor color="0" />
		</s:fill>
		<s:filters>
			<s:DropShadowFilter knockout="true" blurX="5" blurY="5" alpha="0.32" distance="2" /> 
		</s:filters>
	</s:Rect>
	
	<!-- border and fill -->
	<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
		<s:fill>
			<s:SolidColor color="0x77CC22" color.over="0x92D64E" color.down="0x67A41D" />
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="0x131313" weight="2" />
		</s:stroke>
	</s:Rect>
	
	<!-- highlight on top -->
	<s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" height="50%">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF" alpha=".5"/>
				<s:GradientEntry color="0xFFFFFF" alpha=".1"/> 
			</s:LinearGradient>
		</s:fill>
	</s:Rect> 
	
	<!-- text -->
	<s:Label text="Simple Button" color="0x131313" 
			 textAlign="center" verticalAlign="middle" 
			 horizontalCenter="0" verticalCenter="1" 
			 left="12" right="12" top="6" bottom="6" />
		
	<!-- SkinParts
	name=labelDisplay, type=spark.components.supportClasses.TextBase, required=false
	-->
</s:Skin>

　　在主应用程序文件中使用按钮并设置它的皮肤属性（skinClass）。

<?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">

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	
	<s:Button skinClass="com.guyue.skins.SimpleButtonSkin" />
	
	<s:Button label="I am a button without customerized skin. " />
	
</s:Application>

 

Figure 2.

　　这样一个最简单的按钮自定义皮肤就制作完成。从图2可以看出应用了我们定义的皮肤的按钮与默认的按钮的区别。使用皮肤的方法是设置组件的skinClass属性。