Могу ли я указать несколько классов CSS для моего TextField?

Question

Я добавляю TextField с HTML-текстом. Я применяю StyleSheet к нему.

Как мне применить несколько классов к моему html-элементу, вот так

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

Я попробовал это, и похоже, что Flash не может справиться с этим, он отображает текст без каких-либо стилей.

Answer 1

StyleSheets может содержать имена с пробелами, поэтому, например, «classOne classTwo» является допустимым идентификатором - все, что вам нужно сделать, это объединить ссылочные стили в новый стиль под объединенным именем, и ваш текст будет отображаться правильно.

Это можно сделать, расширив класс TextField и вручную объединив все ссылочные стили в атрибутах class вашего htmlText в новую таблицу стилей, которая затем передается в super.styleSheet вместо исходногоодин:

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;
        }
    }
}

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

Вероятно, это связано с тем, что Flash интерпретирует HTML по сравнению с тем, как большинство браузеров большинства поставщиков интерпретируют HTML. Я предполагаю, что для более тонкого контроля вы можете использовать этот пример http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS2AEF3551-BB6C-4e20-8865-83CD7E685263.html и создать что-то, что позволит вам загружать несколько классов для стиля, используемого в движке флеш-текста.

Единственное, что приходит на ум, - это использовать какую-то оболочку html вне обычного компонента flash для отображения html, который будет интерпретировать атрибут класса так, как вы ожидаете.