Using styles with the TextArea component

The TextArea component has its backgroundColor and borderStyle style properties defined on a class style declaration. Class styles override global styles; therefore, if you want to set the backgroundColor and borderStyle style properties, you must create a different custom style declaration on the instance.

If the name of a style property ends in "Color", it is a color style property and behaves differently than noncolor style properties. For more information, see "Using styles to customize component color and text" in Using ActionScript 2.0 Components.

A TextArea component supports the following styles:

Style	Theme	Description
`backgroundColor`	Both	The background color. The default color is white.
`borderStyle`	Both	The TextArea component uses a RectBorder instance as its border and responds to the styles defined on that class. See RectBorder class. The default border style is `"inset"`.
`marginLeft`	Both	A number indicating the left margin for text. The default value is 0.
`marginRight`	Both	A number indicating the right margin for text. The default value is 0.
`color`	Both	The text color. The default value is 0x0B333C for the Halo theme and blank for the Sample theme.
`disabledColor`	Both	The color for text when the component is disabled. The default color is 0x848384 (dark gray).
`embedFonts`	Both	A Boolean value that indicates whether the font specified in `fontFamily` is an embedded font. This style must be set to `true` if `fontFamily` refers to an embedded font. Otherwise, the embedded font is not used. If this style is set to `true` and `fontFamily` does not refer to an embedded font, no text is displayed. The default value is `false`.
`fontFamily`	Both	The font name for text. The default value is `"_sans"`.
`fontSize`	Both	The point size for the font. The default value is 10.
`fontStyle`	Both	The font style: either `"normal"` or `"italic"`. The default value is `"normal"`.
`fontWeight`	Both	The font weight: either `"none"` or `"bold"`. The default value is `"none"`. All components can also accept the value `"normal"` in place of `"none"` during a `setStyle()` call, but subsequent calls to `getStyle()` return `"none"`.
`textAlign`	Both	The text alignment: either `"left"`, `"right"`, `"center"`, or `"justify"`. (The `"justify"` parameter is supported only in Flash Player 8). The default value is `"left"`.
`textIndent`	Both	A number indicating the text indent. The default value is 0.
`textDecoration`	Both	The text decoration: either `"none"` or `"underline"`. The default value is `"none"`.

The TextArea and TextInput components use exactly the same styles and are often used in the same manner. Thus, by default they share the same class-level style declaration.

For example, the following code sets a style on the TextInput declaration, but it affects both TextInput and TextArea components.

_global.styles.TextInput.setStyle("disabledColor", 0xBBBBFF);

To separate the components and provide class-level styles for one and not the other, create a new style declaration.

import mx.styles.CSSStyleDeclaration;
_global.styles.TextArea = new CSSStyleDeclaration();
_global.styles.TextArea.setStyle("disabledColor", 0xFFBBBB);

This example does not check if _global.styles.TextArea existed before overwriting it; it assumes you know it exists and want to overwrite it.

You can make the background of TextArea components transparent by setting the backgroundColor style globally to a value of undefined. You then need to set the backgroundColor style to a color individually for all TextArea components that you do not want to be transparent.

// Give all TextArea components transparent backgrounds.
_global.styles.TextArea.backgroundColor = undefined;

//Make this specific component instance have a white background.
myTextArea2.setStyle( "backgroundColor", "white" );

The TextArea component supports one set of component styles for all text in the field. However, you can also display HTML that is compatible with Flash Player HTML rendering. To display HTML text, set TextArea.html to true.

If you do set the TextArea to display HTML text, the text style is set using the TextField.StyleSheet class (see details for this class in the ActionScript 2.0 Language Reference). For example:

Drag a TextArea component to the Stage, and give it the instance name my_ta.
Enter this code in Actions panel for Frame 1 of the timeline:

var my_styles = new TextField.StyleSheet();
my_styles.setStyle("p", {fontFamily:'Arial,Helvetica,sans-serif', fontSize:'12px', color:'#CC6699'});
my_ta.styleSheet = my_styles;
my_ta.html = true;
my_ta.text = "<p>This is some text</p>";

View comments on LiveDocs