FLEX4 在Spark皮肤中定义与使用新的皮肤机制.docx.docxVIP

Flex 4 beta版Spark组件的一个主要优势来自于一种完全不同地皮肤机制，它为开发人员提供了对应用程序视觉上更强的控制。本教程将告诉你如何对可视化组件构建皮肤。任何使用这些皮肤的组件都内置了这种机制。为了说明这一点，我将通过PowerWindow来说明，它是利用了这些skin parts皮肤部件以及skin states皮肤状态和其它皮肤功能的一个自定义面板，以使用户可以通过按钮重新调整大小，最小化和最大化组件。要求这篇文章需要用到以下软件和文件：Flash Builder 4 beta /go/flashbuilder4_downloadDownload? /devnet/flex/articles/flashbuilder4_skin_parts/spark_skin_parts.zipspark_skin_parts.zip (ZIP, 51 KB)必备知识建议你要熟悉Flash Builder，MXML和 ActionScript的基础知识。关于作者Drew Falkman是一位RIA开发人员，是Santa Monica, CA的培训师。使用皮肤和skin partsSpark皮肤用于提高所应用组件的设计和布局。这些皮肤通常在MXML中创建，作为类被用于Flex中。在Flex 4之前，当你使用MX组件时（也称为Halo组件），只有一些简单地皮肤控制能力：你只能包装不同地图形或是在组件上基于API（Application Programming Interface）用编译后的SWF元素预定义一些皮肤样式。而新的Flex 4皮肤API实现一种重大的定制功能，包括：? 定义自定义样式? 用图像和预编译后的SWF元素? 用Flash绘图API定义自定义图形元素? 定义皮肤不同状态? 添加涉及父级组件编程功能? 添加skin parts或子组件Flex编程环境中新增的这些允许你利用皮肤大有作为。本质上讲皮肤可涉及到一个组件实例所有可视化方面的问题。在本教程中，我将涵盖最新处理方式：使用skin parts。内置皮肤部件Spark框架中许多组件已经内置了skin parts。你可以访问/en_US/Flex/4.0/langref/Flex 4 API documentation查看已存在的skin parts。Spark对象的顶部显示了支持的皮肤，可以点击链接到达Skin Parts部分（见图1）。/attachment.php?aid=MjI4MTJ8ZGVmOWYyMjZ8MTMzNTU3ODk1N3xjMGM0RDlUeFg1bTYxS3ZRUVpwL2RGb1RmZ0QrQmQ1Q2JpSmh0RnBEcFRNYVpobw%3D%3Dnothumb=yes图1 Button组件API文档的Skin Parts当你点击该链接时，你将在API页面SkinParts部分看到该组件中每个可用的skin parts的释义和对象继承链。注意在Button组件有一个名为labelDisplay的skin part（它继承自ButtonBase类）是TextBase类的实例（见图2），用来显示按钮标签。/attachment.php?aid=MjI4MTN8YzgxZDVhYjd8MTMzNTU3ODk1N3xjMGM0RDlUeFg1bTYxS3ZRUVpwL2RGb1RmZ0QrQmQ1Q2JpSmh0RnBEcFRNYVpobw%3D%3Dnothumb=yes图2 Spark Button类的Skin partsSkin parts的类型如果你看清楚了Spark Button类skin part的定义，你将会看到类型申明是静态的。每个skin part可以是static静态, dynamic动态, 或deferred延迟，skin part的类型与在皮肤中如何实例化它有关系。另外，每个skin part可能是必须的也可能是可选的。若组件的skin part是必须的，那么只要创建一个皮肤其skin part都应要存在。静态的skin part随着皮肤实例化。它们在整个皮肤周期永远是可访问的，并且任何静态part实例只有一个。以Button为例，labelDisplay 皮肤部件是静态的，你不能创建另一个名为labelDisplay的skin part，但你可以访问labelDisplay编程部分（例如改变其text属性）。动态的skin parts是在需要时被实例化，许多组件不需要。这些通常是特定组件有关皮肤不可或缺的工作。例如，Spark ButtonBar组件有三个动态皮肤部件：firstButton, lastButton, 和middleButton。这些动态的skin parts负责处理按钮条上每个按钮的皮肤，但