如何将 CSS 文件动态加载到 Flex 应用程序中？答案

【问题标题】：How do you dynamically load a CSS file into a Flex application?如何将 CSS 文件动态加载到 Flex 应用程序中？
【发布时间】：2010-09-17 07:45:20
【问题描述】：

我知道您可以应用 CSS 以使用 StyleManager 为 Flex 中的对象设置样式：
http://livedocs.adobe.com/flex/3/html/help.html?content=styles_07.html

您还可以动态加载编译 CSS文件（SWF）：
http://livedocs.adobe.com/flex/3/html/help.html?content=styles_10.html

但是，我正在使用 Web GUI 和服务器端脚本动态创建我的 CSS 文件。如果 CSS 被更改，那么脚本还需要将 CSS 编译成 SWF（这不是一个可行的选项）。有没有办法解决这个问题？

【问题讨论】：

标签： css apache-flex dynamic-css

【解决方案1】：

在this comment Adobe 错误跟踪器中与此相关的问题 T. Busser 正在描述对您来说可行的解决方案：

“我创建了一个小类，它将“解析”一个 CSS 文件，该文件使用 HTTPService 对象。它拆开由返回的字符串 HTTPService 对象，将其分解为选择器，并创建一个新的每个 CSSStyleDeclaration 对象找到的选择器。一旦所有属性被分配给添加的 CSSStyleDeclaration 对象到样式管理器。它没有执行任何检查，你应该做确保 CSS 文件格式正确，但是 99％的时间就足够了。像@font、Embed() 和 ClassReference() 几乎不会被使用由我的客户。他们确实需要改变颜色和东西的能力这样他们就可以轻松地为灵活应用到他们的房子风格。”

您可以尝试与此人联系以寻求他们的解决方案，或者也可以使用来自 this as3csslib project 的代码作为编写类似他们所描述内容的基础。

【讨论】：

【解决方案2】：

你也可以像这样在 flex 中实现动态样式表。在这里我找到了这篇文章： http://askmeflash.com/article_m.php?p=article&id=6

【讨论】：

这对我来说效果很好——我没有使用 parseCSS，而是自己解析了字符串并使用： StyleManager.getStyleDeclaration("Component").setStyle("property",value);有点像黑客，但哦，好吧......

【解决方案3】：

编辑：此解决方案不起作用。从解析器中取出的所有选择器都转换为小写。这可能适用于您的应用程序，但可能不会...

我将这个答案留在这里，因为它可能会帮助一些人寻找解决方案，并警告其他人这种方法的局限性。

完整的讨论请参见我的问题：“Looking for CSS parser written in AS3”，但我发现标准库中隐藏了一个 CSS 解析器。使用方法如下：

public function extractFromStyleSheet(css:String):void {

    // Create a StyleSheet Object
    var styleSheet:StyleSheet = new StyleSheet();
    styleSheet.parseCSS(css);

    // Iterate through the selector objects
    var selectorNames:Array = styleSheet.styleNames;
    for(var i:int=0; i<selectorNames.length; i++){

        // Do something with each selector
        trace("Selector: "+selelectorNames[i];

        var properties:Object = styleSheet.getStyle(selectorNames[i]);
        for (var property:String in properties){

            // Do something with each property in the selector
            trace("\t"+property+" -> "+properties[property]+"\n");
        }
    }
}

然后您可以使用以下方法应用样式：

cssStyle = new CSSStyleDeclaration();
cssStyle.setStyle("color", "<valid color>);
FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration("Button", cssStyle, true);

【讨论】：

你为什么要发布一个超过 2 年的已回答问题？
@Rob 我通过谷歌搜索找到了这个问题，并认为答案不完整。我的回答完成了问题，将有助于人们从 Google 中找到问题（就像我一样）。

【解决方案4】：

在 Flex 中 CSS 的应用在编译时在服务器端处理，而不是在运行时在客户端处理。

然后我会为您看到两个选项（我不确定这两个选项是否实用）：

使用服务器端脚本将 CSS 编译为 SWF，然后动态加载它们。
解析 CSS 样式表并使用 flex 中的 setStyle 函数来应用样式。与此方法类似的示例是Flex Style Explorer，您可以在其中查看source。

祝你好运。

【讨论】：