Flex中的CSS: (2)三种基本类型的CSS会被编译器转换为什么样的AS代码?
2012-06-13 22:21
429 查看
我们接着做试验。
在代码中定义三种不同形式的基本的CSS,如下:
test1.mxml
执行结果如下图,我们自定义的三种类型的CSS赫然纸上
![](http://my.csdn.net/uploads/201206/13/1339597320_7823.png)
查看编译器自动生成的代码,摘录如下:
test1-generated.as
由此看见,编译器为每个CSS样式都单独生成了一段代码。
如果我们不用FlashBuilder,而是纯手工来编写,也是可行的,就是慢点儿,呵呵。
在代码中定义三种不同形式的基本的CSS,如下:
test1.mxml
<?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:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|TextInput{ color:#112233; } .MyStyle{ color:#445566; } #bnt{ color:#778899; } </fx:Style> <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 id="btn" label="Show Selectors" click="showSelectors()" styleName="MyStyle"/> <s:TextArea id="msg" width="100%" height="100%"/> </s:Application>
执行结果如下图,我们自定义的三种类型的CSS赫然纸上
![](http://my.csdn.net/uploads/201206/13/1339597320_7823.png)
查看编译器自动生成的代码,摘录如下:
test1-generated.as
var conditions:Array; var condition:CSSCondition; var selector:CSSSelector; selector = null; conditions = null; conditions = null; selector = new CSSSelector("spark.components.TextInput", conditions, selector); // spark.components.TextInput style = styleManager.getStyleDeclaration("spark.components.TextInput"); if (!style) { style = new CSSStyleDeclaration(selector, styleManager); } if (style.factory == null) { style.factory = function():void { this.color = 0x112233; }; } selector = null; conditions = null; conditions = []; condition = new CSSCondition("class", "MyStyle"); conditions.push(condition); selector = new CSSSelector("", conditions, selector); // .MyStyle style = styleManager.getStyleDeclaration(".MyStyle"); if (!style) { style = new CSSStyleDeclaration(selector, styleManager); } if (style.factory == null) { style.factory = function():void { this.color = 0x445566; }; } selector = null; conditions = null; conditions = []; condition = new CSSCondition("id", "bnt"); conditions.push(condition); selector = new CSSSelector("", conditions, selector); // #bnt style = styleManager.getStyleDeclaration("#bnt"); if (!style) { style = new CSSStyleDeclaration(selector, styleManager); } if (style.factory == null) { style.factory = function():void { this.color = 0x778899; }; }
由此看见,编译器为每个CSS样式都单独生成了一段代码。
如果我们不用FlashBuilder,而是纯手工来编写,也是可行的,就是慢点儿,呵呵。
相关文章推荐
- Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--交集:s|Button#btn
- Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--伪类:s|Button:up
- Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--组合:s|Button#btn, .MyStyle
- Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--派生:s|HGroup s|TextInput
- Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--派生的另一种表示:#XXX s|TextInput
- Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--全局选择器:global
- Flex中的CSS: (1)本质:CSS被编译器转换为AS代码1
- Flex中的CSS: (1)本质:CSS被编译器转换为AS代码
- 提高你的Java代码质量吧:避免基本类型数组转换列表陷阱(Arrays.asList())
- Swift开发之 as、as!、as?三种类型转换操作符使用详解
- 基本数据类型-保装类型-string三种数据类型的转换
- Swift开发之 as、as!、as?三种类型转换操作符使用详解
- swift 中 as、as!、as? 这三种类型转换操作符的异同 及一些控件用法
- flex:RemoteObject 和 DataGrid 数据交互, AS 与java 数据类型转换
- [编写高质量代码:改善java程序的151个建议]建议65 避开基本类型数组转换列表陷阱
- Flex三种编写AS代码的方法
- as、as!、as?三种类型转换操作符使用详解
- 随堂笔记第一天:环境变量配置,代码的三种注释方法,第一个程序,基本数据类型------1
- Swift as、as!、as?三种类型转换操作符使用详解