5.5.2.1.41. TextArea
API DOCS

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

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

Компонент TextArea реализован для блоков Web Client и Desktop Client.

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

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

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

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

  • resizableDirection – задаёт возможность изменения размера области и его направление.

    <textArea id="textArea" resizableDirection="BOTH"/>
    gui textField resizable

    Доступны следующие режимы изменения размера:

    • BOTH - компонент может изменять размер в обоих направлениях. Режим не будет работать, если задан размер компонента в процентах.

    • NONE - компонент не может изменять размер.

    • VERTICAL - компонент может изменять размер только по вертикали. Режим не будет работать, если задана высота компонента в процентах.

    • HORIZONTAL - компонент может изменять размер только по горизонтали. Режим не будет работать, если задана ширина компонента в процентах.

    События изменения размеров области можно отслеживать с помощью слушателя ResizeListener, например:

    textArea.addResizeListener(e -> showNotification("Resized"));

  • 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 (по умолчанию) - событие вызывается во время паузы в наборе текста. Продолжительность паузы можно задать с помощью метода setInputEventTimeout(). Событие изменения текста обрабатывается принудительно перед возможным событием ValueChangeEvent, даже если пользователь не выдержал паузу в наборе текста.

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

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

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

    Стили компонента 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 - caseConversion - cols - contextHelpText - contextHelpTextHtmlEnabled - datasource - datatype - description - editable - enable - height - icon - id - maxLength - property - required - requiredMessage - resizableDirection - rows - settingsEnabled - stylename - tabIndex - trim - visible - width - wordwrap

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

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

API

addResizeListener - addTextChangeListener - addValueChangeListener - applySettings - commit - discard - isModified - saveSettings - setContextHelpIconClickHandler