integerRangeSlider
Начиная с Jmix 3.1
integerRangeSlider позволяет выбрать диапазон значений типа Integer. На шкале компонента два ползунка: один задаёт начало диапазона, другой — его конец.
Для значений типа Double используйте decimalRangeSlider. Чтобы выбрать одно значение, используйте integerSlider.
XML-элемент |
|
|---|---|
Java-класс |
|
Основы
По умолчанию слайдер принимает значения от 0 до 100 с шагом 1, а выбранный диапазон занимает всю шкалу. Чтобы задать исходный диапазон, используйте атрибуты startValue и endValue. Если задан только один из них, второй получает значение min или max.
<integerRangeSlider id="integerRangeSlider" label="IntegerRangeSlider" width="20em"
startValue="20" endValue="80"
accessibleNameStart="Minimum" accessibleNameEnd="Maximum"/>Значение
Значение integerRangeSlider — это запись (record) IntegerRangeSliderValue. Её методы start() и end() возвращают начало и конец выбранного диапазона. Значение start() не может быть больше end().
Чтобы задать диапазон в коде, передайте в метод setValue() новый объект IntegerRangeSliderValue(start, end). Метод clear() выбирает весь диапазон от min до max.
integerRangeSlider нельзя связать с контейнером данных, и он не поддерживает валидаторы. Значение слайдера можно получить в контроллере экрана, как показано в примере ниже. Чтобы показать ошибку, задайте атрибут errorMessage и вызовите setInvalid(true) в контроллере.
Использование в качестве фильтра
Слайдер диапазона хорошо подходит для фильтрации данных по числовому атрибуту. В следующем примере пользователь выбирает диапазон возраста, а экран загружает клиентов, чей возраст попадает в этот диапазон.
<data readOnly="true">
<collection id="customersDc"
class="io.jmix.uisamples.entity.Customer"
fetchPlan="_local">
<loader id="customersDl">
<query>
<![CDATA[select e from Customer e
where e.age >= :minAge and e.age <= :maxAge
order by e.age]]>
</query>
</loader>
</collection>
</data>
<layout>
<integerRangeSlider id="ageRangeSlider" label="Age" width="20em"
min="18" max="90" step="1"
startValue="25" endValue="50"
minMaxVisible="true"
accessibleNameStart="Minimum age" accessibleNameEnd="Maximum age"/>
<dataGrid id="customersDataGrid" dataContainer="customersDc"
width="100%" minHeight="20em">
<columns>
<column property="name"/>
<column property="lastName"/>
<column property="age"/>
</columns>
</dataGrid>
</layout>@ViewComponent
protected IntegerRangeSlider ageRangeSlider;
@ViewComponent
protected CollectionLoader<Customer> customersDl;
@Subscribe
protected void onBeforeShow(BeforeShowEvent event) {
loadCustomers(ageRangeSlider.getValue());
}
@Subscribe("ageRangeSlider")
protected void onAgeRangeSliderValueChange(
ComponentValueChangeEvent<IntegerRangeSlider, IntegerRangeSliderValue> event) {
loadCustomers(event.getValue());
}
protected void loadCustomers(IntegerRangeSliderValue range) {
customersDl.setParameter("minAge", range.start());
customersDl.setParameter("maxAge", range.end());
customersDl.load();
}Обработчик ComponentValueChangeEvent передаёт начало и конец выбранного диапазона в параметры запроса загрузчика и заново загружает данные. Слайдер отправляет новое значение на сервер, когда пользователь отпускает ползунок, поэтому экран загружает данные один раз для каждого нового диапазона. Чтобы значение отправлялось на каждом шаге перетаскивания, установите для атрибута valueChangeMode значение EAGER.
Диапазон и шаг
Атрибуты min и max задают диапазон значений, а step — интервал между ними. Значения, которые может выбрать пользователь, отсчитываются от min: min, min + step, min + 2 * step и так далее.
<integerRangeSlider id="stepRangeSlider" label="With min, max and step" width="20em"
min="0" max="50" step="5"
startValue="10" endValue="35"
minMaxVisible="true"
helperText="Values from 0 to 50 with a step of 5"/>Отображение значений
По умолчанию слайдер показывает текущие значения в пузырьках над ползунками, только пока пользователь взаимодействует с ними. Установите для атрибута valueAlwaysVisible значение true, чтобы значения были видны всегда.
Атрибут minMaxVisible показывает значения min и max под шкалой, как в примере выше.
Доступные имена
Программы чтения с экрана озвучивают доступное имя каждого ползунка. По умолчанию имена строятся на основе надписи компонента (атрибут label). Чтобы задать другие имена, используйте атрибуты accessibleNameStart и accessibleNameEnd, как в примере выше.
Атрибуты
integerRangeSlider имеет следующие уникальные атрибуты:
| Имя | Описание | По умолчанию |
|---|---|---|
Задаёт доступное имя ползунка, отвечающего за конец диапазона. См. Доступные имена. |
— |
|
Задаёт доступное имя ползунка, отвечающего за начало диапазона. См. Доступные имена. |
— |
|
Задаёт конец исходного диапазона. Если задан только |
— |
|
Задаёт максимальное значение слайдера. См. Диапазон и шаг. |
|
|
Задаёт минимальное значение слайдера. См. Диапазон и шаг. |
|
|
Показывает значения |
|
|
Показывает индикатор обязательного поля. Компонент не проверяет своё значение. |
|
|
Задаёт начало исходного диапазона. Если задан только |
— |
|
Задаёт интервал между значениями, которые может выбрать пользователь. Шаг должен быть больше 0. См. Диапазон и шаг. |
|
|
Определяет, всегда ли отображаются текущие значения над ползунками. Если |
|
integerRangeSlider имеет следующие общие атрибуты:
id - alignSelf - classNames - colspan - css - enabled - errorMessage - focusShortcut - height - helperText - justifySelf - label - maxHeight - maxWidth - minHeight - minWidth - readOnly - tabIndex - valueChangeMode - valueChangeTimeout - visible - width
Элементы
Компонент integerRangeSlider может содержать вложенный элемент tooltip.