3.5.2.1.41. Slider
ДЕМОНСТРАЦИЯ

Компонент Slider представляет собой горизонтальную или вертикальную полосу с ползунком. Перетаскивая ползунок с помощью мыши, можно установить числовое значение в заданном диапазоне. Во время перетаскивания отображается числовое значение.

gui slider

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

Тип данных по умолчанию double. С помощью атрибута datatype могут быть установлены другие числовые типы данных: int, long и decimal. Тип данных задается декларативно в XML-дескрипторе или с помощью API в контроллере экрана.

Для создания слайдера, связанного с данными, необходимо использовать атрибуты dataContainer и property. В таком случае тип данных слайдера определяется из атрибута сущности, указанного в параметре property.

В примере для слайдера будет установлен тип данных, соответствующий типу данных атрибута amount сущности Order.

<data>
    <instance id="orderDc" class="com.company.sales.entity.Order" view="_local">
        <loader/>
    </instance>
</data>
<layout>
    <slider dataContainer="orderDc" property="amount"/>
</layout>

Атрибуты компонента slider:

  • max - максимальное значение диапазона, по умолчанию 100.

  • min - минимальное значение диапазона, по умолчанию 0.

  • resolution - количество знаков после запятой для decimal, по умолчанию 0.

  • orientation - горизонтальное или вертикальное расположение слайдера, по умолчанию горизонтальное.

  • updateValueOnClick - если установлено true, то установить ползунок в нужное значение можно кликнув по полосе. Значение по умолчанию false.

В примере указан вертикально расположенный компонент slider с типом данных integer и диапазоном значений от 2 до 20.

<slider id="slider"
        orientation="vertical"
        datatype="int"
        min="2"
        max="20"/>

Значение слайдера может быть получено с помощью метода getValue() и установлено с помощью метода setValue().

Изменение значения слайдера, так же как и любого другого компонента, реализующего интерфейс Field, можно отслеживать с помощью слушателя ValueChangeListener, подписавшись на соответствующее событие.

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

@Inject
private TextField<Integer> textField;

@Subscribe("slider")
private void onSliderValueChange(HasValue.ValueChangeEvent<Integer> event) {
  textField.setValue(event.getValue());
}
Attributes of slider

align - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datatype - description - descriptionAsHtml - enable - box.expandRatio - height - htmlSanitizerEnabled - icon - id - max - min - orientation - property - requiredMessage - resolution - responsive - required - rowspan - stylename - updateValueOnClick - visible - width

API

setContextHelpText - addValueChangeListener