我可以为我的TextField指定多个CSS类吗？

Question

我正在添加一个带有html文本的TextField。我正在申请StyleSheet。

如何在我的HTML元素应用多个类，像这样

<span class='classOne classTwo'>my text </span> 

我尝试这样做，它看起来像闪光灯不能处理这个问题，它使没有任何样式的文本。

Answer 1

这可能是由于Flash解释HTML的方式与大多数主要供应商浏览器解释HTML的方式不同所致。我的猜测是更细致的控制，你可以使用这个例子http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS2AEF3551-BB6C-4e20-8865-83CD7E685263.html，并建立一些可以让你加载多个类的Flash文本引擎中使用的风格。

只有想到的其他东西是使用某种正常flash组件外的html包装来显示将解释类属性如何您期望的html。

Answer 2

这将最终破裂，但是如果你只是想几个款式相结合，你可以做这样的事情，不会有使用FTE或TLF以上的建议：

巢<跨度>与另一个<跨度>内的第一种风格具有第二种风格。内部跨度的样式属性将覆盖外部跨度上的样式属性，就像CSS继承一样。

package 
{ 
    import flash.display.Sprite; 
    import flash.text.StyleSheet; 
    import flash.text.TextField; 

    public class CSSTEst extends Sprite 
    { 
     public function CSSTEst() 
     { 
      var style:StyleSheet = new StyleSheet(); 
      var redStyle:Object = {}; 
      redStyle.color = "#FF0000"; 
      style.setStyle(".darkRed", redStyle); 
      var bigStyle:Object = {}; 
      bigStyle.fontWeight = "bold"; 
      bigStyle.fontSize = 36; 
      style.setStyle(".big", bigStyle); 
      var greenStyle:Object = {}; 
      greenStyle.color = "#00FF00"; 
      style.setStyle(".green", greenStyle); 
      var tf:TextField = new TextField(); 
      tf.styleSheet = style; 
      tf.htmlText = "<span class='darkRed'><span class='big'>Red</span></span> apple, Granny's <span class='big'>big <span class='green'>green</span> apple</span>"; 
      tf.width = tf.textWidth + 10; 
      addChild(tf); 
     } 
    } 
} 

Answer 3

样式表可以容纳带有空格的名称，因此，例如“classOne classTwo”是一个有效的标识符 - 所有你需要做的就是引用的风格结合成一种新的风格的结合名下，和你的文本会正确显示。

package 
{ 
    import flash.text.StyleSheet; 
    import flash.text.TextField; 


    public class MyWildTextField extends TextField 
    { 
     private var _combinedStyleSheet:StyleSheet = new StyleSheet(); 
     private var _styleSheet : StyleSheet; 

     override public function set htmlText(text:String) : void { 
      combineStyles(text); 
      super.styleSheet = _combinedStyleSheet; 
      super.htmlText = text; 
     } 

     private function combineStyles(text:String):void { 
      for each (var name : String in styleSheet.styleNames) 
       _combinedStyleSheet.setStyle(name, styleSheet.getStyle(name)); 

      var styles:Array = extractStyleNames(text); 
      for each(var style:String in styles) addCombinedStyle(style); 
     } 

     private function extractStyleNames(text:String):Array { 
      var xml:XML = XML(text); 
      var styles:Array = []; 
      var allNodes:XMLList = xml..*; 
      var allAttributes:XMLList = allNodes.attributes(); 
      styles = addStyleNames (allAttributes, styles); 
      styles = addStyleNames (xml.attributes(), styles); 
      return styles; 
     } 

     private function addCombinedStyle(style:String):void { 
      if(style.indexOf(" ") > -1) 
       _combinedStyleSheet.setStyle("."+style, getCombinedStyle(style)); 
     } 

     private function addStyleNames (attributes:XMLList, arr:Array) : Array { 
      for each(var node:XML in attributes) 
       if(node.name() == "class") 
        arr.push(node.valueOf().toString()); 
      return arr; 
     } 

     private function getCombinedStyle(style:String):Object { 
      var combined:Object = {}; 
      for each(var name:String in style.split(" ")) 
       combined = addStyleProperties(combined, name); 
      return combined; 
     } 

     private function addStyleProperties(combined:Object, name:String):Object { 
      var style:Object = styleSheet.getStyle("."+name); 
      for(var prop:String in style) 
       combined[prop] = style[prop]; 
      return combined; 
     } 

     override public function get styleSheet() : StyleSheet { 
      return _styleSheet; 
     } 

     override public function set styleSheet (styleSheet:StyleSheet) : void { 
      _styleSheet = styleSheet; 
     } 
    } 
}