integerField

integerField имеет многие из тех же функций, что и textField, но принимает только входной сигнал Integer.

XML-элемент

integerField

Java-класс

JmixIntegerField

Основы

ДЕМО

Компонент integerField предназначен для ввода и отображения целых чисел.

Пример использования integerField:

<integerField id="integerField" label="IntegerField"/>
integerField не поддерживает форматирование. Используйте TypedTextField, когда требуется локализованное форматирование чисел или поддержка различных типов данных.

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

ДЕМО

Привязка данных означает связывание визуального компонента с контейнером данных. Изменения в визуальном компоненте или соответствующем контейнере данных могут вызывать обновления друг друга. Смотрите Использование компонентов данных для получения дополнительной информации.

Следующий пример создаёт integerField, связанный с данными. Атрибут сущности должен быть типа Integer.

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <integerField id="integerField" label="Field connected to a container" width="15em"
                     dataContainer="customerDc" property="age"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

Контейнер экземпляра customerDc хранит сущность Customer. Атрибуты dataContainer и property связывают компонент с её атрибутом age.

Шаг

Vaadin

Атрибут step используется для управления значением увеличения или уменьшения при взаимодействии пользователя с полем с помощью стрелок вверх/вниз или кнопок шага. Шаг определяет, на сколько изменяется значение при каждом взаимодействии. Он помогает вам задать уровень точности для поля integerField.

Атрибут step обычно используется в сочетании с атрибутами min и max для определения допустимого диапазона для поля integerField.

Атрибут stepButtonsVisible управляет тем, отображаются ли кнопки для увеличения/уменьшения значения или скрыты.

<integerField step="1"
              stepButtonsVisible="true"
              min="1"
              max="10"
              helperText="Max 10 items"/>

Валидация

Чтобы проверить значения, введённые в компонент integerField, вы можете использовать валидатор в элементе validators.

Доступны следующие предопределённые валидаторы для integerField:

XML-элемент

validators

Предопределённые валидаторы

custom - digits - max - min - negativeOrZero - negative - notNull - positiveOrZero - positive

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

ДЕМО

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

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

small

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

Aura, Lumo

align-left

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

Aura, Lumo

align-center

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

Aura, Lumo

align-right

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

Aura, Lumo

helper-above-field

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

Aura, Lumo

Атрибуты

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

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

autoselect

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

—

clearButtonVisible

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

false

max

Указывает максимальное значение поля. Ввод значения, превышающего max, делает поле недействительным.

—

min

Указывает минимальное значение поля. Ввод значения меньше min делает поле недействительным.

—

step

Устанавливает разрешенные числовые интервалы поля. Определяет, насколько значение будет увеличиваться/уменьшаться при нажатии на кнопки шагов. См. Step.

1

stepButtonsVisible

Устанавливает видимость кнопок увеличения/уменьшения значения в соответствии со значением по умолчанию или заданным step. См. Step.

false

themeNames

Применяет варианты темы к компоненту.

—

value

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

—

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

id - alignSelf - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - placeholder - property - readOnly - required - requiredMessage - tabIndex - title - valueChangeMode - valueChangeTimeout - visible - width

Обработчики

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

Имя Описание

validator

Проверяет значение компонента.

integerField имеет следующие общие обработчики:

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler

Элементы

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

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