Styling TextFieldType.INPUT with a CSS Stylesheet

Posted by
Wayne Helman on October 23, 2010
1 Comment

One thing that has always bothered me about Flash technologies is the relative lack of support for text layout and HTML. I’ve always thought that if Adobe had paid more attention to laying out text, Flash could have become the de-facto method of content delivery online. Instead, we have to jump through a number of hoops to properly present formated text the way standard HTML does. HTML combined with CSS is a flexible and compact method for a number of reasons and AS3 only supports a limited number of those features. One gapping hole in my opinion is that by default, the TextField class when set to TextFieldType.INPUT can only be styled with TextFormat. All other text can be controlled via CSS and the exception of an INPUT field is simply frustrating.

To overcome this deficiency, we can load a CSS stylesheet and transform styles into a TextFormat by using the StyleSheet.transform() method. We can pass in the StyleSheet and a style to apply. Using StyleSheet.getStyle(), we can retrieve an object that contains all of our style information for a specific CSS definition – say, span.myStyle { color: #ffccff; }. The transform() method will convert that style into a TextFormat for us and we now have dynamic CSS styling for out INPUT fields.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

public static function createInputTextField($style:String = null, $css:StyleSheet = null):TextField
{
	 /*
	Usage:
		var css:StyleSheet = new StyleSheet('span.myStyle { color: #ffccff; }');
		var tf:TextField = createInputTextField('span.myStyle', css);
		addChild(tf);
	*/
 
	var input:TextField = new TextField());
	input.type = TextFieldType.INPUT;
	input.border = true;
	input.borderColor = 0x000000;
 
	if($style != null) input.defaultTextFormat = $css.transform($css.getStyle($style));
 
	return input;
 
}

Now, with a single StyleSheet, we can style ALL TextField instances – the way it should be.

Be Sociable, Share!

• 

Leave Your Mark