F*CSS - 支持AS3的CSS工具库

F*CSS是一个新的类库，是用来弥补AS3在CSS支持方面的空白。这个库原本用于Flash CamoFramework中的PropertySheet体系，由于它的重要性现在逐渐发展成为一个独立的项目。过去我一直非常关注关于原型CSS在AS3中支持的匮乏，因此我希望通过开源这个解决方案来获得Flash社区的反馈。

在进入代码之前，先明确一下这个工具类库需要实现的目标：

更好的支持在TextField中支持使用CSS的属性，建立TextField文本样式与CSS样式表之间的一致性
需要一个样式继承类，能够更好的组织、优化样式表。（译者注：F*CSS中的StyleSheet类，等同于HTML中<style>标签所起的作用）
需要一个样式对象，可以返回具体的CSS属性值，并允许我们在任何地方使用这些值，甚至在TexField之外使用（译者注：F*CSS中的Style类，类似HTML中每个类块）
需要一个工具类，可以自动将定义的样式对象的属性值转换成所需要的文本样式。这个工具类应该可以使用目标类的public属性来决定正确的文本样式。这个工具类还应该可扩展，允许开发者添加自定义的转换逻辑（译者注：F*CSS中的TextFieldUtil类，将CSS定义的样式应用于TextField）
这个工具类库应该方便直接使用并且具有易于理解的API
最后，这个工具类库应该是开源的、免费的，并有良好的文档

需要重点指出的是，这个工具类库并不试图重新建立一个HTML表现引擎。F*CSS是为了设置TextField文本样式而建立的一个专用的CSS适配工具。在你的应用中使用F*CSS，建立外部类似CSS文本定义来设置TextField文本样式。下面让我们看一下如何使用F*CSS来定义TextField的样式。

目前，如果你想改变TextField的显示样式，你必须设置TextField类的一些属性和TextFormat类的另外一些属性。而且，有些属性必须用特别的方式设置，否则将不会显示。为什么要那么麻烦呢？F*CSS将替你设置TextField类和TextFormat类，而你只需一次定义CSS的样式。下面的demo将展现给你看，这样的设置是如此的简单：

import com.flashartofwar.fcss.managers.StyleSheetManager;
import com.flashartofwar.fcss.styles.Style;
import com.flashartofwar.fcss.stylesheets.StyleSheet;
import com.flashartofwar.fcss.stylesheets.StyleSheetCollection;
import com.flashartofwar.fcss.utils.TextFieldUtil;
import flash.text.TextField;
// Get some css. Normally you would load CSS from an external file but
// for this demo we are going to put some CSS in a XML variable.
var css:XML = <css><![CDATA[
baseStyle
{
x:0;
y:0;
selectable: false;
}
/* this style, "demoStyle", inharits properties from baseStyle */
baseStyle demoStyle
{
autoSize: left;
border: true;
border-color: red;
color: red;
size: 30px;
x: 50px;
y: 50px;
}
]]>
</css>;
// Create a new StyleSheet
var styleSheet:StyleSheet = new StyleSheet( );
styleSheet.parseCSS(css.toString());
// Get a style
var style:Style = styleSheet.getSelector("demoStyle");
// Create a TextField
var tf:TextField = new TextField();
// Use TextFieldUtility to apply the style to the TextField
TextFieldUtil.applyStyle(tf, style);
// Use TextField like you would normally
tf.htmlText = "F*CSS - Hello World";
addChild(tf);

复制代码

就如你看到的那样，F*CSS帮你做了所有的脏活累活：使用一个单一的样式对象来抽象定义TextField/TextFormat类的属性。对所有重要的属性都有很好的支持，F*CSS使用破折号属性名来代替驼峰式命名。这样也能清理CSS标准属性名，例如在TextField类中的font-face属性将改为font定义。

还有两个额外的类允许在你应用的任何地方创建、添加、获得样式表。让我们看一下：

import com.flashartofwar.fcss.managers.StyleSheetManager;
import com.flashartofwar.fcss.stylesheets.StyleSheetCollection;
// If you want to make the CSS available globally use the
// StyleSheetManager/StyleSheetCollection
// Get a reference of the StyleSheetCollection from the StyleSheetManager
var styleSheetCollection:StyleSheetCollection = StyleSheetManager.instance;
// Register style sheet with the Collection.
styleSheetCollection.addStyleSheet("defaultSheet", styleSheet);
trace(styleSheetCollection.getSelector("demoStyle"));

复制代码

通过使用StyleSheetManager类的单例对象SytleSheetCollection，你可以管理你已加载的StyleSheet。

你还会发现更多有用的工具。例如com.flashartofwar.fcss.utils.StyleApplierUtil这个工具类。

这些是F*CSS的一些基本介绍。目前F*CSS只是一个Alpha版本，但由于它来自Flash Camo项目中的CSS解析器，你会发现它异常的稳定。这里罗列了一些我将在下一版本增加的新特性：