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解析器，你会发现它异常的稳定。这里罗列了一些我将在下一版本增加的新特性： 一个HTML解析器，允许把内联的css样式转换为TextFormat，提供更多对TextField的控制，并继续兼容FP9。 在StyleSheetCollection类中增加更好的多重样式表的支持。 增加CSS类功能，帮助管理多块的样式 更快、更好的解析 更多的工具类，帮助你在组件中使用样式，包括对FLEX的支持 更多的文档 源代码请访问Google code：F*CSS 下载SWC：here. SVN Checkout：here 在线查看代码：here