multiValuePicker

ДЕМО

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

XML-элемент

multiValuePicker

Java-класс

JmixMultiValuePicker

Атрибуты

id - alignSelf - allowCustomValue - 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

Обработчики

AttachEvent - BlurEvent - ComponentValueChangeEvent - CustomValueSetEvent - DetachEvent - FocusEvent - formatter - statusChangeHandler - validator

Элементы

actions - formatter - prefix - suffix - tooltip - validator

Основы

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

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

<multiValuePicker id="stringsValuesPicker" label="Favourite colors">
    <actions>
        <action id="multiValueSelect" type="multi_value_select">
            <properties>
                <property name="javaClass" value="java.lang.String"/>
            </properties>
        </action>
        <action id="valueClear" type="value_clear"/>
    </actions>
</multiValuePicker>

Когда пользователи нажимают на кнопку выбора значения, появляется экран Select Value. Здесь они могут добавлять новые значения в список результатов или удалять существующие. Чтобы добавить значение, они могут либо нажать кнопку Add, либо нажать Enter.

multi value picker
Вы можете создать собственный экран Select Value. Этот экран должен реализовывать интерфейс 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, такие как String, Integer, Long, Double, BigDecimal, Date, LocalDate, LocalTime, LocalDateTime, OffsetTime, OffsetDateTime, Date, Time, UUID и java.sql.Date, java.sql.Time.

    Вы можете указать Java-класс, представляющий тип данных выбранного значения, с помощью свойства javaClass.

    Например, в предыдущем примере действие multi_value_select использует Java-класс java.lang.String.

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

    ДЕМО

    Используйте свойство enumClass, чтобы указать класс перечисления, который представляет тип данных выбранного значения.

    <multiValuePicker id="enumValuesPicker" label="Onboarding statuses">
    <actions>
        <action id="multiValueSelect" type="multi_value_select">
            <properties>
                <property name="enumClass"
                          value="com.company.onboarding.entity.OnboardingStatus"/>
            </properties>
        </action>
        <action id="valueClear" type="value_clear"/>
    </actions>
</multiValuePicker>

    При работе с перечислениями (enum) на экране Select Value генерируется comboBox, предоставляющий выпадающий список доступных значений перечисления.

  • Экземпляры сущностей

    ДЕМО

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

    <multiValuePicker id="entityValuesPicker" label="Departments">
    <actions>
        <action id="multiValueSelect" type="multi_value_select">
            <properties>
                <property name="entityName" value="Department"/>
                <property name="useComboBox" value="true"/>
            </properties>
        </action>
        <action id="valueClear" type="value_clear"/>
    </actions>
</multiValuePicker>

    Свойство useComboBox управляет тем, следует ли использовать entityComboBox на экране Select Value. Значение по умолчанию - 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