CODEWITHSUNDEEP
actionscript-3flash
dev.e.loper
dev.e.loper

Reputation: 36034

Can I specify multiple CSS classes for my TextField?

I'm adding a TextField with html text. I'm applying a StyleSheet to it.

How do I apply multiple classes on my html element like so 

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

I tried this and it looks like flash can't handle this, it renders text without any styles.

Upvotes: 1

Views: 944

Answers (3)

weltraumpirat
weltraumpirat

Reputation: 22604

StyleSheets can hold names with spaces, so, for example "classOne classTwo" is a valid identifier - all you have to do is combine the referenced styles into a new Style under the combined name, and your text will be displayed correctly.

You can do this by extending the TextField class and manually combining all referenced styles in the class attributes of your htmlText into a new StyleSheet, which is then passed on to super.styleSheet instead of the original one:

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

Upvotes: 2

Sunil D.
Sunil D.

Reputation: 18193

This will breakdown eventually, but if you just want to combine a couple of styles, you can do something like this and won't have to use FTE or TLF as suggested above:

Nest a <span> with the first style inside of another <span> that has the second style. The style properties of the inner span will override style properties on the outer span, just like CSS inheritance.

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

Upvotes: 1

shaunhusain
shaunhusain

Reputation: 19748

This is probably due to the differences in how Flash interprets HTML versus how most major vendor browsers interpret HTML. My guess is for more fine grained control you could use this example http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS2AEF3551-BB6C-4e20-8865-83CD7E685263.html and build something that will allow you to load in multiple classes for a style used in the flash text engine.

Only other thing that comes to mind is using some sort of html wrapper outside of a normal flash component to display the html that will interpret the class attribute how you expect.

Upvotes: 0

Related Questions