Flex中的CSS： （1）本质：CSS被编译器转换为AS代码

进入正文前，我们先温习下什么是“CSS选择器”？

CSS层叠样式表有很多种选择器，最基本的三种选择器：类选择器、类型选择器、ID选择器。

看几个例子：

（1-1）类选择器

下例是为所有按钮类型定义CSS样式，所有按钮的文字大小都被约束为12像素。

以某类型为对象来定义CSS样式，这个“Button” 就属于“类选择器”。

Button

{

font-size:12px;

}

（1-2）类别选择器

下例定义了一组CSS样式，并为它起名为“.MyButton”。它并不能约束所有按钮的文字大小。

它只能作用在显式地声明使用它的地方。例如在某个按钮的定义中加入：<s:Button styleName=".MyStyle"/>。

这个“.MyStyle” 就属于“类别选择器”。

.MyStyle

{

font-size:12px;

}

（1-3）ID选择器

下例定义了一组CSS样式，它作用在ID为“txtName”的组件上：<s:textInput id="txtName" width="100%" height="100%"/>

这个“#txtName” 就属于“ID选择器”。

#txtName

{

font-size:12px;

}

Flex支持CSS层叠样式表。

在开发环境中定义CSS就像上面三个例子，语法非常简单。

但本质上，定义的CSS内容将被编译器转换为AS代码。

我们来证明它。

使用FlashBuilder建立Flex工程：test1。并增加编译器参数-keep-generated-actionscript=true，以此保留编译器自动生成的中间AS代码。

test1.mxml

这是一个非常简单的程序，没有显式地定义任何CSS样式。

因为Flex框架底层定义了很多默认的CSS样式，这些样式会被编译器便已成为AS代码，我们通过下面的例子来看看这些默认的CSS的内容。

styleManager是Flex框架中专门用于管理CSS样式的单例类，通过它我们可以看到其中全部的“CSS选择器”。

<?xml version="1.0" encoding="utf-8"?> <!-- styles/SelectorsTest.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Script> <![CDATA[ public function showSelectors():void { var selectors:Array = styleManager.selectors; msg.text = "所有的选择器列表如下(" + selectors.length + ")\n"; for (var i:int = 0; i < selectors.length; i++) { msg.text += "\n" + selectors[i]; } } ]]> </fx:Script> <s:Button label="Show Selectors" click="showSelectors()"/> <s:TextArea id="msg" width="100%" height="100%"/> </s:Application>

程序运行结果显示一共有18个“CSS选择器”被使用了。是这样吗？如何证明曾经有这18个选择器被生成了？

我们看看编译器自动生成的AS代码中有无线索。

上图中左面generated文件夹的内容就是编译器自动生成的AS文件，其中_test1_Styles.as中定义了被使用的Flex框架默认CSS样式。其内容摘录如下：

分别定义了CursorManager的样式和ToolTip的样式。类似这样的定义共有18处，恰好和test1.mxml的运行结果一一完全对应。

// // mx.managers.CursorManager // selector = null; conditions = null; conditions = null; selector = new CSSSelector(mx.managers.CursorManager, conditions, selector); mergedStyle = styleManager.getMergedStyleDeclaration("mx.managers.CursorManager"); style = new CSSStyleDeclaration(selector, styleManager, mergedStyle == null); 省略。。。 // // mx.controls.ToolTip // selector = null; conditions = null; conditions = null; selector = new CSSSelector(mx.controls.ToolTip, conditions, selector); mergedStyle = styleManager.getMergedStyleDeclaration("mx.controls.ToolTip"); style = new CSSStyleDeclaration(selector, styleManager, mergedStyle == null);