Flex style - CSS 的使用

　　Dan Orlando,  软件架构师, Vision Media Group
　　利用已经构建到 Adobe?? Flex??  框架内的 CSS  的强大功能。本文提供了在 Flex  内开始使用 CSS  所需的信息，也提供了在使用 Flex  设计和开发用户界面时加速工作流的提示和技巧。
　　Flex  最为强大的特性之一是其包含的极大的设计灵活性。这些灵活性大部分可归功于 Adobe  用 Flex  实现 CSS 。以我为例，我最近为一个新的 Adobe AIR??  应用程序担任高级 UI  设计员，在我向全球 160,000  个用户正式发布第一个公开发布版的若干天前，我收到了大量设计更改请求。虽然很多开发人员都会将这些最后一分钟的请求看作是让人头痛的事，我却能在不足 20  分钟内完成这些更改并将其放入版本控制，而这完全得益于 Flex  和 CSS  的强大功能。
　　常用缩略语
　　UI ：用户界面
　　W3C ：World Wide Web Consortium
　　我将 CSS  与 Flex  的使用看作是 UI  开发内的一种利用形式。通过我在 UI  开 发中积累的经验，我已经学会了为一些必然性做预期和准备。其中一个必然性是不管您在之前做了什么样的计划，项目的设计与功能需求都会在整个开发周期内随时 发生变化。这是基于团队环境做大规模应用程序开发时的游戏规则，要在游戏中取胜，最好的方法就是预先判断出所有玩家的动向，然后再提前相应做好自己的定 位。学会了灵活使用这个开发技巧后，您就可以立于不败之地，那时再去击打一个移动目标就变得轻松多了。Flex  的性能，比如与 CSS  的集成，恰巧可以让您这么做，正是因为这一点，我才迷上了用 Flex  进行开发。
　　我的目标是在您读完本文后，您也能够通过 Flex  去充分利用 CSS  的强大功能，并能作为一名精通 Flex UI  的开发者战无不胜。如果您已经是一个 Flex  爱好者，那么我希望您能通过本文学会新的通过 Flex  使用 CSS  的技巧 -  特别是对于企业级应用程序。
　　为何要使用 CSS ？
　　大多数面向对象的设计模式都将设计逻辑与行为功能分离开来。由于 Adobe ActionScript??  是一种面向对象的语言，因此它也就自然而然地要遵守这些面向对象的编程（OOP ）约定。这么做的好处包括灵活性、保持应用程序易于维护、代码重用和更好的性能。
　　在 Web  设计界，CSS  是一种标准，用来封装组成 Web  站点的代码。考虑到 CSS  的功能和成熟性，很多有经验的 Web  设计人员都力求用 CSS  实现 Web  站点的设计和布局属性。其结果是可以获得对站点观感的更多的控制和更好的灵活性。CSS  在三、四年前就已经十分流行，那时候 Web  开发人员开始意识到如果 Web  站点的设计能够独立于该站点的行为功能，那么站点的设计在不破坏或者不会对该站点的行为代码产生负面影响的同时，可以很容易地被修改。这也推动了模板的迅速发展、对相同代码库的皮肤设置以及重新进行皮肤设置。比如，我热衷于为我的博客网站使用 WordPress 。有成千上万的人都在使用相同的开源代码库来支撑其博客站点，而很多时候，您遇到的站点都是构建在 WordPress  之上的，而您却往往察觉不到这一点，这完全得益于其通过使用 CSS  对代码和设计进行的成功分离。
　　Flex  内的 CSS
　　首先，对于具有 Web  设计背景的人，最为重要的是要理解 Flex CSS  并不遵循与 W3C CSS  规定相同的约定。在 W3C CSS  版本 2.0  中被用来分离单词的连字符（- ）并未用作 Flex  实现内的代码约定的一部分。相反，CSS  的 Flex  实现使用了驼峰式大小写。比如，W3C CSS2  规范内的 vertical-center  对等于 Flex CSS  内的 verticalCenter 。如果您已经在使用了驼峰式大小写的编程语言内进行过编程，那么，这非常容易习惯。好的消息是 CSS 2.0  规范内可用的大部分内容在 Flex CSS  实现内也可用。并且，CSS  的 Flex  实现是在 CSS 2.0 W3C  标准上的显著扩展，提供了额外的、对 Flex  组件惟一的样式属性。
　　维护样式：组件与样式属性
　　在开始创建 Flex CSS  样式表之前，我建议您首先考虑您想要如何实现样式。出于简单性的考虑，我向您展示了四种声明样式的基本方法：
　　通过组件的类名
　　通过将组件的类名作为样式名来设置组件的样式： TitleWindow {
　　borderColor: #f7f7f7;
　　borderAlpha: 1;
　　borderThicknessLeft: 0;
　　borderThicknessTop: 0;
　　borderThicknessBottom: 0;
　　borderThicknessRight: 0;
　　cornerRadius: 0;
　　headerHeight: 0;
　　highlightAlphas: 1, 1;
　　headerColors: #f7f7f7, #f7f7f7;
　　footerColors: #f7f7f7, #f7f7f7;
　　backgroundColor: #f7f7f7;
　　dropShadowEnabled: true;
　　}
　　通过一个惟一的样式名
　　通过使用一个惟一的样式名来声明样式。请确保在名字之前使用一个句点并使用驼峰式大小写约定： .altText
　　{
　　fontFamily: TVNordEFCEOP-RegularCon;
　　fontSize: 18;
　　color: #FFFFFF;
　　}
　　通过一个组件外加一个样式名
　　当同一个组件需要有多种设计时（这对于具有多个视图状态的应用程序很常见），可以设置组件的样式名。这种方法还确保了只有特定的组件才可以分配到特定的样式： Text.bigYellowText
　　{
　　color:#EFB526;
　　fontSize:36;
　　fontWeight:Bold;
　　}
　　通过全局选择器
　　全局选择器 是一种特殊的选择器，它能够影响包含属性集的应用程序内的每一个组件。比如，我可以将包含有 cornerRadius  样式属性的所有显示对象组件的 cornerRadius  样式属性设置为 4 ，如下所示： global
　　{
　　cornerRadius: 4;    
　　}
　　样式优先权
　　虽然全局选择器基本上设置的是一个属性的默认值，该值很容易被覆盖。比如，如果我在内联（inline ）或在我的 CSS  文件内将 Button  组件的 cornerRadius  属性设置为 0 ，它将优于我已经指定的 4  这一全局默认设置；因此，所有我的 Button  组件都将包含一个值为 0  的 cornerRadius  属性。而且，我将通过创建一个额外的样式来覆盖 4  这一全局设置和 0  这一 Button  设置：
　　Button.altCornersButton
　　{
　　cornerRadius: 8;    
　　}
　　在 Flex  内应用样式
　　选择用 Flex  实现 CSS  的方法必须基于环境和条件。在考虑设计实现的可用选项时，最好是从较高的层次审视应用程序。如下的这些方法是用 Flex  实现 CSS  时最为常用的。
　　设置一个实例（内联）上的样式
　　扩展了 Flex UIComponent  基类的 Flex  组件允许作为内联属性设置常见样式 -  换言之，即在 MXML  组件声明标签内（参见 清单 1 ）。一个显示对象的布局属性通常对该对象惟一，所以常常能够看到某个组件被显式地设置了如下这些属性之一：x 、y 、height 、 width 、top 、right 、left 、bottom 、horizontalCenter 、 verticalCenter 、horizontalAlign  和 verticalAlign 。
　　清单 1.  用 MXML  作为某个组件实例的属性设置样式  清单 1  展示了设置样式属性的一个函数示例，这些属性对 id  值为 volumeIcon  的 Button  组件的这个特定实例是惟一的。由于我知道它是惟一一个需要这些特定样式值的按钮，因此我已经显式地设置了此特定按钮的 cornerRadius 、alpha  和 verticalCenter 。
　　设置 MXML  组件标签上的样式属性的一条经验是，只有在知道所设置的样式值特定于该组件的情况下才以这种方式设置此属性。比方说，您的应用程序要求一个容器能够垂直堆叠显示对象而不在其间留空隙。同时，您知道应用程序内的其他 VBox  容器则确实需要显示对象之间有空隙。在这种情况下，您应该在 VBox  组件的该实例上显式地设置 verticalGap  属性，如 清单 2  所示。
　　清单 2.  在 VBox  容器组件的这个实例上 verticalGap  被显式地设为 0
　　
　　(...)
　　
　　在 MXML  内嵌入 CSS
　　该方法所涉及到的是用   标签将样式或资源直接嵌入到一个 MXML  文件内。出于实用的目的，现在需要在其中直接将样式信息嵌入到 MXML  文件的实例很少。最重要的是要认识到如果应用程序包含很多被嵌入的 CSS ，那么随着应用程序的增长，设计将越来越难以维护。认识到这一点，在使用这种方法时，要十分慎重，只有在需要的时候才使用它。清单 3  提供了嵌入样式声明的一个例子，该声明应该保留在一个外部 CSS  文件内以便获得更好的代码可维护性。
　　清单 3.  将样式直接嵌入到 MXML  应用程序文件内
　　
　　
　　
　　.bGroup {
　　borderSides:"left,bottom,right";
　　borderStyle:"solid";
　　borderColor:#6d6f71;
　　borderLeftThickness:3;
　　borderRightThickness:3;
　　borderBottomThickness:1;
　　dividerColor:#6d6f71;
　　dividerThickness:3;
　　}
　　
　　
　　Flex AplicationControlBar  而为我的应用程序所构建的一个向下扩展（scaled-down ）的组件。在所提供的设计内，控制栏内的每个按钮实际上都是一个简单的文本单词，看上去更像是一个链接，而非按钮。此外，所有这些单词链接之间都有一个小的 bullet  分隔符。由于我已经有了整个应用程序的设计，因此我知道这种 bullet  分隔符是应用程序主控制栏所特有的，在任何其他地方都不会出现。最为重要的是，由于 bullet  在同一个组件内出现若干次，因此非常有必要将此图像作为其自己的私有类嵌入到这个 MXML  文件内，以便我能从放置在这些链接之间的每个图像控件中绑定它。否则，结果很有可能是正在创建的同一个图像却具有多个实例，这是对系统资源的一种浪费。
　　清单 4.  直接嵌入一个图像
　　
　　
　　
　　source="assets/bullet_black.png")]
　　[Bindable]
　　private var bullet:Class;           
　　]]>
　　
　　
　　
　　source="{bullet}" />
　　
　　source="{bullet}" />
　　
　　source="{bullet}" />                         外部样式表
　　一个 Flex  或 AIR  应用程序在其源代码目录的根部具有一个 MXML  文件，应用程序可以基于 Application  类（Flex ）或 WindowedApplication  类（AIR ）。这个文件就是默认的 MXML  应用程序文件，开始于   或  。应用程序的样式表源代码应该立即出现在应用程序基类声明之后（参见 清单 5 ）。
　　清单 5.  在除主应用程序 MXML  文件之外的任何文件内声明样式表都会导致错误
　　
　　
　　source="com/passalong/assets/RED_SKIN_MAIN.css"/>
　　
　　Flex Panel  类的定制组件。这个组件给出了应用程序内新窗口的外观，用户可以最小化该新窗口以便只显示标题栏（以防用户访问其中的内容）。有关它的最酷的一点是当窗口处于最小化状态时，这个 Minimize  按钮会被 getStyle  和 setStyle  方法动态地重新进行皮肤处理，这两种方法将此按钮转变为 Restore  按钮并为 maximize  按钮的皮肤设置新的状态。通常，我通过创建一种切换开关来重用某个类的相同实例，这节省了系统资源。
　　使用如下语法，通过 MXML  可以方便地使用 setStyle  方法：
　　
　　当 setStyle  通过 MXML  被调用时，它会自动进行 getStyle  调用，所以您无需获得该样式的当前属性来重置它。正如您在 清单 7  中所见，当应用程序状态改变时，我设置了一个新的背景图像，这种方法对使用状态设计模式的应用程序尤其好用。
　　清单 7.  在 MXML  内调用 setStyle
　　
　　
　　
　　
　　
　　
　　                                            source='com/passalong/assets/                                       my_collections_background.png')" />                                                     (…) 运行时 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??  间自由出入 -  完全取决于我想要实现什么。如果这一点做得好，一个 " 普通设计人员"  很快就能变身 " 权威设计人员" 。Adobe Developer Connection  有很多关于这t 个题目的优秀文章（参见参考资料）。
　　结束语
　　本文向您展示了用 Flex  应用程序实现 CSS  的一些方法和技巧。不过，我并未论及内置到 Flex  和 AIR  的设计能力 -  特别是关于创建和实现皮肤，这其中会大量涉及到 CSS  的使用。此外，尽管本文已给了您一个很好的开始，但我仍然强烈建议您在开发定制组件时要继续研究 Flex  和 CSS  的使用。这也就是说，当您完成了关于 Flex  与 CSS  的研究时且自己感觉对这个主题有了透彻的了解时，我建议您不妨尝试扩展 UIComponent  类并由此开发一个定制组件，让它成为可伸缩和可定制的，以便其他人也可以使用您的组件