Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin（一）

  在Flex SDK 4(Gumbo)新增加了一个包：spark.skins，这个包里面只有一个class：SparkSkin，而我们（非美工的程序员）通过这个class来实现任意自定义控件的样式。

下图是SparkSkin的继承关系：

 

通过上述关系可以得出如下的结论：
1、SparkSkin是一个Group类型的容器。（它继承与Group）
2、Base class for Spark skins.（是全部Spark Class的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类）

另外，请大家注意另外一个class：Skin，这个class是SparkSkin的父类，同时Skin继承与Group，那么Skin与SparkSkin的区别的什么呢？
下图是Skin的继承关系：

 

SparkSkin：是全部Spark Class的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。

Skin：是SparkSkin的父类，例如ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的样式，则需要使用Skin。

综上所述，也就是可以使用SparkSkin的地方，我们使用Skin一样可以达到同样的效果。

先让我们看一下一个自定义Button后的效果：

 

如果是在Flex SDK 3.X时代或者Flex SDK 2.X时代的时候，如果想要达到上述的效果，我们只能自己动手来“画”这个形状，或者寻求美工的帮助来实现这样的效果。
在Flex SDK 4(Gumbo)中，我们只需要将这个button的样式继承与SparkSkin或者Skin，然后在其中加入一些我想要的内容即可，请看以下的代码：

 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:fx=" http://ns.adobe.com/mxml/2009">
 
  
  
  
  
 
 [HostComponent("spark.components.Button")]
 
  
   
  
  
   
  
 
   fontFamily="Myriad Pro"
  fontSize="11"
  color="0xBBBBBB"
  textAlign="center"
  horizontalCenter="0"
  verticalCenter="1"
  width="100%">
        

那么我们在什么地方将这个样式应用呢？我们可以用以下几个方式：
1、
Button {
     skinClass: Cla***eference("com.rianote.flex.skin.KButton");
}
2、
3、myButton.setStyle( "skinClass", Class( KButton ));

其中skinClass也是Flex SDK 4(Gumbo)里面新增加的一个class，其作用就是设定当前这个组件的Skin。

让我们看一下主程序：

 xmlns:fx=" http://ns.adobe.com/mxml/2009"
 height="254" width="576"
 backgroundColor="#222222" >
 
     import com.rianote.flex.skin.Button;
  ]]>
 
 

由于本例描述的内容比较简单，我就不上传source了，下一节我将详细描述一下KButton里面描述的内容。：）