英文原文: 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"
?>
|
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"
>
|
08
|
<
s:SolidColor
color
=
"0x77CC22"
/>
|
11
|
<
s:SolidColorStroke
color
=
"0x131313"
weight
=
"2"
/>
|
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"
|
图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"
?>
|
06
|
<
s:State
name
=
"up"
/>
|
07
|
<
s:State
name
=
"over"
/>
|
08
|
<
s:State
name
=
"down"
/>
|
09
|
<
s:State
name
=
"disabled"
/>
|
13
|
<
s:Rect
id
=
"rect"
radiusX
=
"4"
radiusY
=
"4"
top
=
"0"
right
=
"0"
bottom
=
"0"
left
=
"0"
>
|
15
|
<
s:SolidColor
color
=
"0x77CC22"
/>
|
18
|
<
s:SolidColorStroke
color
=
"0x131313"
weight
=
"2"
/>
|
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"
|
你会发现还多了一些states。 我将稍后讨论这个。
皮肤文件完成后，你需要将它关联到一个按钮组件。 Spark架构中，每一个可变换皮肤组件是通过skinClass CSS样式来和皮肤关联起来，这个CSS样式可以用样式表设置或者直接写在MXML内。 当前例子中，稍后再使用：
Sample2.mxml
1
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
|
3
|
<
s:Button
verticalCenter
=
"0"
horizontalCenter
=
"0"
skinClass
=
"ButtonSkin1"
|
4
|
click
=
"trace('I\'ve been clicked!')"
focusIn
=
"trace('focus...on me?')"
/>
|
图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"
?>
|
07
|
<
s:State
name
=
"up"
/>
|
08
|
<
s:State
name
=
"over"
/>
|
09
|
<
s:State
name
=
"down"
/>
|
10
|
<
s:State
name
=
"disabled"
/>
|
14
|
<
s:Rect
radiusX
=
"4"
radiusY
=
"4"
top
=
"0"
right
=
"0"
bottom
=
"0"
|
15
|
left
=
"0"
includeIn
=
"down"
>
|
17
|
<
s:SolidColor
color
=
"0"
/>
|
20
|
<
s:DropShadowFilter
knockout
=
"true"
blurX
=
"5"
blurY
=
"5"
|
21
|
alpha
=
"0.32"
distance
=
"2"
/>
|
26
|
<
s:Rect
id
=
"rect"
radiusX
=
"4"
radiusY
=
"4"
top
=
"0"
right
=
"0"
|
27
|
bottom
=
"0"
left
=
"0"
>
|
29
|
<
s:SolidColor
color
=
"0x77CC22"
color.over
=
"0x92D64E"
|
30
|
color.down
=
"0x67A41D"
/>
|
33
|
<
s:SolidColorStroke
color
=
"0x131313"
weight
=
"2"
/>
|
38
|
<
s:Rect
radiusX
=
"4"
radiusY
=
"4"
top
=
"2"
right
=
"2"
left
=
"2"
|
41
|
<
s:LinearGradient
rotation
=
"90"
>
|
42
|
<
s:GradientEntry
color
=
"0xFFFFFF"
alpha
=
".5"
/>
|
43
|
<
s:GradientEntry
color
=
"0xFFFFFF"
alpha
=
".1"
/>
|
49
|
<
s:Label
text
=
"Button!"
color
=
"0x131313"
|
51
|
verticalAlign
=
"middle"
|
52
|
horizontalCenter
=
"0"
verticalCenter
=
"1"
|
53
|
left
=
"12"
right
=
"12"
top
=
"6"
bottom
=
"6"
|
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"
?>
|
06
|
[HostComponent("spark.components.Button")]
|
12
|
<
s:Label
text
=
"{hostComponent.label}"
color
=
"0x131313"
|
14
|
verticalAlign
=
"middle"
|
15
|
horizontalCenter
=
"0"
verticalCenter
=
"1"
|
16
|
left
=
"12"
right
=
"12"
top
=
"6"
bottom
=
"6"
|
当声明按钮后, 皮肤中的文字会显示label属性值.
Sample4.mxml:
01
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
|
08
|
skinClass: ClassReference("ButtonSkin3");
|
15
|
<
s:Button
label
=
"Button #1"
/>
|
16
|
<
s:Button
label
=
"Button #2"
/>
|
17
|
<
s:Button
label
=
"Button #3"
/>
|
主应用程序声明了三个按钮。 每个按钮都使用相同的皮肤文件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"
?>
|
04
|
分享到：
Global site tag (gtag.js) - Google Analytics
|
相关推荐
本文将深入探讨FLEX4中的皮肤系统，特别是SparkSkin类，并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍： SparkSkin是Flex 4（Gumbo）引入的主要皮肤类，位于`spark.skins`包下。它是一个Group类型...
Flex4 的皮肤系统是一个基于MXML和CSS的可扩展框架，允许开发者分离界面的视觉表现与功能逻辑。这套"flex4 皮肤"包含了解压后即可使用的皮肤主题，以及源代码，对于开发者来说，这是一个宝贵的资源，可以快速改变...
下面将详细介绍如何在Flex4中自定义组件皮肤。 1. **组件皮肤的基本概念** - 组件皮肤是Flex中改变组件外观的一种方式，通过定义不同的皮肤，可以改变组件的颜色、形状、边框等视觉元素。 - Flex4引入了Spark组件...
在Flex 4中，皮肤是界面组件外观的关键元素，可以自定义以满足特定设计需求。进度条是用户界面中常见的组件，用于表示任务的完成程度或加载状态。本文将深入探讨如何在Flex 4中创建和定制进度条的皮肤。 首先，我们...
FLEX 4超炫皮肤 FLEX 4超炫皮肤 FLEX 4超炫皮肤 FLEX 4超炫皮肤
在本文中，我们将深入探讨Flex的经典皮肤主题及其与CSS样式、皮肤的关系。 一、Flex概述 Flex是一种开源的开发框架，主要用于构建基于Flash Player或Adobe AIR运行时的应用程序。它提供了丰富的组件库，使开发者...
在Flex4中，皮肤（skin）是一种用于控制UI组件外观的设计模式，允许开发者和设计师定制组件的视觉表现，而不必触及组件的核心功能代码。这不仅提高了开发效率，还实现了设计与逻辑的分离，使得UI设计更加灵活且易于...
Flex是Adobe公司开发的一种用于构建富互联网应用（RIA）的框架，它允许开发者创建具有丰富图形界面和交互功能的应用程序。在Flex中，皮肤是一种重要的概念，它定义了UI组件的外观和感觉，使得开发者可以自定义应用的...
Flex皮肤是一种专为Adobe Flex应用程序设计的用户界面样式。...总之，Flex皮肤是Flex应用程序视觉设计的关键组成部分，通过理解和利用皮肤机制，开发者能够创造出具有吸引力且功能丰富的用户界面。
4. `flex_skins.swf`：这是一个SWF（ShockWave Flash）文件，它是Flex编译后的二进制文件，通常包含了一个或多个Flex组件的实现。这个SWF文件可能是预览或演示这三款皮肤的微型应用程序，让用户在实际应用前可以预览...
### Flex4 Spark皮肤详细制作讲解 #### 一、引言 在Flex4中，Adobe引入了新的皮肤系统，称为Spark Skin系统，旨在提供更高效、更灵活的UI设计能力。本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的...
在Flex4中，拖放（Drag and Drop，简称DnD）功能是一项强大的交互设计工具，它允许用户通过直观的拖动操作在界面上移动或转移数据。在本主题中，我们将深入探讨如何在Flex4中实现图片的拖放功能，包括两种模式：拖动...
flex皮肤 大集合 很齐全 对flex开发人员很有帮助
在Flex4中，皮肤定制是UI设计的重要组成部分，它允许开发者根据需求自定义组件的外观和交互效果。本主题主要围绕`SparkSkin`类和`Skin`类展开，这两类在Flex4的皮肤定制中扮演着核心角色。 **SparkSkin介绍** `...
Spark组件库提供了一套全新的UI组件，这些组件基于Flex 4的皮肤ning机制，允许开发者创建高度自定义的界面。 此外，Flex 4中的ActionScript 3.0有了显著增强，包括类的优化、访问修饰符的改进以及对ECMAScript for ...
在Flex4中，用户界面组件的外观可以通过自定义皮肤来大幅度改变，这使得开发者能够创建具有独特视觉风格的应用程序。本主题将深入探讨如何修改Flex4滚动条的皮肤，以改变Scroller组件的外观。 滚动条在用户界面中起...
Flex 4 中文教程主要面向没有基础的开发人员，通过深入浅出的方式介绍如何使用 Flex 4 构建动态、互动的 Web 应用。教程将详细介绍四种不同的架构方法，这些方法都是基于 Flex 与 BlazeDS 之间的数据通信，结合 ...
10. **部署和优化**：最后，教程还会介绍如何将Flex4应用打包并部署到不同的平台，以及优化应用性能的技巧，如减少内存占用、提升加载速度等。 在《Flex4教程 - Flex4从入门到精通》这本书中，你将系统地学习这些...
4. `src`：这是一个源代码目录，通常包含Flex应用的ActionScript代码和MXML组件。 5. `.settings`：这个目录可能包含了项目特定的IDE设置，如编码格式、编译器设置等。 总的来说，这个压缩包可能是一个Flex项目的...
6. **图形和皮肤**：Flex 4引入了新的图形和皮肤功能，允许更复杂的视觉表现。开发者可以通过更精细的控制来创建和编辑组件外观，从而实现更丰富的用户界面。 7. **数据绑定增强**：Flex 4的数据绑定机制进行了优化...