flex4皮肤,Flex 4皮肤 二
1.SparkSkin介绍
(1)spark.skins，这个包里面只有一个class：SparkSkin，非美工的程序员可以通过这个class来实现任意自定义控件的样式。 (2)SparkSkin是一个Group类型的容器。（它继承自Group） (3)全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类 (4)SparkSkin：是全部Spark Class的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。 Skin：是SparkSkin的父类，例如ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的样式，则需要使用Skin。 综上所述，也就是可以使用SparkSkin的地方，我们使用Skin一样可以达到同样的效果。2.SparkSkin示例 在Flex SDK 4(Gumbo)中，我们只需要将这个button的样式继承与SparkSkin或者Skin，然后在其中加入一些我想要的内容即可，请看以下的代码：<?xml version="1.0" encoding="utf-8"?><s:SparkSkin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata> <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> <s:RichText id="labelElement" fontFamily="Myriad Pro" fontSize="11" color="0xBBBBBB" textAlign="center" horizontalCenter="0" verticalCenter="1" width="100%"> </s:RichText></s:SparkSkin>我们可以用以下几个方式：(1) Button { skinClass: ClassReference("com.rianote.flex.skin.KButton"); }(2)<Button skinClass="com.rianote.flex.skin.KButton" />(3)myButton.setStyle( "skinClass", Class( KButton ));其中skinClass也是Flex SDK 4(Gumbo)里面新增加的一个class，其作用就是设定当前这个组件的Skin。主程序：<?xml version='1.0' encoding='UTF-8'?><s:Application xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" height="254" width="576"> <fx:Script> <![CDATA[ import com.rianote.flex.skin.Button; ]]> </fx:Script> <s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/></s:Application>3.SparkSkin示例解释 自定义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)可以通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。4.halo包使用定义的皮肤看以下的代码：<fx:Style> .sparkButtonStyle { skin: ClassReference("com.rianote.flex.skin.KButton"); }</fx:Style><mx:Button label="我是halo组件" styleName="sparkButtonStyle"/>再让我们对比一下spark组件的写法：<fx:Style>Button { skinClass: ClassReference("com.rianote.flex.skin.KButton"); }</fx:Style><s:Button label="我是spark组件" skinClass="com.rianote.flex.skin.KButton" />
延伸阅读
最新评论