首先,如果您还没有开始,我建议您使用 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}"/>
会降低性能(当然不明显,因为有更糟糕的应用程序,例如使用内置 Adobe 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 做那么多事情。
希望有帮助。槊