[译] Flex 4 皮肤功能介绍
英文原文: http://www.adobe.com/devnet/flex/articles/flex4_skinning.html
本文翻译原创链接: http://www.smithfox.com/?e=34 转载请注明
翻译: smithfox
Flex 4(代号:Gumbo)的主要主题之一是"Design in mind", 皮肤则是这个主题的重要组成部分。Flash Player是迄今为止最具创意的web工作机制。然而，Flex应用程序却有了一个不太好的名声:大部分程序看上去都很相似，那是因为许多开发人员选择 了Flex默认的外观和体验(比如Halo)而不是应用丰富的样式和皮肤。
Flex 4中可以更容易地完全改变应用程序的外观和体验。新的皮肤架构建立在Flex 4的一些架构改动以及逻辑和组件视觉元素的清晰分离。正因为如此，在Flex 4的组件没有包含任何有关他们的视觉外观的信息。所有这些信息包含在皮肤文件中，这要感谢FXG和新的states语法，使新的皮肤文件完全可以用 MXML编写，这样它们就更容易阅读和编写，同时也更易于工具访问。
在这篇文章中，您将了解在Flex 4对皮肤架构的改进。 通过编写一个按钮的基本皮肤，你会学到一点关于FXG和新states的语法。 接下来，您将通过制作一个slider皮肤的过程了解怎么用契约在组件和皮肤进行交互。 最后，您将通过创建一个新组件的皮肤来深入学习可变换皮肤的组件。
注：在本文档中，Halo组件是指Flex 3已经有的组件。 Spark组件指的是在Flex 4中一套新组件。
编写一个简单的按钮皮肤
FXG是利用Flash Player作矢量图形的声明标记语言。 用他你可以很容易地创建一个自定义按钮。 这个按钮，只是简单地一个矩形里面放些文字（见图1）。
Sample1.mxml
01 |
<? xml version = "1.0" encoding = "utf-8" ?> |
02 |
< s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009 " |
03 |
xmlns:s = "library://ns.adobe.com/flex/spark " > |
04 |
< s:Group verticalCenter = "0" horizontalCenter = "0" > |
05 |
< s:Rect id = "rect" radiusX = "4" radiusY = "4" top = "0" |
06 |
right = "0" bottom = "0" left = "0" > |
07 |
< s:fill > |
08 |
< s:SolidColor color = "0x77CC22" /> |
09 |
</ s:fill > |
10 |
< s:stroke > |
11 |
< s:SolidColorStroke color = "0x131313" weight = "2" /> |
12 |
</ s:stroke > |
13 |
</ s:Rect > |
14 |
|
15 |
< s:Label text = "Button!" color = "0x131313" |
16 |
textAlign = "center" verticalAlign = "middle" |
17 |
horizontalCenter = "0" verticalCenter = "1" |
18 |
left = "12" right = "12" top = "6" bottom = "6" |
19 |
/> |
20 |
</ s:Group > |
21 |
</ s:Application > |
图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
01 |
<? xml version = "1.0" encoding = "utf-8" ?> |
02 |
< s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009 " xmlns:s = "library://ns.adobe.com/flex/spark " alpha.disabled = ".5" > |
03 |
|
04 |
<!-- states --> |
05 |
< s:states > |
06 |
< s:State name = "up" /> |
07 |
< s:State name = "over" /> |
08 |
< s:State name = "down" /> |
09 |
< s:State name = "disabled" /> |
10 |
</ s:states > |
11 |
|
12 |
<!-- border and fill --> |
13 |
< s:Rect id = "rect" radiusX = "4" radiusY = "4" top = "0" right = "0" bottom = "0" left = "0" > |
14 |
< s:fill > |
15 |
< s:SolidColor color = "0x77CC22" /> |
16 |
</ s:fill > |
17 |
< s:stroke > |
18 |
< s:SolidColorStroke color = "0x131313" weight = "2" /> |
19 |
</ s:stroke > |
20 |
</ s:Rect > |
21 |
|
22 |
<!-- text --> |
23 |
< s:Label text = "Button!" color = "0x131313" |
24 |
textAlign = "center" verticalAlign = "middle" |
25 |
horizontalCenter = "0" verticalCenter = "1" |
26 |
left = "12" right = "12" top = "6" bottom = "6" |
27 |
/> |
28 |
</ s:Skin > |
你会发现还多了一些states。 我将稍后讨论这个。
皮肤文件完成后，你需要将它关联到一个按钮组件。 Spark架构中，每一个可变换皮肤组件是通过skinClass CSS样式来和皮肤关联起来，这个CSS样式可以用样式表设置或者直接写在MXML内。 当前例子中，稍后再使用：
Sample2.mxml
1 |
<? xml version = "1.0" encoding = "utf-8" ?> |
2 |
< s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009 " xmlns:s = "library://ns.adobe.com/flex/spark " > |
3 |
< s:Button verticalCenter = "0" horizontalCenter = "0" skinClass = "ButtonSkin1" |
4 |
click = "trace('I\'ve been clicked!')" focusIn = "trace('focus...on me?')" /> |
5 |
</ s:Application > |
图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
01 |
<? xml version = "1.0" encoding = "utf-8" ?> |
02 |
< s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009 " |
03 |
xmlns:s = "library://ns.adobe.com/flex/spark " alpha.disabled = ".5" > |
04 |
|
05 |
<!-- states --> |
06 |
< s:states > |
07 |
< s:State name = "up" /> |
08 |
< s:State name = "over" /> |
09 |
< s:State name = "down" /> |
10 |
< s:State name = "disabled" /> |
11 |
</ s:states > |
12 |
|
13 |
<!-- dropshadow for the down state only --> |
14 |
< s:Rect radiusX = "4" radiusY = "4" top = "0" right = "0" bottom = "0" |
15 |
left = "0" includeIn = "down" > |
16 |
< s:fill > |
17 |
< s:SolidColor color = "0" /> |
18 |
</ s:fill > |
19 |
< s:filters > |
20 |
< s:DropShadowFilter knockout = "true" blurX = "5" blurY = "5" |
21 |
alpha = "0.32" distance = "2" /> |
22 |
</ s:filters > |
23 |
</ s:Rect > |
24 |
|
25 |
<!-- border and fill --> |
26 |
< s:Rect id = "rect" radiusX = "4" radiusY = "4" top = "0" right = "0" |
27 |
bottom = "0" left = "0" > |
28 |
< s:fill > |
29 |
< s:SolidColor color = "0x77CC22" color.over = "0x92D64E" |
30 |
color.down = "0x67A41D" /> |
31 |
</ s:fill > |
32 |
< s:stroke > |
33 |
< s:SolidColorStroke color = "0x131313" weight = "2" /> |
34 |
</ s:stroke > |
35 |
</ s:Rect > |
36 |
|
37 |
<!-- highlight on top --> |
38 |
< s:Rect radiusX = "4" radiusY = "4" top = "2" right = "2" left = "2" |
39 |
height = "50%" > |
40 |
< s:fill > |
41 |
< s:LinearGradient rotation = "90" > |
42 |
< s:GradientEntry color = "0xFFFFFF" alpha = ".5" /> |
43 |
< s:GradientEntry color = "0xFFFFFF" alpha = ".1" /> |
44 |
</ s:LinearGradient > |
45 |
</ s:fill > |
46 |
</ s:Rect > |
47 |
|
48 |
<!-- text --> |
49 |
< s:Label text = "Button!" color = "0x131313" |
50 |
textAlign = "center" |
51 |
verticalAlign = "middle" |
52 |
horizontalCenter = "0" verticalCenter = "1" |
53 |
left = "12" right = "12" top = "6" bottom = "6" |
54 |
/> |
55 |
</ s:Skin > |
ButtonSkin2.mxml<h4>ButtonSkin2.mxml</h4>
图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:
01 |
<? xml version = "1.0" encoding = "utf-8" ?> |
02 |
< s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009 " |
03 |
xmlns:s = "library://ns.adobe.com/flex/spark " alpha.disabled = ".5" > |
04 |
|
05 |
< fx:Metadata > |
06 |
[HostComponent("spark.components.Button")] |
07 |
</ fx:Metadata > |
08 |
|
09 |
... |
10 |
|
11 |
<!-- text --> |
12 |
< s:Label text = "{hostComponent.label}" color = "0x131313" |
13 |
textAlign = "center" |
14 |
verticalAlign = "middle" |
15 |
horizontalCenter = "0" verticalCenter = "1" |
16 |
left = "12" right = "12" top = "6" bottom = "6" |
17 |
/> |
18 |
</ s:Skin > |
当声明按钮后, 皮肤中的文字会显示label属性值.
Sample4.mxml:
01 |
<? xml version = "1.0" encoding = "utf-8" ?> |
02 |
< s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009 " |
03 |
xmlns:s = "library://ns.adobe.com/flex/spark " > |
04 |
|
05 |
< fx:Style > |
06 |
@namespace s "library://ns.adobe.com/flex/spark "; |
07 |
s|Button { |
08 |
skinClass: ClassReference("ButtonSkin3"); |
09 |
} |
10 |
</ fx:Style > |
11 |
|
12 |
< s:layout > |
13 |
< s:VerticalLayout /> |
14 |
</ s:layout > |
15 |
< s:Button label = "Button #1" /> |
16 |
< s:Button label = "Button #2" /> |
17 |
< s:Button label = "Button #3" /> |
18 |
</ s:Application > |
主应用程序声明了三个按钮。 每个按钮都使用相同的皮肤文件ButtonSkin3，这是由CSS类型选择器定义的。但是，每个按钮都有不同的标签。 因为现在的皮肤拉(pulls)组件的label属性来显示文本，按钮看起来像你期盼的那样，显示不同的文字（见图5）。
图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:
01 |
<? xml version = "1.0" encoding = "utf-8" ?> |
02 |
< s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009 " |
03 |
xmlns:s = "library://ns.adobe.com/flex/spark " alpha.disabled = ".5" > |
04 |
0
顶
1
踩
分享到：
发表评论
smithfox
最新评论
|
评论