Flex4使得改变应用程序的外观变得异常简单，这主要归功于新的皮肤框架（skinning architecture），通过它我们可以将组件中的可视化元素和逻辑完全分离。也正因为这个思想的引导，我们可以发现Flex4中的组件本身都不再包含外观信息的定义，而是把这些信息放在相关的皮肤（skin）文件中。
通过这系列文章，笔者将展示一下Flex4中的皮肤框架（skinning architecture）。首先，我们为常用的按钮（Button）组件定义一个新的皮肤。
新建相关的项目和包，然后新建一个MXML Skin文件。
Figure 1. 新建皮肤文件并将其Host component设置为apark.components.Button
代码如下。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<?xml version="1.0" encoding="utf-8"?><s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" <!-- 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）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 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属性。