`
smithfox
  • 浏览: 56436 次
  • 性别: Icon_minigender_1
  • 来自: hf
社区版块
存档分类
最新评论

[译] Flex 4 皮肤功能介绍

FlexAdobeCSSXMLFlash 
阅读更多

英文原文: 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 >

The sample1 button

图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 >

The sample2 button

图2: sample2 按钮

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


介绍皮肤契约(contract)

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

The skinning contract comprises data, parts, and states.

图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>

<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）。

The buttons now display their own labels.

图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 source print ?
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
踩
分享到：
| Using MXML without Flex
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics