Flex_4组自定义外观.ppt

（3）在新创建的mySkin.mxml文件中，以s:SparkSkin为根标签，标签中显示的代码是Spark按钮组件的默认外观定义，如图13.14所示。 在组件的外观定义中，必须继承SparkSkin或Skin类，即使用s:SparkSkin或s:Skin标签作为根标签，在标签中添加命名空间，如下所示： s:SparkSkin xmlns:fx=/mxml/2009 xmlns:s=library:///flex/spark xmlns:fb=/flashbuilder/2009 minWidth=21 minHeight=21 alpha.disabled=0.5 在s:SparkSkin标签内容中使用“[HostComponent]”元数据标签指定主机组件，如修改Button组件的外观，使用如下代码： fx:Metadata ![CDATA[ [HostComponent(ponents.Button)] ]] /fx:Metadata 使用s:states标签定义组件的各个状态，例如按钮组件的四种状态如下所示： s:states s:State name=up / s:State name=over / s:State name=down / s:State name=disabled / /s:states 以下是填充按钮背景的代码： s:Rect id=fill left=1 right=1 top=1 bottom=1 radiusX=2 s:fill s:LinearGradient rotation=90 s:GradientEntry color=0xFFFFFF color.over=0xBBBDBD color.down=0xAAAAAA alpha=0.85 / s:GradientEntry color=0xD8D8D8 color.over=0x9FA0A1 color.down=0x929496 alpha=0.85 / /s:LinearGradient /s:fill /s:Rect 设置文本的输入，本例使用Label组件指定按钮中文字的样式，如下所示： ? s:Label id=labelDisplay textAlign=center verticalAlign=middle maxDisplayedLines=1 horizontalCenter=0 verticalCenter=1 left=10 right=10 top=2 bottom=2 /s:Label 以上的所有代码构成了Spark包中Button组件的默认外观，如图13.15所示。如果要为按钮创建自定义的皮肤，则修改s:SparkSkin标签中的代码即可。例如，要使按钮实现如图13.16所示的效果，可以使用代码。 Flex 4中提供新的在按钮中嵌入图片的方法，即在自定义皮肤中使用图片填充按钮。在以上代码中添加如下代码即可实现： !-- 嵌入图片 -- s:Rect left=0 right=0 top=0 bottom=0 radiusX=0 radiusY=0 alpha=1 height=100 width=100 s:fill s:BitmapFill source=@Embed(../image/image.jpg)/ /s:fill /s:Rect 其中，BitmapFill组件用于使用位图填充某个区域，效果如图所示。 1．使用skinClass属性应用皮肤 Flex 4中的Spark可视化组件可以使用skinClass属性应用已经定义的皮肤，使用时只要将该属性值设为自定义皮肤的名称即可。例如，应用之前自定义的mySkin皮肤组件到一个按钮中，使用如下代码： s:Application xmlns:fx=/mxml/2009 xmlns:s=library:///flex/spark xmlns:mx=library:///fl