Flex皮肤制作教程——修改组件的Skin

1. 修改组件的皮肤有三种方式：图形皮肤（Graphical Skins）、程序皮肤（Programmatic Skins）、状态皮肤。
2. 　　
3. 　　以下是通过程序皮肤的方式对组件进行修改的例子。通过程序皮肤的方式修改组件皮肤虽然也涉及到组件样式 Style ，但定义组件新皮肤的地方却在 as 代码中，外观的绘制均由代码完成。
5. 　　建立程序皮肤的大致步骤：
6. 　　1、编写新的组件皮肤 as 类
7. 　　2、在定义样式的时候把皮肤的属性信息与新的组件皮肤类关联起来，这里要用到 ClassReference( "className" ) 语法
8. 　　3、在 flex 中应用样式
10. 演示文件
13. 定义程序皮肤的外部 as类 文件 MyButton .as
15. package
16.   
17. {
18.   
19.         //导入新皮肤类的父类 ProgrammaticSkin，所有新的皮肤类都继承至它
20.   
21.         import mx.skins.ProgrammaticSkin;
22.   
23.         public class MyButtonSkin extends ProgrammaticSkin
24.   
25.         {
26.   
27.                 public function MyButtonSkin()
28.   
29.                 {
30.   
31.                         super();
32.   
33.                 }
34.   
35.                 //定义一个绘制新皮肤外观的函数
36.   
37.                 protected function drawSkin(skinColor:uint, skinW:Number, skinH:Number):void{
38.   
39.                         this.graphics.lineStyle();
40.   
41.                         this.graphics.beginFill(skinColor);
42.   
43.                         this.graphics.drawRoundRect(0, 0, skinW, skinH, 4, 4);
44.   
45.                         this.graphics.endFill();
46.   
47.                 }
48.   
49.                 /*
50.   
51.                 覆盖父类中的 updateDisplayList 方法
52.   
53.                 此方法负责根据 name 属性的值判断要更重绘的组件界面
54.   
55.                 在重绘的时候调用 drawSkin() 方法绘制新皮肤，达到自定义组件皮肤的目的
56.   
57.                 */
58.   
59.                 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
60.   
61.                         switch(name){
62.   
63.                                 case "upSkin":
64.   
65.                                         drawSkin(0xBED731, unscaledWidth, unscaledHeight);
66.   
67.                                 break;
68.   
69.                                 
70.   
71.                                 case "overSkin":
72.   
73.                                         drawSkin(0xBED001, unscaledWidth, unscaledHeight);
74.   
75.                                 break;
76.   
77.                                 
78.   
79.                                 case "downSkin":
80.   
81.                                         drawSkin(0xAAD001, unscaledWidth, unscaledHeight);
82.   
83.                                 break;
84.   
85.                         }
86.   
87.                 }
88.   
89.         }
90.   
91. }
92. 外部样式文件
94. Application{
95.   
96.         verticalAlign:top;
97.   
98.         horizontalAlign:center;
99.   
100.         backgroundGradientColors:#000,#323232;
101.   
102. }
103.   
104. Panel{
105.   
106.         fontSize:13;
107.   
108.         color:#dddddd;
109.   
110.         paddingBottom:10;
111.   
112.         paddingTop:10;
113.   
114.         paddingLeft:10;
115.   
116.         paddingRight:10;
117.   
118. }
119.   
120. Label, Button{
121.   
122.         fontSize:14;
123.   
124.         color:#000;
125.   
126. }
127.   
128. /*将组件样式属性与 as类 关联起来，使用 ClassReference 语法把各皮肤属性值设为在外部编写的 as类 (MyButton.as) 即可*/
129.   
130. .myButton{
131.   
132.         upSkin:ClassReference("MyButtonSkin");
133.   
134.         overSkin:ClassReference("MyButtonSkin");
135.   
136.         downSkin:ClassReference("MyButtonSkin");
137.   
138. }
139. 复制代码
140. Flex 代码
142. <?xml version="1.0" encoding="utf-8"?>
143.   
144. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
145.   
146.         <!--导入外部样式，样式文件里对样式属性与相应的 as 类文件做了关联-->
147.   
148.         <mx:Style source="styles/skinProgrammaticSkin.css" />
149.   
150.         <mx:Panel title="皮肤 Skin 的修改" width="35%" height="45%" layout="vertical" horizontalAlign="center">
151.   
152.                 <mx:Label width="100%" height="30" text="建立程序皮肤（Programmatic Skin）" />
153.   
154.                 <mx:HBox horizontalAlign="center">
155.   
156.                         <mx:Button id="myBtn" label="as皮肤" styleName="myButton" width="100" height="40" />
157.   
158.                 </mx:HBox>
159.   
160.         </mx:Panel>
161.   
162. </mx:Application>