integerSlider

Начиная с Jmix 3.1

integerSlider позволяет выбрать значение типа Integer, перетаскивая ползунок по шкале. Ползунок также можно перемещать клавишами со стрелками.

Для значений типа Double используйте decimalSlider. Чтобы выбрать диапазон значений, используйте integerRangeSlider.

XML-элемент

integerSlider

Java-класс

JmixIntegerSlider

Основы

ДЕМО

По умолчанию слайдер принимает значения от 0 до 100 с шагом 1. Пример использования integerSlider:

<integerSlider id="integerSlider" label="IntegerSlider" width="20em" value="50"/>

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

ДЕМО

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

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

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <integerSlider id="ageSlider" label="Slider connected to a container" width="20em"
                   min="0" max="100" step="1"
                   minMaxVisible="true"
                   dataContainer="customerDc" property="age"/>
</layout>

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

Слайдер отправляет новое значение на сервер, когда пользователь отпускает ползунок. Чтобы значение отправлялось на каждом шаге перетаскивания, установите для атрибута valueChangeMode значение EAGER.

Пустое значение

Слайдер не может показать пустое значение. Когда значения нет, ползунок стоит на значении min, но слайдер считается пустым:

  • Если связанный атрибут равен null, слайдер показывает min, но не записывает его в сущность, и DataContext не регистрирует изменение. Атрибут получает значение, только когда пользователь передвигает ползунок или значение задаётся в коде.

  • Слайдер, не связанный с данными, остаётся пустым, пока пользователь не передвинет ползунок или значение не будет задано в коде.

  • Вызов clear() или setValue(null) перемещает ползунок в min и делает слайдер пустым. Слайдер, связанный с данными, также записывает в атрибут null.

Пока значения нет, метод isEmpty() возвращает true, хотя getValue() возвращает min, а валидаторы получают null. Если для слайдера задан атрибут required, слайдер без значения не проходит валидацию.

Диапазон и шаг

ДЕМО

Атрибуты min и max задают диапазон значений, а step — интервал между ними. Значения, которые может выбрать пользователь, отсчитываются от min: min, min + step, min + 2 * step и так далее.

<integerSlider id="stepSlider" label="With min, max and step" width="20em"
               min="0" max="50" step="5" value="20"
               minMaxVisible="true"
               helperText="Values from 0 to 50 with a step of 5"/>

Значение за пределами диапазона может прийти из связанного атрибута или из кода. Слайдер не заменяет его на min или max, а оставляет как есть и показывает ошибку валидации. Значение проверяют валидаторы min и max, которые добавляются автоматически и обновляются при изменении min или max.

Отображение значения

Vaadin

По умолчанию слайдер показывает текущее значение в пузырьке над ползунком, только пока пользователь взаимодействует с ним. Установите для атрибута valueAlwaysVisible значение true, чтобы значение было видно всегда.

Атрибут minMaxVisible показывает значения min и max под шкалой, как в примере выше.

Валидация

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

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

XML-элемент

validators

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

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

Атрибуты

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

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

max

Задаёт максимальное значение слайдера. Значение больше max делает компонент недействительным. См. Диапазон и шаг.

100

min

Задаёт минимальное значение слайдера. Значение меньше min делает компонент недействительным. Пустой слайдер показывает это значение. См. Пустое значение.

0

minMaxVisible

Показывает значения min и max под шкалой.

false

step

Задаёт интервал между значениями, которые может выбрать пользователь. Шаг должен быть больше 0. См. Диапазон и шаг.

1

value

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

—

valueAlwaysVisible

Определяет, всегда ли отображается текущее значение над ползунком. Если false, значение видно, только пока пользователь взаимодействует со слайдером.

false

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

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

Обработчики

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

Имя Описание

validator

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

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

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler

Элементы

Компонент integerSlider может содержать следующие вложенные элементы: tooltip и validators.

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