[Flex]Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(二)

上一篇文章介绍了在Flex SDK 4(Gumbo)如何通过代码来设定样式,本篇文章详细说明一下这些代码的含义。

由于上一篇文章已经给出代码,因此在本篇文章中就不再重复了。

自定义Button的mxml的代码解释:

1、
<s:SparkSkin 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:fx="http://ns.adobe.com/mxml/2009">
</s:SparkSkin>
含义:
如果要自定义控件样式,必须要要继承SparkSkin或者Skin,关于二者的区别我在上一篇文章中已经叙述了。

2、
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
含义:
我们要修改的是spark.components.Button的外形,Flex SDK 4(Gumbo)新增了一个matadata tag:HostComponent
同时,Metadata也由原来的mx:变成了现在的fx,因为namespace发生了改变。

3、
<s:states>
      <s:State name="up"/>
      <s:State name="over"/>
      <s:State name="down"/>
      <s:State name="disabled"/>
</s:states>
含义:
定义了Button的四种状态:up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能,用State来描述状态。
在Flex SDK 3的情况下,只能描述UI的不同状态,而在Flex SDK 4(Gumbo)中,又赋予了State描述控件状态的功能。

4、
<s:Ellipse width="100%" height="100%">
</s:Ellipse>
含义:
画一个圆形(椭圆形)的图形,而Ellipse也是Flex SDK 4(Gumbo)新增一个包:spark.primitives里面的一个class。
spark.primitives里面定义了一些图形,例如:Ellipse、Rect、Path、Line等class。同样根据这些class name就可以得出是做什么用的。

5、
<s:fill>
      <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
</s:fill>
含义:
设定填充的方式(SolidColor)填充颜色值0x131313的颜色,color.over是指鼠标移动上去后的颜色,color.down是鼠标按下时候的颜色。
引申一下,还有color.up、color.display,通过这些值就可以描述四种状态时的颜色。
另外,请注意一下,SolidColor外层必须要有<s:fill>否则会出现错误。而fill的含义是:填充。

6、
<s:stroke>
      <s:SolidColorStroke color="0x0c0d0d" />
</s:stroke>
含义:
设定边线的颜色(SolidColorStroke)当然也可以设定诸如:color.up、color.display、color.down、color.over的颜色。
同样SolidColorStroke必须在stroke内部,而stroke的含义:设定边框。

7、我们在重新看一下这些代码的意义:
<s:Ellipse width="100%" height="100%">
      <s:fill>
            <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
      </s:fill>
      <s:stroke>
            <s:SolidColorStroke color="0x0c0d0d" />
      </s:stroke>
</s:Ellipse>
含义:
定义一个圆形(因为宽和高相等)然后填充一个0x131313的颜色,并且设定鼠标移上、按下时的颜色值(color.over="#191919" color.down="#ffffff")
然后在定义一个边框,设定颜色为0x0c0d0d。

8、
<s:RichText id="labelElement" 
      fontFamily="Myriad Pro" 
      fontSize="11" 
      color="0xBBBBBB" 
      textAlign="center" 
      horizontalCenter="0" 
      verticalCenter="1" 
      width="100%">
</s:RichText>
含义:
上面的代码定义了Button中可以显示文字的部分。注意,id必须设定为labelElement,否则出错。其他的样式可以自行设定了。

主程序:
<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)可以通过继承SparkSkinSkinskinClass的方式很简单的实现自定义组件的皮肤。
希望对大家有所帮助:)