探索 Flex 和 CSS 的强大功能

核心提示： 运行时 CSSFlex Version 3 内一个有趣的特性是您能像编译一个 SWF 文件一样编译一个 CSS 文件，并在运行时加载它，探索 Flex 和 CSS 的强大功能(10)，使用这个特性，您就能够让用户基于其各自的喜好更改应用程序的观感，我建议您不妨尝试扩展 UIComponent 类

运行时 CSS

Flex Version 3 内一个有趣的特性是您能像编译一个 SWF 文件一样编译一个 CSS 文件，并在运行时加载它。使用这个特性，您就能够让用户基于其各自的喜好更改应用程序的观感。您可能已经看到过这类功能在社区媒体网站内被使用过，其中 JavaScript™ 代码被用来在用户选择一个新的设计 view.Compile 样式表时切换 CSS 文件，以便在运行时加载。

毫不奇怪，在 Flex 内实现此任务十分容易。只需创建一个新的 CSS 文件，将 CSS 样式选择器放入其内，并保存此文件。然后，在 Flex 导航面板（Flex Development 模式内的左上方的面板）内，右键单击刚刚创建的这个 CSS 文件，然后单击 Compile CSS to SWF。

StyleManager 类

在创建并编译完想要在应用程序内使用以便分离 SWF 文件所需的所有样式表之后，可以使用 Flex StyleManager 类来轻松切换样式表，如 清单 8 所示。

清单 8. 使用 StyleManager 类在运行时加载预编译的样式表

　　　
private　function　loadFirstStyleSheet():void　{　
　StyleManager.loadStyleDeclarations("CSS1.swf");　
}　
　　
private　function　loadSecondStyleSheet():void　{　
　StyleManager.loadStyleDeclarations("CSS2.swf");　
}　

计算成本

在运行时加载预先编译的样式表时，需要考虑的很重要一点是由此给用户系统带来的负荷。使用这个设计实现方法时，应该非常谨慎和小心，过多的使用这个方法会因为缺少可用系统资源而快速降低应用程序的性能。

主题和皮肤处理

我最欣赏 Adobe 的一点就是它致力于缩小其所提供的用来简化及加快设计开发工作流程的各种工具间的差距。实际上，在设计 Flex UI 时，我喜欢的部分就是可以在 Adobe 应用程序 Flex、Illustrator®、Flash®、Photoshop® 及 Fireworks® 间自由出入 — 完全取决于我想要实现什么。

结束语

本文向您展示了用 Flex 应用程序实现 CSS 的一些方法和技巧。不过，我并未论及内置到 Flex 和 AIR 的设计能力 — 特别是关于创建和实现皮肤，这其中会大量涉及到 CSS 的使用。此外，尽管本文已给了您一个很好的开始，但我仍然强烈建议您在开发定制组件时要继续研究 Flex 和 CSS 的使用。这也就是说，当您完成了关于 Flex 与 CSS 的研究时且自己感觉对这个主题有了透彻的了解时，我建议您不妨尝试扩展 UIComponent 类并由此开发一个定制组件，让它成为可伸缩和可定制的，以便其他人也可以使用您的组件。