[译] Flex 四 皮肤功能介绍

[译] Flex 4 皮肤功能介绍

图1: sample1 按钮

如果你熟悉Flex 3，你一定熟悉上面的语法，虽然你可能不熟悉所使用的有些特别的组件。 Goup容器是Spark中基本的没有样式的容器。 Rect是一个新的FXG图元，没错，一个矩形。 在文档中的最后标签Lable是Spark中的新的文本组件。 读MXML时就像在描述一个组件，它是一个用1像素深灰色画出圆角的长方形，中间是一些绿色的文字。
FXG好处之一是，它不仅是让我们更容易理解绘画语句，而且因为FXG使用XML结构所以使得他可以用工具创作。 如需有关FXG信息，请参阅FXG规范 。

转换你的按钮图形为一个按钮皮肤

到目前为止，MXML文件还只是一个不能交互的静态的作品。 它还没采取Flex 4新的皮肤功能。 为此，你需要把它应用到Button组件并使用它作为一个皮肤。 要创建Spark皮肤文件，用Skin作为新的MXML文件的根标签。 然后，将上面的图形代码copy过来：?
ButtonSkin1.mxml

图2: sample2 按钮

现在，您已经将一个新的皮肤文件应用到这个按钮了。 按钮组件包含所有按钮的行为逻辑。 它添加事件监听器，发送新的事件，指示组件所处state，等等。 皮肤无需处理组件中定义的所有可视元素。
但是，这个按钮现在看起来和之前创建的静态图形没有什么不同。 按钮应该是互动的，但还不是这样。这是因为你还没有定义在不同states下的按钮外观。?

介绍皮肤契约(contract)

一个静态的皮肤很无聊。 为了有点趣，皮肤必须能与组件交互，反之亦然。 这两个因素通过皮肤契约进行交互。 有三个要点是：皮肤states，data和parts（见图3）。 一方面，组件定义了这三种不同要点，另一方面，皮肤则处理这三个要点。

图3: 皮肤契约包含 data, parts, 和 states.?

定义皮肤states

在Spark中的每个可变换皮肤组件都有一组皮肤states。 你可以依据组件所处皮肤state来改变你的皮肤外观。对于一个按钮有四种基本皮肤states: up,over,down和disabled。 您可以为这些皮肤状态定义不同的外观（见图4）。
ButtonSkin2.mxml?

图4. 按钮的四个皮肤states

不同皮肤状态，组件看起来不同是因为你皮肤定义的不同。 这个皮肤文件采用了新的states语法。 这是Flex 4新功能，这使得编写state更加清晰和简洁。 语法是property.stateName="property所处状态的值值"。 例如， alpha.disabled=".5"是指当按钮进入disabled皮肤state，皮肤会改变alpha为50%。over和down状态，我定义了不同的填充色，color.over="0x92D64E" color.down="0x67A41D"。
新的state语法为MXML组件增加了includeIn和excludeFrom属性。 按钮阴影皮肤仅包含在down state，这使按钮按下时很好看。此外，为了更加地生动，所有states下我都添加了另一个矩形使按钮顶部突出。
注：更多Flex 4中语法增强信息，请查看 新的states语法规范。

基于皮肤state而改变按钮外观，使得操作按钮有一种交互的体验。但你会发现，该按钮组件的文本是硬编码为"Button!"。 在下一节中，你将看到皮肤如何显示组件的数据，当前例子中，数据就是label属性。

从组件获取数据

我建议你总是把HostComponent元数据声明在你的皮肤。HostComponent元数据指向你皮肤的组件，通过它可以在皮肤中访问组件。在按钮皮肤，你可以使用这个hostComponent属性绑定到按钮label属性。?
ButtonSkin3.mxml:

图5: 按钮显示他自己的文字?

你已经看到了皮肤契约三个要点中的两个，states和data。 皮肤state是一种组件进行交互的方式，而皮肤则定义了这些states的外观和体验。数据，这些用户可设置的组件属性，通过使用HostComponent元数据和hostComponent属性能被拉到(原文:can be pulled into)皮肤中。 在上面的例子，皮肤从按钮组件中拉数据(按钮组件的label属性)。另一种方法是用皮肤parts(第三个要点)将数据推(push)到皮肤中。

继续谈皮肤契约: 皮肤parts

皮肤parts是皮肤契约的第三部分。在Spark中，每个可变换皮肤的组件都有一组皮肤parts用来帮助定义组件。 以scrollbar为例，有四个皮肤parts：增加按钮，减少按钮，轨迹带和滚动条。 再以按钮为例，他仅有一个皮肤parts，labelDisplay。这是按钮组件要求提供的一部分。在上面的按钮皮肤例子中，与其绑定文本为{hostComponent.label} ，还不如你提供一个文本组件的id labelDisplay，按钮会识别这个皮肤part，从面将label属性推送到皮肤中。
ButtonSkin4.mxml:

view sourceprint?01<?xml version="1.0" encoding="utf-8"?>02<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"03xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">04?

查看更多 下一篇