Using CSS (Cascading Style Sheets) in Action Script - Helper class (for TextField, Label Control, or other text control)

This is a helper class for using Cascading Style Sheets for the assignment of different properties with CSS.

import flash.text.*;
import fl.controls.* 

var ss:StyleSheet = new StyleSheet();
s.parseCSS(".lblStyle{ font-size:12;font-family: Arial;color:#000000; } .textFieldStyle{font-size:12;font-family: Arial;color:#FF0000;}")

var lbl:Label = new Label();
CssHelper.setStyle(lbl.textField, ss, ".lblStyle");

var tf:TextField = new TextField();
CssHelper.setStyle(tf, ss, ".textFieldStyle");

This is a sample CSS that you could store in an XML file:

<config>
  <css>
    .sample1 {
     font-size:12;
     font-family: Arial;
     embed-fonts: true;
     width: 200px;
     auto-size: center;
    }
  </css>
</config>

...

var ss:StyleSheet = new StyleSheet();
ss.parseCSS(myXml.css.toString());

var lbl:Label = new Label();
CssHelper.setStyle(lbl.textField, ss, ".sample1");

And here is the helper class:

/*
 * Usage:
 * import flash.text.*;
 * import fl.controls.* 
 *
 * var ss:StyleSheet = new StyleSheet();
 * s.parseCSS(".lblStyle{ font-size:12;font-family: Arial;color:#000000; } .textFieldStyle{font-size:12;font-family: Arial;color:#FF0000;}")
 *
 * var lbl:Label = new Label();
 * CssHelper.setStyle(lbl.textField, ss, ".lblStyle");
 *
 * var tf:TextField = new TextField();
 * CssHelper.setStyle(tf, ss, ".textFieldStyle");
 * 
 * Sample CSS - note that if you embed fonts the font must be embeded as resource in the swf file as well:
 * .sample1{
 *  font-size:12;
 *  font-family: Arial;
 *  embed-fonts: true;
 *  width: 200px;
 *  auto-size: center;
 * }
 * 
 * Allowed CSS properties:
 * 
 * font-size (e.g. 12px)
 * color (e.g. #FF0000)
 * font-family (e.g. Arial)
 * font-style (e.g. italic)
 * font-weight (e.g. bold)
 * text-decoration (e.g. underline)
 * text-align (e.g. center or left)
 * text-indent (e.g. 5)
 * margin-left (e.g. 5)
 * margin-right (e.g. 5)
 * letter-spacing (e.g. 5)
 * leading (e.g. 5)
 * kerning (e.g. true)
 * auto-size (e.g. center or right)
 * word-wrap (e.g. true)
 * embed-fonts (e.g. true)
 * left (e.g. 5)
 * top (e.g. 5)
 * width (e.g. 5)
 * height (e.g. 5)
 * 
 */

package {
    
    import fl.controls.Label;
    import fl.core.UIComponent;
    import flash.text.TextFormat;
    import flash.text.StyleSheet;
    import flash.text.TextField;
    
    public class CssHelper extends Object {
        
        public static function setStyle(textField:TextField, ss:StyleSheet, className:String, styleRefinement:Object = null):void{
            if(ss == null){
                return;
            }
            var style:Object = ss.getStyle(className);
            if(styleRefinement != null){
                for(var each:String in styleRefinement){
                    style[each] = styleRefinement[each];
                }
            }
            if(CssHelper.hasEnumerableProperties(style)){
                if(style.hasOwnProperty("backgroundColor")){ textField.opaqueBackground = Number(style.backgroundColor.split("#").join("0x"));}
                var comp:UIComponent = textField.parent as UIComponent;
                if(comp != null){
                    comp.setStyle("textFormat", CssHelper.styleToTextFormat(style, textField.defaultTextFormat));
                    CssHelper.setCommonPropertiesComponent(style, comp);
                }else{
                    textField.setTextFormat(CssHelper.styleToTextFormat(style, textField.defaultTextFormat));
                    CssHelper.setCommonPropertiesTextField(style, textField);
                    
                }
            }
        }
        
        public static function hasEnumerableProperties(object:Object):Boolean{
            if(object == null) return false;
            for(var each:String in object){
                return true;
            }
            return false;
        }
        
        private static function styleToTextFormat(style:Object, defaultTextFormat:TextFormat = null):TextFormat{

            var tf:TextFormat = new TextFormat();
            if(defaultTextFormat != null){
                tf.align = defaultTextFormat.align;
                tf.blockIndent = defaultTextFormat.blockIndent;
                tf.bold = defaultTextFormat.bold;
                tf.bullet = defaultTextFormat.bullet;
                tf.color = defaultTextFormat.color;
                tf.font = defaultTextFormat.font;
                tf.indent = defaultTextFormat.indent;
                tf.italic = defaultTextFormat.italic;
                tf.kerning = defaultTextFormat.kerning;
                tf.leading = defaultTextFormat.leading;
                tf.leftMargin = defaultTextFormat.leftMargin;
                tf.letterSpacing = defaultTextFormat.letterSpacing;
                tf.rightMargin = defaultTextFormat.rightMargin;
                tf.size = defaultTextFormat.size;
                tf.tabStops = defaultTextFormat.tabStops;
                tf.target = defaultTextFormat.target;
                tf.underline = defaultTextFormat.underline;
                tf.url = defaultTextFormat.url;
            }
            if(style.hasOwnProperty("fontSize")){
                tf.size = style.fontSize.split("px").join("").split("pt").join("");
            }
            if(style.hasOwnProperty("color")){
                tf.color = parseInt(style.color.split("#").join("0x"));
            }
            if(style.hasOwnProperty("fontFamily")){
                tf.font = style.fontFamily;
            }
            if(style.hasOwnProperty("fontStyle")){
                tf.italic = (style.fontStyle.toLowerCase() === "italic");
            }
            if(style.hasOwnProperty("fontWeight")){
                tf.bold = (style.fontWeight.toLowerCase() === "bold");
            }
            if(style.hasOwnProperty("textDecoration")){
                tf.underline = (style.textDecoration.toLowerCase() === "underline");
            }
            if(style.hasOwnProperty("textAlign")){
                tf.align = style.textAlign;
            }
            if(style.hasOwnProperty("textIndent")){
                tf.indent = style.textIndent.split("px").join("");
            }
            if(style.hasOwnProperty("marginLeft")){
                tf.leftMargin = style.marginLeft.split("px").join("");
            }
            if(style.hasOwnProperty("marginRight")){
                tf.rightMargin = style.marginRight.split("px").join("");
            }
            if(style.hasOwnProperty("letterSpacing")){
                tf.letterSpacing = style.letterSpacing.split("px").join("");
            }
            if(style.hasOwnProperty("leading")){
                tf.leading = style.leading.split("px").join("");
            }
            if(style.hasOwnProperty("kerning")){
                tf.kerning = (style.kerning.toLowerCase() === "true");
            }
            return tf;
        }
        
        private static function setLabelSize(w:Number, h:Number, lbl:Label):void{
            if(lbl.width != w){
                var diffX:Number = lbl.width - w;
                if(lbl.autoSize == "right"){
                    lbl.x += diffX;
                }else if(lbl.autoSize == "center"){
                    lbl.x += diffX/2;
                }
            }
            lbl.setSize(w, h);
        }
        
        private static function setCommonPropertiesComponent(style:Object, comp:Object):void{
            if(style.hasOwnProperty("left")){
                comp.move(Number(style.left.split("px").join("")), comp.y);
            }
            if(style.hasOwnProperty("top")){
                comp.move(comp.x, Number(style.top.split("px").join("")));
            }
            if(style.hasOwnProperty("width")){
                if(comp is Label) CssHelper.setLabelSize(Number(style.width.split("px").join("")), comp.height, comp as Label);
                else comp.setSize(Number(style.width.split("px").join("")), comp.height);
            }
            if(style.hasOwnProperty("height")){
                if(comp is Label) CssHelper.setLabelSize(comp.width, Number(style.height.split("px").join("")), comp as Label);
                else comp.setSize(comp.width, Number(style.height.split("px").join("")));
            }
            if(style.hasOwnProperty("autoSize") && comp.hasOwnProperty("autoSize") ){
                comp.autoSize = style.autoSize;
            }
            if(style.hasOwnProperty("wordWrap") && comp.hasOwnProperty("wordWrap")){
                comp.wordWrap = (style.wordWrap.toLowerCase() == "true");
            }
            if(style.hasOwnProperty("embedFonts")){
                comp.setStyle("embedFonts", (style.embedFonts.toLowerCase() == "true"));
            }
        }
        
        private static function setCommonPropertiesTextField(style:Object, tf:Object):void{
            if(style.hasOwnProperty("width")){
                tf.width = Number(style.width.split("px").join(""));
            }
            if(style.hasOwnProperty("height")){
                tf.height = Number(style.height.split("px").join(""));
            }
            if(style.hasOwnProperty("left")){
                tf.x = Number(style.left.split("px").join(""));
            }
            if(style.hasOwnProperty("top")){
                tf.y = Number(style.top.split("px").join(""));
            }
            if(style.hasOwnProperty("autoSize")){
                tf.autoSize = style.autoSize;
            }
            if(style.hasOwnProperty("wordWrap")){
                tf.wordWrap = (style.wordWrap.toLowerCase() == "true");
            }
            if(style.hasOwnProperty("embedFonts")){
                tf.embedFonts = (style.embedFonts.toLowerCase() == "true");
            }
        }
        
    }
}

Share this post:   digg     Stumble Upon     del.icio.us     E-mail

Please post your comments:

Name:  
Email (optional): Your email address will not be posted.
Comments: HTML will be ignored, URLs will be converted to hyperlinks  
Enter the text you see in the box: