Flex4的皮肤skin
1.SparkSkin介绍
(1)spark.skins，这个包里面只有一个class：SparkSkin，非美工的程序员可以通过这个class来实现任意自定义控件的样式。
(2)SparkSkin是一个Group类型的容器。（它继承自Group）
(3)全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类
(4)SparkSkin：是全部Spark Class的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。
Skin：是SparkSkin的父类，例如ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的样式，则需要使用Skin。
综上所述，也就是可以使用SparkSkin的地方，我们使用Skin一样可以达到同样的效果。
2.SparkSkin示例
在Flex SDK 4(Gumbo)中，我们只需要将这个button的样式继承与SparkSkin或者Skin，然后在其中加入一些我想要的内容即可，请看以下的代码：
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
s:SparkSkin
3
xmlns:s
="library://ns.adobe.com/flex/spark"
4
xmlns:fx
="http://ns.adobe.com/mxml/2009"
>
5
<
s:states
>
6
<
s:State
name
="up"
/>
7
<
s:State
name
="over"
/>
8
<
s:State
name
="down"
/>
9
<
s:State
name
="disabled"
/>
10
</
s:states
>
11
<
fx:Metadata
>
[HostComponent("spark.components.Button")]
</
fx:Metadata
>
12
<
s:Ellipse
width
="100%"
height
="100%"
>
13
<
s:fill
>
14
<
s:SolidColor
color
="0x131313"
color.over
="#191919"
color.down
="#ffffff"
/>
15
</
s:fill
>
16
<
s:stroke
>
17
<
s:SolidColorStroke
color
="0x0c0d0d"
/>
18
</
s:stroke
>
19
</
s:Ellipse
>
20
<
s:RichText
id
="labelElement"
21
fontFamily
="Myriad Pro"
22
fontSize
="11"
23
color
="0xBBBBBB"
24
textAlign
="center"
25
horizontalCenter
="0"
26
verticalCenter
="1"
27
width
="100%"
>
28
</
s:RichText
>
29
</
s:SparkSkin
>
我们可以用以下几个方式：
(1) Button {
skinClass: ClassReference("com.rianote.flex.skin.KButton");
}
(2)<Button skinClass="com.rianote.flex.skin.KButton" />
(3)myButton.setStyle( "skinClass", Class( KButton ));
其中skinClass也是Flex SDK 4(Gumbo)里面新增加的一个class，其作用就是设定当前这个组件的Skin。
主程序：
代码
1
<?
xml version='1.0' encoding='UTF-8'
?>
2
<
s:Application
xmlns:s
="library://ns.adobe.com/flex/spark"
3
xmlns:fx
="http://ns.adobe.com/mxml/2009"
4
height
="254"
width
="576"
>
5
<
fx:Script
>
6
<!--
[CDATA[
7
import com.rianote.flex.skin.Button;
8
]]
-->
9
</
fx:Script
>
10
<
s:Button
x
="54"
y
="56"
skinClass
="com.rianote.flex.skin.Button"
height
="32"
11
width
="77"
label
="Button"
/>
12
</
s:Application
>
13
3.SparkSkin示例解释
自定义Button的mxml的代码解释：
(1)
1
<
s:SparkSkin
2
xmlns:s
="library://ns.adobe.com/flex/spark"
3
xmlns:fx
="http://ns.adobe.com/mxml/2009"
>
4
</
s:SparkSkin
>
含义：
如果要自定义控件样式，必须要要继承SparkSkin或者Skin，关于二者的区别我在上一篇文章中已经叙述了。
(2)
1
<
fx:Metadata
>
[HostComponent("spark.components.Button")]
</
fx:Metadata
>
含义：
我们要修改的是spark.components.Button的外形，Flex SDK 4(Gumbo)新增了一个matadata tag：HostComponent.同时，Metadata也由原来的mx:变成了现在的fx，因为namespace发生了改变。
(3)
1
<
s:states
>
2
<
s:State
name
="up"
/>
3
<
s:State
name
="over"
/>
4
<
s:State
name
="down"
/>
5
<
s:State
name
="disabled"
/>
6
</
s:states
>
含义：
定义了Button的四种状态：up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能，用State来描述状态。
在Flex SDK 3的情况下，只能描述UI的不同状态，而在Flex SDK 4(Gumbo)中，又赋予了State描述控件状态的功能。
(4)
1
<
s:Ellipse
width
="100%"
height
="100%"
>
2
</
s:Ellipse
>
含义：
画一个圆形（椭圆形）的图形，而Ellipse也是Flex SDK 4(Gumbo)新增一个包：spark.primitives里面的一个class。
spark.primitives里面定义了一些图形，例如：Ellipse、Rect、Path、Line等class。同样根据这些class name就可以得出是做什么用的。
(5)
1
<
s:fill
>
2
<
s:SolidColor
color
="0x131313"
color.over
="#191919"
color.down
="#ffffff"
/>
3
</
s:fill
>
含义：
设定填充的方式（SolidColor）填充颜色值0x131313的颜色，color.over是指鼠标移动上去后的颜色，color.down是鼠标按下时候的颜色。
引申一下，还有color.up、color.display，通过这些值就可以描述四种状态时的颜色。
另外，请注意一下，SolidColor外层必须要有<s:fill>否则会出现错误。而fill的含义是：填充。
(6)
1
<
s:stroke
>
2
<
s:SolidColorStroke
color
="0x0c0d0d"
/>
3
</
s:stroke
>
含义：
设定边线的颜色（SolidColorStroke）当然也可以设定诸如：color.up、color.display、color.down、color.over的颜色。
同样SolidColorStroke必须在stroke内部，而stroke的含义：设定边框。
(7)我们在重新看一下这些代码的意义：
代码
1
<
s:Ellipse
width
="100%"
height
="100%"
>
2
<
s:fill
>
3
<
s:SolidColor
color
="0x131313"
color.over
="#191919"
color.down
="#ffffff"
/>
4
</
s:fill
>
5
<
s:stroke
>
6
<
s:SolidColorStroke
color
="0x0c0d0d"
/>
7
</
s:stroke
>
8
</
s:Ellipse
>
含义：
定义一个圆形（因为宽和高相等）然后填充一个0x131313的颜色，并且设定鼠标移上、按下时的颜色值（color.over="#191919" color.down="#ffffff"）然后在定义一个边框，设定颜色为0x0c0d0d。
(8)
代码
1
<
s:RichText
id
="labelElement"
2
fontFamily
="Myriad Pro"
3
fontSize
="11"
4
color
="0xBBBBBB"
5
textAlign
="center"
6
horizontalCenter
="0"
7
verticalCenter
="1"
8
width
="100%"
>
9
</
s:RichText
>
含义：
上面的代码定义了Button中可以显示文字的部分。注意，id必须设定为labelElement，否则出错。其他的样式可以自行设定了。
主程序：
1
<
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包使用定义的皮肤
看以下的代码
1
<
fx:Style
>
2
.sparkButtonStyle {
3
skin: ClassReference("com.rianote.flex.skin.KButton");
4
}
5
</
fx:Style
>
6
<
mx:Button
label
="我是halo组件"
styleName
="sparkButtonStyle"
/>
再让我们对比一下spark组件的写法：
1
<
fx:Style
>
2
Button {
3
skinClass: ClassReference("com.rianote.flex.skin.KButton");
4
}
5
</
fx:Style
>
6
<
s:Button
label
="我是spark组件"
skinClass
="com.rianote.flex.skin.KButton"
/>
参考文献：
1.Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin .
http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin.html
2.Skinning and Components in Flex 4's Spark Architecture
http://www.artima.com/articles/flex_spark.html