User Guide

726 Chapter 6: Components Dictionary
editable indicates whether the TextArea component is editable (true) or not (false). The
default value is
true.
wordWrap indicates whether the text wraps (true) or not (false). The default value is true.
You can write ActionScript to control these and additional options for the TextArea component
using its properties, methods, and events. For more information, see “TextArea class”
on page 728.
Creating an application with the TextArea component
The following procedure explains how to add a TextArea component to an application while
authoring. In this example, the component is a Comment field with an event listener that
determines if a user has entered text.
To create an application with the TextArea component:
1. Drag a TextArea component from the Components panel to the Stage.
2. In the Property inspector, enter the instance name comment.
3. In the Property inspector, set parameters as you wish. However, leave the text parameter blank,
the editable parameter set to
true, and the password parameter set to false.
4. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code:
textListener = new Object();
textListener.handleEvent = function (evt){
if (comment.length < 1) {
Alert(_root, "Error", "You must enter at least a comment in this field",
mxModal | mxOK);
}
}
comment.addEventListener("focusOut", textListener);
This code sets up a focusOut event handler on the TextArea comment instance that verifies
that the user typed something in the text field.
5. Once text is entered in the comment instance, you can get its value as follows:
var login = comment.text;
Customizing the TextArea component
You can transform a TextArea component horizontally and vertically while authoring and at
runtime. While authoring, select the component on the Stage and use the Free Transform tool or
any of the Modify > Transform commands. At runtime, use
UIObject.setSize() or any
applicable properties and methods of the Te x t A r e a cl as s .
When a TextArea component is resized, the border is resized to the new bounding box. The scroll
bars are placed on the bottom and right edges if they are required. The text field is then resized
within the remaining area; there are no fixed-size elements in a TextArea component. If the
TextArea component is too small to display the text, the text is clipped.