3

这可能更像是一个民意调查而不是一个问题，但这里有。我有一个相当复杂的 Flex 应用程序，它使用许多不同的组件。我希望应用程序能够自定义样式和/或蒙皮。我还想确保样式方法最有效地利用系统资源（内存、CPU、网络），并且不会对性能产生不利影响。

我们目前正在使用一种混合方法来设计应用程序的样式，该应用程序同时使用 CSS 和在 CS3 中创建的 Flash 皮肤。对我来说，对应用程序进行样式设计采用双管齐下的方法似乎很奇怪，并且理想情况下希望采用一种方法或另一种方法。有人可以概述使用纯 CSS 或 Flash 皮肤的优缺点吗？在同一个应用程序中使用两者是否有理由？

完全使用 CSS 似乎是有利的，因为任何对 CSS 的其他用途有基本了解的人都可以使用它，尤其是在使用 Flex 2 样式资源管理器时。另一方面，我知道我们使用的 CS3 皮肤为需要这些状态的每个组件声明了向上/过度/向下/禁用/按下皮肤，并且当每个状态被（停用）激活时，Flex 管理到适当皮肤的转换。然而，我的印象是，在 CS3 中创建 Flex 皮肤需要一些专门的技能和工具。

那么，如果性能、定制和高效的资源利用是优先考虑的事项，您会推荐什么来设置 Flex 应用程序的样式呢？

4

3 回答 3

4

首先，如果您还没有开始，我建议您使用 Flex 4。 Flex 4 即将发布。

借助 Flex 4，他们拥有了全新的蒙皮架构。这意味着您将永远不会再使用 Programmatic Skins。此外，它们还具有高级 CSS 选择器，因此您可以在 Flex 4 中使用 CSS 做更多事情。无论如何，程序化皮肤都很难动态化。最后，如果您尝试抽象出 Programmatic Skins 的逻辑，您最终将创建一个类似于 Flex 4 Spark Skins 的架构。

定制

我们为使 Flex 4 皮肤和样式尽可能动态化所做的工作如下：

  • 样式调色板：静态类或 XML 文件
  • 自定义皮肤
  • CSS

Style Palletes：这些是静态类，包含您在 CSS 或 Skins 中使用的所有变量。例如，您可以拥有一个ColorPalette包含所有颜色的：public static const ColorPalette.BRIGHT_RED:uint = 0xff0000;等。然后您可以通过绑定在 Flex 4 皮肤中使用这些，例如<mx:Button color="{ColorPalette.RED}"/>. 静态类的唯一问题是它们不是动态的（你不能为它们定义任意数量的颜色）。与 XML 相同：您必须（最终）对某个 XML 结构进行硬编码才能在 Skins 中使用它们。您甚至可以让 XML 定义 ColorPalette 值（因此ColorPalette.ACCENT_COLOR可以设置为 XML 中的任何内容（金色、亮蓝色或任何重音）。有趣的东西。

自定义皮肤：Flex 4 允许您轻松地为所有 Flex 4 和 Flex 3（数据网格、手风琴等）设置皮肤。因此，如果您不喜欢面板只有 1 个阴影而没有渐变，您可以添加具有 4 个渐变和 2 个阴影的背景（用于 2 个光线角度），也许还有一些翻转效果。然后你可以将你的应用ColorPalette.BRIGHT_RED到阴影（或发光:)）。您可以让 XML 配置 ColorPalette 设置。这是一个很酷的自定义 Flex 4 皮肤

CSS：然后在 CSS 中，您可以编写一个非常简单的 Palette 解析器，将您的 ColorPalette 值（例如）应用于 CSS。查看Degrafa CSS Skin以获取一些代码示例。

表现

调色板和 CSS 的唯一问题是性能。根据定义，静态类和绑定会降低性能。绑定会在后台导致大量事件调度，因此<mx:Button color="{ColorPalette.RED}"/>会降低性能（当然不明显，因为有更糟糕的应用程序，例如使用内置 Adob​​e Tweens），但在某种程度上确实如此。

与 CSS 相同。在 Flex 中，每个 CSS 选择器 (Panel { properties:values... }都被转换为一个对象。因此，如果您有 100 个选择器，您不仅会获得 100 个额外的对象，而且至少会在您的应用程序中获得 100 个额外的类！这肯定会增加您的 swf 大小。而且所有它们的属性是动态的，根据定义，动态类比非动态类慢。另外，设置样式（setStyle(property, value)在 Flex 中非常慢，因为您必须循环遍历所有子项。如果您通过管理系统（或您建议的类似 Flex Style Explorer 之类的东西），那么您并不在乎。但是因为它们使用setStyle()，您可以在更改样式时看到不错的性能影响。

因此，如果性能是一个超级大问题，最好的选择是硬编码每个样式值，而不是在运行时更改样式（谁需要这样做（除非你在管理部分）？）。您如何在保持敏捷的同时对样式进行硬编码？使用Palletes ( ColorPalette.BRIGHT_RED) 等，并<mx:Button color="{ColorPalette.RED}"/>通过一些预处理器将绑定表达式 ( ) 转换为静态声明（我使用 ruby​​ 编译我的 swfs，所以我只是匹配模式并替换）。所以它会转换<mx:Button color="{ColorPalette.RED}"/>为<mx:Button color="0xff0000"/>，你会得到性能提升。

最后，最好通过以下方式创建自定义皮肤并在那里定义样式：

  • 静态声明<mx:Button color="0xff0000"/>
  • 调色板声明<mx:Button color="{ColorPalette.RED}"/>
  • xml 声明<mx:Button color="{myxml.@button_color}"/>

然后，您可以定义一些非常酷和高级的皮肤，并将它们连接到调色板或 xml 文件，并让用户对其进行编辑。尝试使用 Flash 或 Flex 内置的东西构建一个非常酷且模块化的皮肤/样式系统并不容易（也不可取）。所以最好是

  • 创建一组皮肤（并将它们打包为主题）
  • 将皮肤连接到 xml
  • 让用户修改xml

避免使用 CSS，它对处理器来说太密集了，除非您需要像在 HTML 中使用的高级选择器，因为它确实让生活变得轻松。但是为了模块化和可定制性（和性能），创建皮肤并将它们连接到 XML。

我自己创建了一个可以在所有客户项目中使用的基本主题，它定义了我的风格。这包括 3 个包（myskins、mx、spark）。在那里，我复制/粘贴所有默认的 Flex 3/4 皮肤并开始自定义。您可以下载Scale 9 皮肤项目免费让大多数组件准备好进行皮肤和测试。然后我只是将我的设计（photoshop 或其他）合并到 Flex 中，但你可以选择。对于我重用的所有颜色，我将它们添加到调色板并最终添加到 XML。然后，如果我需要一个稍微不同的皮肤并且我多次使用它，我会使用 CSS 为皮肤定义一个新样式（可能是一个没有背景颜色或边框的列表）。我的 CSS 非常精简。然后我可以将我的主题/调色板/css复制/粘贴到新项目，根据需要进行修改，允许用户通过xml（或管理界面）编辑颜色和位置，我准备好了。

你不能只用 CSS 做那么多事情。

希望有帮助。槊

于 2010-02-03T10:28:30.377 回答
0

我一直专门使用 CSS。你说得最好，任何人都可以接近它。我们可以将设计委托给不知道如何在 actionscript 中编写代码并且他们使用 css 和样式浏览器没有问题的人（在http://examples.adobe.com/flex3/consulting/styleexplorer上针对 flex 3 进行了更新） /Flex3StyleExplorer.html，没有进行太多比较以找出与 flex 2 版本有什么不同）。

于 2010-02-02T20:25:13.260 回答
0

如果性能和灵活性是您的皮肤最重要的两个考虑因素，您应该考虑编程皮肤。

请参阅：程序化皮肤 - 快速入门

引用 Adob​​e：

“程序化皮肤的一个优点是它为您提供了对样式的大量控制。例如，您无法使用样式表或图形皮肤控制 Button 控件角的半径，但您可以使用程序化皮肤。您可以也可以直接在您的 Flex 创作环境或任何文本编辑器中开发程序化皮肤，而无需使用 Adob​​e® Flash® 等图形工具。程序化皮肤也往往使用较少的内存，因为它们不包含外部图像文件。”

有关更多信息，您还可以阅读 Adob​​e LiveDocs 帮助文档中的“创建程序化皮肤”。

于 2010-02-03T00:39:10.017 回答