Text Controls (Text, Label, TextInput, TextArea)

Flex's Text Controls provide the basic elements for displaying and inputting text in your Flex applications. Flex's text controls are in the mx.controls package.

Standard Text controls:

• Label - displays single line, non-editable text
• Text - displays multi-line, non-editable text
• TextInput - allows single-line, editable text input
• TextArea - allows multi-line, editable text input

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
   <mx:Label text="Label Control" />
   <mx:Text text="Text Control" />
   <mx:TextInput text="TextInput Control" />
   <mx:TextArea text="TextArea Control" />
</mx:Application>

TODO: embed example... X_TextControls.swf

Flex text-based controls let you set and get text by using the following properties:

• text - plain text without formatting information.
• htmlText - rich text that represents formatting by using a subset of HTML tags (including bulleted text and URL links)

Below is an example of setting the htmlText property of a TextArea control:

   <!-- Set TextArea htmlText property using MXML. -->
   <mx:TextArea width="200" height="100">
      <mx:htmlText>
         This is an example of setting a <B>TextArea</B> control's <I>htmlText<I> property.
      </mx:htmlText>
   </mx:TextArea>

TODO... embed example

Non-Editable Text Controls

Label Control

The Label control is used for display a single line of non-editable text.

   <mx:Label ... />

TODO... example

Characteristics of a Label control:

• Text can be modified via code, but not by a user
• Text formatting can be set using styles or HTML text
• Alignment and sizing can be set using styles
• The control is transparent and does not have a backgroundColor property
• The control has no borders, so the label appears as text written directly on its background
• The control cannot accept focus
• The Label control automatically resizes when you change the value of the text or htmlText property (if an explicit size is not set)

TODO... example / screenshot

Text Control

The Text control is used for displaying one or multiple lines of non-editable text.

   <mx:Text text="TODO" width="100" height="20" />

TODO... example

Characteristics of a Text control:

• Text can be modified via code, but not by a user
• Text formatting can be set using styles or HTML text
• Sizing and horizontal alignment can be set using styles, vertical alignment is always top
• The control is transparent and does not have a backgroundColor property
• The control has no borders, so the label appears as text written directly on its background
• The control can accept focus
• The control does not support scroll bars, but users can use keys to scroll the text if the text exceeds the control size

Editable Text Controls

TextInput Control

The TextInput control is used for collecting a single line of editable text.

   <mx:TextInput text="TODO" width="100" height="20" />

TODO... example

Characteristics of a TextInput control:

• Text can be modified via code and by a user
• Text formatting can be set using styles or HTML text
• Sizing and alignment can be set using styles
• The control can accept focus

Form Usage

The TextInput control is often used in Flex Forms:

   <mx:Form>
      <mx:FormItem label="TextInput">
         <mx:TextInput width="100" />
      </mx:FormItem>
   </mx:Form>

Both the TextInput and TextArea control (below) support the following properties:

• If you disable a TextArea control, it displays its contents in a different color, represented by the disabledColor style.
• You can set a TextArea control's editable property to false to prevent editing of the text.
• You can set a TextArea control's displayAsPassword property to conceal input text by displaying characters as asterisks.

TextArea Control

The TextArea control is used for collecting multiple lines of editable text.

   <mx:TextArea text="TODO" width="100" height="20" />

TODO... example

Other Text Controls

RichTextEditor Control

The RichTextEditor control is a compound control consisting of a Panel control containing a TextArea and a ControlBar with several controls for specifying text format and links.

   <mx:RichTextEditor htmlText="TODO" width="100" height="20" />

TODO... embed example

HTML Text Support

All of the text controls support an htmlText property for getting/setting HTML styled text.

Learn more about Text Control's htmlText property support...

Common Text Control Events

TODO...

• textInput - mx.events.TextInputEvent
• change - ???

Common Text Control Styles

TODO...

Related Links:

• Controls and Containers
• HtmlText support
• http://livedocs.adobe.com/flex/3/html/help.html?content=textcontrols_04.html