Spark 皮肤是 Flex 4 中的一个新特性。spark.skins 包包含在 Spark 名称空间中,并且已在Adobe 的 Flex 4 LiveDocs 中说明:“自定义 Spark 皮肤为 MXML 文件,定义组成 Spark 组件皮肤的逻辑、图形元素和其他对象”。那么这对于您意味着什么呢?我希望这篇文章能为您解答这个问题。
请注意:本示例是使用 Flex 4 SDK 构建版本(nightly build)4.0.0.8702 开发的,可在此处找到该版本。
我曾经想过在示例中为一个类似于 Spark DropDownList 的组件添加皮肤,后来决定使用一个容易理解的组件,所以我选择了 Spark 按钮。这个按钮非常简单,使用起来很容易上手,但它仍然是交互式的,我们可以看到用户交互的结果。了解这一点之后,我们开始动手制作。
需要做的第一件事是创建一个基于 spark.components.supportClasses.Skin 的新 MXML 组件,将其命名为 myButtonSkin。我在我的 com.fincanon.skins 包中创建了这个组件,显然您也可以在合适的包中创建它。另外,出于个人爱好,我删除了默认的 400x300 的尺寸。我们将把 Layout 选项设置保留为默认值 spark.layouts.BasicLayout。
新 MXML 组件
生成的皮肤“shell”简单地建立了 ff:、s: 和 mx: 名称空间,并且将布局设置为 BasicLayout。关于这些名称空间的更多信息,请在 Adobe Developer Connection 上阅读文章 Flex 3 与 Flex 4 beta 之间的差异。新的 Spark 皮肤 shell:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Skin>
现在我们有了一个空 shell,我们需要填充它,分别使用 <fx:Metadata> 标记和 <s:states>标记定义主机组件和状态。当定义主机组件时,可以从皮肤中访问该主机组件中包含的公开属性和样式。因为我们要在此处为一个按钮添加皮肤,所以您应该不会奇怪,主机组件也需要是一个按钮(您可能已经猜到了)。定义主机组件和皮肤状态:
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<mx:State name="up"/>
<mx:State name="down"/>
<mx:State name="over"/>
<mx:State name="disabled"/>
</s:states>
现在,我们开始向皮肤添加一些可视元素。如果按钮具有投影是不是比较美观呢?如果投影能够根据当前状态改变是不是更好呢?我们将更改 over 状态中的 alpha、distance、blurX 和 blurY 值,同时将 down 状态中的整个投影更改为内部阴影。从以下代码可以看出,可以更改每个状态的属性,只需将状态名称添加到所关注的属性中即可。例如,所有状态的投影的 alpha 属性都设置为 0.5。但是,通过添加 alpha.over="0.3",我们可以更改单个状态的属性。
添加投影:
<s:filters>
<s:DropShadowFilter quality="3"
alpha="0.5" alpha.over="0.3"
distance="5" distance.over="15"
blurX.over="15" blurY.over="15"
inner.down="true"/>
</s:filters>
接下来,填充皮肤的背景。我将使用带有细微圆角的渐变绿色背景,但是您可以随意使用任何样式的背景。为了创建背景,我们将使用包含一个 Spark fill 和一个 Halo LinearGradient 的 Spark Rect 组件。我们混合并匹配 mx: 名称空间(Halo)与 s: 名称空间(Spark)。为什么这样做呢?因为我们可以这样做。
为背景使用一个 Spark Rect:
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
我们快速查看一下背景代码。首先可以看到左侧、右侧、顶部和底部样式都设置为 0。这告诉背景 Rect,它需要拉伸到按钮的所有 4 边。Rect 中接下来是 radiusX 和 radiusY(您可能已经知道这两项就是以前的 cornerRadius)。我在此处将它们都设置为 5,但是在此示例末尾,我将展示对它们的两种不同操作方法。
Rect 内部是 Spark fill,Spark fill 中包含 Halo LinearGradient。为了使颜色按我们希望的方向渐变,我们将 rotation 属性设置为 90(默认值为 0,表示从左到右渐变)。LinearGradient 内部是 entries 属性,它是一个 GradientEntry 类数组。GradientEntry 的 color 属性是将在 LinearGradient 中的该点设置的颜色;ratio 属性是一个百分比(从 0.0 到 0.1),表示渐变到此颜色的起始百分比。您将注意到,我们更改了中间的 GradientEntry 的 over 状态中的 ratio(ratio.over="0.25"),对阴影的 alpha 属性也进行过这样的操作。
最后,我们添加按钮的标签。这一步非常简单,因为我们所需做的只是使用一个 Spark SimpleText 控件并设置两个属性和样式。在此示例中真正需要修改的地方是 id,它必须为 "labelDisplay",因为这是 Spark Button 在尝试定位其标签时将要查找的名称。本例中使用的其他属性和样式用于设置标签的颜色和位置,以及标签的边框。要使加宽或增高按钮,可以更改左侧、右侧、顶部和底部样式。
添加标签:
<s:SimpleText id="labelDisplay" color="#ffffff"
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="5" bottom="5"/>
现在,要为应用程序中的按钮添加皮肤,只需将该按钮的 skinClass 指向自定义皮肤即可。定义按钮的 skinClass:
<s:Button label="Spark Skins!" skinClass="com.fincanon.skins.myButtonSkin"/>
最后,我们看一下所有代码,以及生成的按钮(位于代码下方)。
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<mx:State name="up"/>
<mx:State name="down"/>
<mx:State name="over"/>
<mx:State name="disabled"/>
</s:states>
<s:filters>
<s:DropShadowFilter quality="3"
alpha="0.5" alpha.over="0.3"
distance="5" distance.over="15"
blurX.over="15" blurY.over="15"
inner.down="true"/>
</s:filters>
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
<s:SimpleText id="labelDisplay" color="#ffffff"
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="5" bottom="5"/>
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Skin>
添加了皮肤的新按钮:
现在快速对 radiusX 和 radiusY 执行以下操作(如前面所述)。首先,看一下将它们都设置为负数时会发生什么:将 radiusX 和 radiusY 更改为 -10
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="-10" radiusY="-10">
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
负 radiusX 和 radiusY 值:
接下来,将 radiusX 设置为正数,将 radiusY 设置为负数:
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="20" radiusY="-10">
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
正 radiusX 值和负 radiusY 值:
最后,交换一下,也就是将 radiusX 设置为负数,将 radiusY 设置为正数:
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="-10" radiusY="20">
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
负 radiusX 值和正 radiusY 值:
这篇文章到此就结束了。您可以随意使用 Flex 4 中各种不同的 Spark 皮肤。不断试验并从中获得乐趣,最终您会得到期望的结果。我打算写一篇关于向皮肤添加渐变颜色的后续文章,您同时也可以在 Adobe LiveDocs 中找到它。
本文来自:http://www.insideria.com/2009/07/getting-started-with-spark-ski.html