Sunday, February 3, 2008

Styling Text In Instances Of Components Using TextFormat

This blog has moved.

this is an extension of a previous entry here.

Text in components or TextFields can be formatted in several ways - applying styles manually in the case of TextFields, applying a style using a TextFormat object, StyleSheets for styling html formatted text, or the StyleManager for setting global styles or styles for all instances of a component.

This article focuses on styling instances of components or TextFields with an embedded font in a TextFormat object.

The TextFormat Object would look something like this:

//let's use red Comic Sans to make it obvious when it's working.
//first embed Comic Sans in the library
//select Linkage Properties on the font, select 'Export for ActionScript' and give it the Class name of 'ComicSans'.
var format:TextFormat=new TextFormat();
format.font=new ComicSans().fontName;

Use the following code to apply this TextFormat style to the following display object types(all of which i've assumed have the instance name 'whichObject'.)



Button, TextArea, TextInput, Label, NumericStepper, RadioButton, CheckBox

whichObject.setStyle("embedFonts", true);
whichObject.setStyle("textFormat", format);


whichObject.textField.setStyle("embedFonts", true); //textField is the item displayed in the combo box
whichObject.textField.setStyle("textFormat", format);
whichObject.dropdown.setRendererStyle("embedFonts", true); //dropdown is the list of options
whichObject.dropdown.setRendererStyle("textFormat", format);


whichObject.setRendererStyle("embedFonts", true);
whichObject.setRendererStyle("textFormat", format);


whichObject.setRendererStyle("embedFonts", true);
whichObject.setRendererStyle("textFormat", format);
whichObject.setStyle("headerTextFormat", format); //styles the datagrid's header

Update to this post here: