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