通过上述关系可以得出如下的结论:
1、SparkSkin是一个Group类型的容器。(它继承与Group)
2、是全部Spark类的基础类,也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类)
注意Skin,这个类是SparkSkin的父类,同时Skin继承与Group。
Skin:
是SparkSkin的父类,例如ButtonBarSkin就是Skin的子类,如果想要自定义这部分组件的样式,则需要使用Skin。
SparkSkin:
是全部Spark类的基础类,也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。
综上所述,用SparkSkin和Skin都可达到同样的效果。
在Flex4中,我们只需要将这个button的样式继承与SparkSkin或者Skin,然后在其中加入一些想要的内容即可,请看以下代码:
xmlns:fx="http://ns.adobe.com/mxml/2009">
fontSize="11"
color="0xBBBBBB"
textAlign="center"
horizontalCenter="0"
verticalCenter="1"
width="100%">
我们可以用以下几个方式将这个样式应用:
1、
Button{
skinClass: ClassReference("cn.xuedi.SelfButton");
}
2、myButton.setStyle( "skinClass", Class(cn.xuedi.SelfButton));
3、
其中skinClass也是Flex4里面新增加的一个类,其作用就是设定当前这个组件的Skin。
主程序:
height="254" width="576"
backgroundColor="#222222" >
import com.rianote.flex.skin.Button;
]]>
-----------------------------------------------------------------------------------------
以上代码解释:
1、
xmlns:fx="http://ns.adobe.com/mxml/2009">
含义:
如果要自定义控件样式,必须要要继承SparkSkin或者Skin。
2、
含义:
我们要修改的是spark.components.Button的外形,Flex4新增了一个matadata tag:HostComponent
同时,Metadata也由原来的mx:变成了现在的fx,因为名称空间发生了改变。
3、
含义:
定义了Button的四种状态:up、down、over、disabled。这是Flex4新增的一种功能,用State来描述状态。
在Flex3的情况下,只能描述UI的不同状态,而在Flex4中,又赋予了State描述控件状态的功能。
4、
含义:
画一个圆形(椭圆形)的图形,而Ellipse也是Flex4新增一个包:spark.primitives里面的一个类。
spark.primitives里面定义了一些图形,例如:Ellipse、Rect、Path、Line等类。同样根据这些类名就可以得出是做什么用的。
5、
含义:
设定填充的方式(SolidColor)填充颜色值FFFF00的颜色,color.over是指鼠标移动上去后的颜色,color.down是鼠标按下时候的颜色。
引申一下,还有color.up、color.display,通过这些值就可以描述四种状态时的颜色。
注意:SolidColor外层必须要有
6、
含义:
设定边线的颜色(SolidColorStroke)当然也可以设定诸如:color.up、color.display、color.down、color.over的颜色。
同样SolidColorStroke必须在stroke内部,而stroke的含义:设定边框。
7、我们在重新看一下这些代码的意义:
含义:
定义一个圆形(因为宽和高相等)然后填充一个0xFFFF00的颜色,并且设定鼠标移上、按下时的颜色值(color.over="#00FF00" color.down="#FF0000")
然后在定义一个边框,设定颜色为0x0c0d0d。
8、
fontSize="11"
color="0xBBBBBB"
textAlign="center"
horizontalCenter="0"
verticalCenter="1"
width="100%">
含义:
上面的代码定义了Button中可以显示文字的部分。注意,id必须设定为labelElement,否则出错。其他的样式可以自行设定了。
主程序:
我们要注意的地方:skinClass,这也是Flex4新增加的一个类,专门用来设定当前皮肤的properties,请注意skinClass只适用于Spark包里面的可视化控件。
以上就是通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。