3.5.2.1.46. TextArea
ДЕМОНСТРАЦИЯ
API DOCS

Текстовая область − многострочное текстовое поле для редактирования текста.

XML-имя компонента: textArea

TextArea в основном повторяет функциональность TextField и имеет следующие специфические атрибуты:

  • cols и rows задают количество строк и столбцов текста:

    <textArea id="textArea" cols="20" rows="5" caption="msg://name"/>

    Значения width и height имеют приоритет над значениями cols и rows.

  • wordWrap - установите данный атрибут в false, чтобы отключить перенос строк по словам.

    Компонент TextArea поддерживает слушатель TextChangeListener, определённый в родительском интерфейсе TextInputField. События изменения текста обрабатываются асинхронно после ввода, не блокируя сам ввод.

    textArea.addTextChangeListener(event -> {
    int length = event.getText().length();
    textAreaLabel.setValue(length + " of " + textArea.getMaxLength());
});
gui TextArea 2

  • Атрибут textChangeEventMode задаёт режим передачи изменений на сервер для вызова события на серверной стороне. В платформе реализовано 3 режима передачи:

    • LAZY (по умолчанию) - событие вызывается во время паузы в наборе текста. Продолжительность паузы задаётся с помощью метода setTextChangeTimeout() или атрибута textChangeTimeout. Событие изменения текста обрабатывается принудительно перед возможным событием ValueChangeEvent, даже если пользователь не выдержал паузу в наборе текста.

    • TIMEOUT - событие вызывается после периода ожидания. В случае ввода нескольких изменений за один период, на сервер отсылается событие со всеми изменениями, включая последнее. Продолжительность периода ожидания задаётся с помощью метода setTextChangeTimeout() или атрибута textChangeTimeout.

      В случае, если ValueChangeEvent может случиться до истечения периода ожидания, событие TextChangeEvent обрабатывается до его истечения, при условии, что набранный текст был изменён после предыдущего TextChangeEvent.

    • EAGER - событие вызывается незамедлительно после каждого изменения текста, то есть после каждого нажатия клавиш. Запросы отправляются по отдельности и обрабатываются последовательно один за другим. Тем не менее асинхронная передача событий изменения на сервер позволяет не блокировать дальнейший ввод текста.

  • textChangeTimeout определяет продолжительность паузы при наборе текста или период ожидания, когда режим передачи изменений LAZY или TIMEOUT.

    Стили компонента TextArea

    В веб-клиенте с темой, основанной на Halo, к компоненту TextArea можно применить предопределенные стили. Стили задаются в XML-дексрипторе или контроллере экрана с помощью атрибута stylename:

    <textArea id="textArea"
          stylename="borderless"/>

    Чтобы применить стиль программно, выберите одну из констант класса HaloTheme с префиксом компонента TEXTAREA_:

    textArea.setStyleName(HaloTheme.TEXTAREA_BORDERLESS);

    • align-center - выравнивание текста по центру области.

    • align-right - выравнивание текста по правому краю области.

    • borderless - удаляет рамку и фон текстовой области.

Атрибуты textArea

align - caption - captionAsHtml - caseConversion - cols - contextHelpText - contextHelpTextHtmlEnabled - conversionErrorMessage - css - dataContainer - datatype - description - descriptionAsHtml - editable - enable - box.expandRatio - height - htmlSanitizerEnabled - icon - id - inputPrompt - maxLength - property - required - requiredMessage - responsive - rows - settingsEnabled - stylename - tabIndex - textChangeEventMode - textChangeTimeout - trim - visible - width - wordWrap

Предопределенные стили textArea

align-center - align-right - borderless - huge - large - small - tiny

API

addTextChangeListener - addValueChangeListener - addValidator - commit - discard - isModified - setContextHelpIconClickHandler