===== EditableTextArea =====

com.ergotech.vib.graphics.EditableTextArea

==== Image Examples ====

| {{:mistudio:graphics:more_layout:text_display_lists:pasted:20260627-100008.png?40|EditableTextArea in the graphics palette}} | {{:mistudio:graphics:more_layout:text_display_lists:pasted:20260627-102043.png?120|EditableTextArea graphic example}} |
| //EditableTextArea in the graphics palette.// | //EditableTextArea graphic example.// |

==== Overview ====

The EditableTextArea graphic is a More Layout text graphic used to enter, edit, and display longer text values.

EditableTextArea is useful when an application needs a larger text entry area for comments, descriptions, notes, instructions, or other multi-line text.

EditableTextArea supports editable text behavior and sends the edited text through its output.

==== Common Uses ====

  * Entering comments or descriptions
  * Editing longer text values
  * Displaying multi-line text
  * Creating notes or instruction areas
  * Sending edited text into application logic
  * Collecting text before writing it to another system

==== Input Behavior ====

EditableTextArea can be updated from an input connection.

The **updateDisplayedValue** port updates the displayed text from logic, a data source, or another component.

==== Output Behavior ====

EditableTextArea sends edited text through **PrimaryOutPort**.

The **sendValueTrigger** port is used to send the edited value to output listeners.

==== EditableTextArea-Specific Behavior ====

EditableTextArea is designed for editable multi-line text.

EditableTextArea-specific settings include:

  * **Name** Sets the name of the EditableTextArea graphic.
  * **Enabled** Controls whether the user can interact with the text area.
  * **Font** Controls the font used for the text.
  * **Text Color** Sets the text color.
  * **Formatter** Controls text or value formatting.
  * **Ignore Focus Lost** Controls whether focus-loss behavior is ignored.
  * **Max Cache Size** Sets the maximum cache size used by the text area.
  * **Maximum Characters** Sets the maximum number of characters allowed.
  * **Overlap** Sets the overlap value.
  * **Resume When Cached** Controls whether cached text behavior resumes.
  * **Wrap Text** Controls whether text wraps inside the text area.
  * **Background Color** Sets the background color.
  * **Editable** Controls whether the text can be edited.
  * **Click Action** Defines a click action.
  * **Visible** Controls whether the EditableTextArea is shown.

==== Logic Ports ====

In the Logic Editor, EditableTextArea includes these default ports:

  * **PrimaryOutPort**
  * **sendValueTrigger**
  * **updateDisplayedValue**
  * **clearDataConnection**

The **PrimaryOutPort** sends the edited text value.

The **sendValueTrigger** port sends the edited value to output listeners.

The **updateDisplayedValue** port updates the displayed text from another source.

The **clearDataConnection** port clears the data connection.

==== Notes ====

Use EditableTextArea when users need to enter or edit longer text.

For static text display, use [[mistudio:design_editor:more_layout:text_display_lists:label|Label]].

For HTML-style or formatted display content, use [[mistudio:design_editor:more_layout:text_display_lists:htmlarea|HTMLArea]].

For data-driven text or formatted values, use [[mistudio:design_editor:basic_layout:indicators:annunciator|Annunciator]].

For general graphic behavior, see [[mistudio:design_editor:active_graphic|Active Graphic]].

==== Related Pages ====

  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:more_layout:start|More Layout]]
  * [[mistudio:design_editor:more_layout:text_display_lists:start|Text, Display, Lists, and Tables]]
  * [[mistudio:design_editor:more_layout:text_display_lists:label|Label]]
  * [[mistudio:design_editor:more_layout:text_display_lists:htmlarea|HTMLArea]]
  * [[mistudio:design_editor:more_layout:text_display_lists:passwordfield|PasswordField]]
  * [[mistudio:design_editor:active_graphic|Active Graphic]]