flex SparkSkin就button而言的介绍

代码如下：

<?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">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("component.CustomButton")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="down" />
		<s:State name="over" />
		<s:State name="up" />
	</s:states>
	
	<s:Ellipse width="40" height="20">
		<s:fill>
			<s:SolidColor color="#FFFF00" color.over="#00FF00"
						  color.down="#FF0000" />
		</s:fill>
				<s:stroke>
					<s:SolidColorStroke color="0x00FFFF" />
				</s:stroke>
	</s:Ellipse>
	<s:RichText id="labelElement"
				fontFamily="Myriad Pro"
				fontSize="11"
				color="0xBBBBBB"
				text="登录"
				textAlign="center"
				horizontalCenter="0"
				verticalCenter="1"
				width="100%">
	</s:RichText>
	<!-- SkinParts
	name=iconDisplay,type=spark.primitives.BitmapImage,required=false
	name=labelDisplay,type=spark.core.IDisplayText,required=false
	-->
</s:SparkSkin>

自定义Button的mxml的代码解释：

? ?如果要自定义控件样式，必须要要继承SparkSkin或者Skin。

(2)<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
含义：
? ?我们要修改的是spark.components.Button的外形，Flex SDK 4(Gumbo)新增了一个matadata tag：HostComponent.同时，Metadata也由原来的mx:变成了现在的fx，因为namespace发生了改变。

(3)<s:states>
? ?? ?<s:State name="up"/>
? ?? ?<s:State name="over"/>
? ?? ?<s:State name="down"/>
? ?? ?<s:State name="disabled"/>
</s:states>
? ?定义了Button的四种状态：up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能，用State来描述状态。
? ?在Flex SDK 3的情况下，只能描述UI的不同状态，而在Flex SDK 4(Gumbo)中，又赋予了State描述控件状态的功能。

(4)<s:Ellipse width="100%" height="100%">
</s:Ellipse>
? ?画一个圆形（椭圆形）的图形，而Ellipse也是Flex SDK 4(Gumbo)新增一个包：spark.primitives里面的一个class。
? ?spark.primitives里面定义了一些图形，例如：Ellipse、Rect、Path、Line等class。同样根据这些class name就可以得出是做什么用的。

(5)<s:fill>
? ?? ?<s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
? ?</s:fill>
? ?设定填充的方式（SolidColor）填充颜色值0x131313的颜色，color.over是指鼠标移动上去后的颜色，color.down是鼠标按下时候的颜色。
? ?引申一下，还有color.up、color.display，通过这些值就可以描述四种状态时的颜色。
另外，请注意一下，SolidColor外层必须要有<s:fill>否则会出现错误。而fill的含义是：填充。

(6)<s:stroke>
? ?? ?<s:SolidColorStroke color="0x0c0d0d" />
? ?</s:stroke>
? ?设定边线的颜色（SolidColorStroke）当然也可以设定诸如：color.up、color.display、color.down、color.over的颜色。
? ?同样SolidColorStroke必须在stroke内部，而stroke的含义：设定边框。

(7)我们在重新看一下这些代码的意义：
<s:Ellipse width="100%" height="100%">
? ?? ?<s:fill>
? ?? ?? ?? ?<s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
? ?? ?</s:fill>
? ?? ?<s:stroke>
? ?? ?? ?? ?<s:SolidColorStroke color="0x0c0d0d" />
? ?? ?</s:stroke>
? ?定义一个圆形（因为宽和高相等）然后填充一个0x131313的颜色，并且设定鼠标移上、按下时的颜色值（color.over="#191919" color.down="#ffffff"）然后在定义一个边框，设定颜色为0x0c0d0d。

(8)<s:RichText id="labelElement"?
? ?? ?fontFamily="Myriad Pro"?
? ?? ?fontSize="11"?
? ?? ?color="0xBBBBBB"?
? ?? ?textAlign="center"?
? ?? ?horizontalCenter="0"?
? ?? ?verticalCenter="1"?
? ?? ?width="100%">
</s:RichText>
? ?上面的代码定义了Button中可以显示文字的部分。注意，id必须设定为labelElement，否则出错。其他的样式可以自行设定了。

主程序：
? ?<s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/>
? ?我们要注意的地方：skinClass，这也是Flex SDK 4(Gumbo)新增加的一个class，专门用来设定当前皮肤的properties，请注意skinClass只适用于Spark包里面的可视化控件。
? ?以上就是这个简单的自定义Button的代码详解了，通过以上的例子，我们在Flex SDK 4(Gumbo)可以通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。
4.halo包使用定义的皮肤
看以下的代码：
<fx:Style>
? ? .sparkButtonStyle {
? ?? ?? ?skin: ClassReference("com.rianote.flex.skin.KButton");
? ? }
</fx:Style>
<mx:Button label="我是halo组件" styleName="sparkButtonStyle"/>
再让我们对比一下spark组件的写法：
Button {?
? ? skinClass: ClassReference("com.rianote.flex.skin.KButton");?
}
<s:Button label="我是spark组件" skinClass="com.rianote.flex.skin.KButton" />