flex4自定义皮肤详解.docxVIP

(原创)flex4自定义皮肤详解2010年01月14日 星期四 14:53在Flex4新增加了一个包：spark.skins，这个包里面只有一个类：SparkSkin，而我们（非美工的程序员）通过这个class来实现任意自定义控件的样式。通过上述关系可以得出如下的结论：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，然后在其中加入一些想要的内容即可，请看以下代码： ?xml version=1.0 encoding=utf-8?s:SparkSkinxmlns:s=library:///flex/spark xmlns:fx=/mxml/2009s:statess:State name=up/s:State name=over/s:State name=down/s:State name=disabled//s:statesfx:Metadata[HostComponent(ponents.Button)]/fx:Metadatas:Ellipse width=100% height=100%s:fills:SolidColor color=#FFFF00“ color.over=#00FF00 color.down=#FF0000//s:fills:strokes:SolidColorStroke color=0x00FFFF //s:stroke/s:Ellipses: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(cn.xuedi.SelfButton);??? }2、myButton.setStyle( skinClass, Class(cn.xuedi.SelfButton));3、Button skinClass=cn.xuedi.SelfButton /其中skinClass也是Flex4里面新增加的一个类，其作用就是设定当前这个组件的Skin。主程序：?xml version=1.0 encoding=UTF-8?s:Applicationxmlns:s=library:///flex/sparkxmlns:fx=/mxml/2009height=254 width=576 backgroundColor=#222222 fx:Script![CDATA[import com.rianote.flex.skin.Button;]]/fx:Scripts:Button x=54 y=56 skinClass=com.rianote.flex.skin.Button height=32 width=77 label=Button//s:Application-----------------------------------------------------------------------------------------以上代码解释：1、s:SparkSkin?? xmlns:s=library:///flex/spark ?? xmlns:fx=/mxml/2009/s:SparkSkin含义：如果要自定义控件样式，必须要要继承SparkSkin或者Skin。2、fx:Metadata[HostComponent(ponents.Button)]/fx:Metadata含义：我们要修改的是ponents.Button的外形，Flex4新增了一个matadata tag：HostComponent同时，Metadata也由原来的mx:变成了现在的fx，因为名称空间发生了改变。