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);