uiText

Strictly speaking, the uiText component is not a UI control - it is not focusable and the user does not interact with the component. It is used to display single or multiline non-editable text¹⁾. Components in the Aspire UI library use the com.ghostwire.ui.controls.uiText class instead of the native flash.text.TextField class to render text because it implements features such as support for the ellipsize and textStyle properties²⁾.

If unconstrained, a uiText instance will automatically resize itself to display all of its specified text. A uiText instance which is allocated less than enough horizontal space to show its complete text will display triple periods (”…”), known as an ellipsis, at the end of its displayed text (indicating that there is more text than it is showing). This is applicable only to single-line text.

This feature can be switched off by setting the ellipsize property to false (default value is true).

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.controls.uiText;
 
var txt1:uiText = new uiText("The quick brown fox jumps over the lazy dog.");
 
// ** constrain horizontally **
var txt2:uiText = new uiText("The quick brown fox jumps over the lazy dog.");
txt2.setSize(150,-1); // ** 150 for width, -1 for height indicates use preferred value **
 
// ** constrain horizontally without ellipsis **
var txt3:uiText = new uiText("The quick brown fox jumps over the lazy dog.");
txt3.ellipsize = false;
txt3.setSize(150,-1); // ** 150 for width, -1 for height indicates use preferred value **
 
// ** use a box for easy layout **
var box:uiBox = new uiBox();
box.vertical = true;
box.addChild(txt1);
box.addChild(txt2);
box.addChild(txt3);
 
// ** add to display list **
addChild(box);

You can also modify the ellipsis to use via the static ellipsis property. For example, you may want to set this to a single character Unicode Ellipsis symbol “…” instead of the three characters string ”…”. This property is defined at the class level, so changing this property affects all uiText instances universally in the same application.

To use embedded fonts, first make sure that you have actually embedded the required font glyphs in your SWF.

To make a uiText instance use (available) embedded font glyphs to render its text, set the embedFonts property to true³⁾.

var txt:uiText = new uiText("The quick brown fox jumps over the lazy fox.");
txt.embedFonts = true;

To make all uiText instances in your application use (available) embedded font glyphs to render text, set the static defaultEmbedFonts property to true at the beginning of your application code.

uiText.defaultEmbedFonts = true;

The textStyle property is used to indicate what formatting style to apply to the uiText instance. See Using Text Styles for details.

The uiText component embeds a native flash.text.TextField instance which is responsible for the text rendering. You can access this embedded TextField instances via the read-only textField property.

For more information on the members of the com.ghostwire.ui.controls.uiText class, please refer to the API Reference.