textArea

textArea — поле ввода для ввода нескольких строк текста.

XML-элемент

textArea

Java-класс

JmixTextArea

Основы

ДЕМО

Используйте textArea для многострочного текста, например комментариев или описаний.

<textArea id="textArea" value="Great job. This is excellent!" label="Comment"
          valueChangeMode="EAGER" maxLength="140" helperText="29/140"/>
<textArea id="textArea2" value="Everything you do works great!" label="Additional comment"/>

Если не задана фиксированная высота, компонент автоматически подстраивает высоту под содержимое. Минимальная и стандартная высота - две строки текста.

textArea связанный с данными

ДЕМО

Используйте атрибуты dataContainer и property, чтобы связать textArea с атрибутом сущности типа String. Контейнер данных предоставляет экземпляр сущности, а property указывает редактируемый атрибут.

Пример создания textArea с привязкой к данным:

XML
<data>
    <instance id="orderDc"
              class="io.jmix.uisamples.entity.Order"
              fetchPlan="_local"/>
</data>
<layout>
    <textArea id="textArea" label="Order description"
              dataContainer="orderDc" property="description"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>
Java
@ViewComponent
protected InstanceContainer<Order> orderDc;
@ViewComponent
protected Span spanValue;

@Autowired
protected Metadata metadata;

@Subscribe
protected void onInit(InitEvent event) {
    Order order = metadata.create(Order.class);
    order.setDescription("Deliver as quickly as possible.");
    orderDc.setItem(order);
}

@Subscribe("textArea")
protected void onTextAreaValueChange(ComponentValueChangeEvent<JmixTextArea, String> changeEvent) {
    spanValue.setText(orderDc.getItem().getDescription());
}

Убедитесь, что атрибут сущности, к которому выполняется привязка, имеет строковый тип. В отличие от textField, textArea специально предназначен для работы с текстовыми данными.

Изменяемая текстовая область

ДЕМО

Добавьте класс изменения размера, чтобы пользователь мог растягивать текстовую область по горизонтали, вертикали или в обоих направлениях. CSS задаёт соответствующее значение resize и включает обработку переполнения.

XML
<textArea id="textArea" label="Standard TextArea"/>
<textArea id="resizableBothTextArea" label="Resizeable TextArea"
          classNames="resizable-both"
          themeNames="helper-above-field"
          helperText="Both direction"/>
<textArea id="resizableVerticalTextArea" label="Resizeable TextArea"
          classNames="resizable-vertical"
          themeNames="helper-above-field"
          helperText="Vertical direction"/>
<textArea id="resizableHorizontalTextArea" label="Resizeable TextArea"
          classNames="resizable-horizontal"
          themeNames="helper-above-field"
          helperText="Horizontal direction"/>
CSS
.resizable-both {
    resize: both;
    overflow: auto;
    padding-bottom: unset;
}

.resizable-vertical {
    resize: vertical;
    overflow: auto;
    padding-bottom: unset;
}

.resizable-horizontal {
    resize: horizontal;
    overflow: auto;
    padding-bottom: unset;
}

Варианты темы

ДЕМО

Используйте атрибут themeNames, чтобы применить один или несколько вариантов темы.

Вариант Описание Поддерживается в

small

Уменьшает размер компонента.

Aura, Lumo

align-left

Выравнивает значение поля по левому краю.

Aura, Lumo

align-center

Выравнивает значение поля по центру.

Aura, Lumo

align-right

Выравнивает значение поля по правому краю.

Aura, Lumo

helper-above-field

Размещает вспомогательный текст над полем, под меткой.

Aura, Lumo

Атрибуты

textArea имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

id

Задаёт идентификатор компонента.

—

enabled

Определяет, может ли пользователь взаимодействовать с компонентом.

true

helperText

Задаёт вспомогательный текст рядом с компонентом.

—

label

Задаёт подпись компонента.

—

placeholder

Задаёт текст заполнителя для пустого поля.

—

readOnly

Определяет, может ли значение быть изменено пользователем.

false

value

Задаёт значение компонента.

—

visible

Управляет отображением компонента.

true

dataContainer

Указывает контейнер данных, предоставляющий привязанную сущность.

—

property

Указывает атрибут сущности, связанный с компонентом.

—

height

Задаёт высоту компонента.

—

maxHeight

Устанавливает максимальную высоту компонента.

—

maxWidth

Устанавливает максимальную ширину компонента.

—

minHeight

Устанавливает минимальную высоту компонента.

—

minWidth

Устанавливает минимальную ширину компонента.

—

width

Задаёт ширину компонента.

—

alignSelf

Переопределяет выравнивание компонента внутри его родительского макета.

AUTO

colspan

Устанавливает количество столбцов, занимаемых в макете формы.

1

classNames

Добавляет имена классов CSS в компонент.

—

clearButtonVisible

Определяет, отображается ли в поле кнопка очистки.

false

css

Определяет встроенные свойства CSS.

—

maxRows

Устанавливает максимальное количество строк.

—

minRows

Устанавливает минимальное количество строк.

2

errorMessage

Устанавливает сообщение, отображаемое, когда компонент недействителен.

—

maxLength

Устанавливает максимальную допустимую длину ввода.

—

minLength

Устанавливает минимальную допустимую длину ввода.

—

pattern

Устанавливает регулярное выражение, используемое для проверки ввода.

—

required

Определяет, требует ли компонент значения.

false

allowedCharPattern

Ограничивает ввод символами, соответствующими указанному регулярному выражению.

—

ariaLabel

Определяет доступную метку, когда подходящей видимой метки не существует.

—

ariaLabelledBy

Идентифицирует другой компонент, предоставляющий доступную метку.

—

autocapitalize

Управляет автоматической регистрацией заглавных букв для пользовательского ввода.

—

autocomplete

Управляет автозаполнением поля браузером.

—

autocorrect

Управляет автоматической коррекцией пользовательского ввода.

—

autofocus

Перемещает фокус клавиатуры на компонент при открытии экрана.

false

autoselect

Установите значение true, чтобы значение поля всегда автоматически выбиралось, когда поле получает фокус, в противном случае — значение false.

—

focusShortcut

Определяет сочетание клавиш, которое фокусирует компонент.

—

tabIndex

Управляет положением компонента в порядке фокуса клавиатуры.

0

trimEnabled

Если true, компонент обрезает пробелы в начале и в конце ввода. Например, строка с пробелами перед aaa и после bbb будет сохранена как aaa bbb. Настройте этот параметр для всего приложения, используя свойство jmix.ui.component.default-trim-enabled.

—

textArea имеет следующие общие атрибуты:

themeNames

Обработчики

textArea имеет следующие уникальные обработчики:

Имя Описание

AttachEvent

Запускается, когда компонент прикреплен к пользовательскому интерфейсу.

BlurEvent

Вызывается, когда компонент теряет фокус.

ClientValidatedEvent

Возникает после изменения состояния допустимости компонента при проверке на стороне клиента.

ComponentValueChangeEvent

Вызывается при изменении значения компонента.

CompositionEndEvent

Вызывается, когда завершается сеанс составления текста.

CompositionStartEvent

Вызывается при запуске сеанса составления текста.

CompositionUpdateEvent

Вызывается при изменении текста в активном сеансе композиции.

DetachEvent

Запускается, когда компонент отсоединен от пользовательского интерфейса.

FocusEvent

Запускается, когда компонент получает фокус.

InputEvent

Запускается, когда пользователь меняет входное значение.

KeyDownEvent

Запускается, когда пользователь нажимает клавишу, когда компонент находится в фокусе.

KeyPressEvent

Вызывается при нажатии клавиши создания символов.

statusChangeHandler

Обрабатывает изменения статуса проверки компонента.

validator

Добавляет экземпляр валидатор к компоненту.

Элементы

Компонент textArea может содержать следующие вложенные элементы: tooltip, prefix, suffix, и validator.

Смотрите также