Question

我需要load and apply CSS at runtime in my Flex app。我知道adobe文档说你需要compile the CSS before loading it，但我想找到一个解决方法。

我知道你可以设置这样的个人风格：

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

我计划解析CSS文件并按上述方法应用每个属性。

我想知道是否：

Adobe有一个我可以使用的CSS解析器库
其他人有一个我可以使用的CSS解析器
如果我编写自己的CSS解析器，我应该注意

我知道adobe flex.text.StyleSheet类有一个CSS解析器，但我找不到一种方法来利用它。（有没有办法获得源代码？）

Answer 1

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

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

虽然它不是为此目的，但可以使用StyleSheet类来解析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");
        }
    }
}

Answer 2

我有类似的问题，但更确切地说，我希望完全避免编译，因为我的应用程序是自定义exe文件使用的ActiveX包装器，我让软件经销商自定义他们的皮肤。

在实践中我们把＆lt; fx：Style＆gt;申请之外。为了避免对字符串进行低级解析，我们在XML中转换了样式表：

<styles>
    <namespace name="myNs" value="com.myComponent"> 

    <declaration selector="myNS|Button#myselector:over #mysubselector">
        color:#ffffff;
        font-size:bold
    </declaration>

    ... other styles

</styles>

除了让用户了解您的组件的安全性考虑因素之外，您还可以加载XML并创建CSSStydeclaration。

只拆分和解析选择器，您可以创建一系列CSSCondition和CSSSelector来添加到CSSStyleDeclaration。要解析选择器，我们使用一个小循环搜索“＃”，“：”和“。”并拆分字符串，保留找到的CSS条件的序列。

var selectors:Array = [];

// first selector
var conditions:Array = [
   new CSSCondition(CSSConditionKind.ID, 'myselector');
   new CSSCondition(CSSConditionKind.PSEUDO, 'over');
];

// here you have to find and expand the namespace
ancestor:CSSSelector = new CSSSelector('com.myComponent.Button', conditions);
selectors.push(selector);

// second selector
var conditions:Array = [
   new CSSCondition(CSSConditionKind.ID, 'mysubselector');
];

selector:CSSSelector = new CSSSelector('', conditions, ancestor);
selectors.push(selector);

// Empty style declaration
new CSSStyleDeclaration(selectors, styleManager, false);

然后你可以用@sixtyfootersdude创建的函数解析parseCSS（）的CSS属性，但是使用假选择器：

var myCSS:String = "#fake " + "{" + cssTextReadedFromXML + "}";
var style:StyleSheet = new StyleSheet();
sheet.parseCSS(myCSS);

// here you have your parsed properties
var list:Object = sheet.getStyle('#fake');

然后，您可以将属性添加到CSSStyleDeclaration并通过setStyle方法应用它们，并在示例中应用声明。

我试图解决这个问题的方法越来越少。

寻找用AS3编写的CSS解析器

2 个答案: