multiValuePicker

multiValuePicker работает со списком значений любого типа. Он состоит из текстового поля и набора кнопок, определяемых действиями.

XML-элемент

multiValuePicker

Java-класс

JmixMultiValuePicker

Основы

ДЕМО

multiValuePicker идеально подходит для редактирования списков значений с помощью действий, а не ввода непосредственно в текстовое поле.

Пример базового multiValuePicker:

<multiValuePicker id="stringsValuePicker" label="Strings">
    <actions>
        <action id="select" type="multi_value_select">
            <properties>
                <property name="javaClass" value="java.lang.String"/>
            </properties>
        </action>
        <action id="value_clear" type="value_clear"/>
    </actions>
</multiValuePicker>
<multiValuePicker id="integersValuePicker" label="Integers">
    <actions>
        <action id="select" type="multi_value_select">
            <properties>
                <property name="javaClass" value="java.lang.Integer"/>
            </properties>
        </action>
        <action id="value_clear" type="value_clear"/>
    </actions>
</multiValuePicker>

Когда пользователь нажимает кнопку выбора значения, открывается экран Выбор значения. На нём можно добавлять новые значения в результирующий список и удалять существующие. Чтобы добавить значение, нажмите кнопку Добавить или клавишу Enter.

Можно создать собственный экран Выбор значения. Он должен реализовывать интерфейс MultiValueSelectView и указываться для action в свойстве viewClass или viewId.

Действия

Вы можете добавлять пользовательские или предопределённые действия в ваш multiValuePicker, которые будут отображаться в виде кнопок справа. Сделать это можно двумя способами:

  • XML-дескриптор: Определите ваши действия вложенным элементом <actions> в XML-дескрипторе.

  • Контроллер: Программно добавьте действия в multiValuePicker с помощью метода addAction() в контроллере.

Чтобы добавить действие в Jmix Studio, выберите компонент в XML-дескрипторе экрана или в панели структуры Jmix UI, и нажмите кнопку Add на панели инспектора Jmix UI.

Предопределенные действия

Фреймворк предоставляет два предопределённых действия для multiValuePicker: value_clear и multi_value_select.

Действие multi_value_select заполняет multiValuePicker с помощью экрана выбора значения. Этот экран динамически генерирует компонент для выбора или создания значения, основанный на предоставленном типе данных. Действие multi_value_select может обрабатывать различные типы данных, включая:

Укажите тип данных Java в свойстве javaClass. Например, в предыдущем примере используется java.lang.String.

Значения перечисления

ДЕМО

Укажите в свойстве enumClass класс перечисления, который определяет тип выбранного значения.

<multiValuePicker id="multiValuePicker">
    <actions>
        <action id="select" type="multi_value_select">
            <properties>
                <property name="enumClass" value="io.jmix.uisamples.entity.CustomerGrade"/>
            </properties>
        </action>
        <action id="clear" type="value_clear"/>
    </actions>
</multiValuePicker>

Для перечислений на экране Выбор значения создаётся comboBox с выпадающим списком доступных значений.

Значения сущности

ДЕМО

Укажите в свойстве entityName имя класса сущности, который определяет тип выбранного значения.

<multiValuePicker>
    <actions>
        <action id="select" type="multi_value_select">
            <properties>
                <property name="entityName" value="Customer"/>
            </properties>
        </action>
        <action id="clear" type="value_clear"/>
    </actions>
</multiValuePicker>

Свойство useComboBox определяет, следует ли использовать entityComboBox на экране Выбор значения. Значение по умолчанию — false.

Пользовательские действия

Пользовательские действия для multiValuePicker аналогичны пользовательским действиям, используемым с valuePicker.

Валидация

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

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

XML-элемент

validators

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

custom - decimalMax - decimalMin - digits - doubleMax - doubleMin - email - max - min - negative - negativeOrZero - notBlank - notEmpty - notNull - positive - positiveOrZero - regexp - size

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

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

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

align-left

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

Aura, Lumo

align-center

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

Aura, Lumo

align-right

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

Aura, Lumo

align-start

Выравнивает значение поля по начальной стороне с учетом текущего направления текста.

Aura

align-end

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

Aura

helper-above-field

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

Aura, Lumo

small

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

Aura, Lumo

Атрибуты

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

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

allowCustomValue

Определяет, могут ли пользователи вводить значения, отсутствующие среди доступных элементов.

—

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

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

Обработчики

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

Имя Описание

CustomValueSetEvent

Возникает, когда пользователь вводит в поле пользовательское значение.

formatter

Преобразует значение компонента в текст, отображаемый в поле.

validator

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

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

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - statusChangeHandler

Элементы

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