checkboxGroup

checkboxGroup позволяет пользователям выбирать несколько значений из списка с помощью флажков.

XML-элемент

checkboxGroup

Java-класс

JmixCheckboxGroup

Основы

ДЕМО

В следующем примере два компонента checkboxGroup заполняются значениями перечисления и отображают элементы вертикально и горизонтально.

<checkboxGroup id="verticalCheckboxGroup"
               label="Vertical"
               themeNames="vertical"
               itemsEnum="io.jmix.uisamples.entity.CustomerGrade"/>
<checkboxGroup id="horizontalCheckboxGroup"
               label="Horizontal"
               themeNames="horizontal"
               itemsEnum="io.jmix.uisamples.entity.CustomerGrade"/>

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

Компонент можно связать с атрибутом сущности, которая хранится в контейнере данных.

Чтобы связать checkBoxGroup с атрибутом сущности:

  1. Укажите имя контейнера данных в атрибуте dataContainer.

  2. Укажите имя атрибута сущности в атрибуте property.

<data>
    <instance class="com.company.onboarding.entity.User" id="userDc">
        <fetchPlan extends="_base">
            <property name="hobbies" fetchPlan="_base"/>
        </fetchPlan>
        <loader id="userDl"/>
    </instance>
    <collection class="com.company.onboarding.entity.Hobby" id="hobbiesDc">
        <fetchPlan extends="_base"/>
        <loader id="hobbiesDl">
            <query>
                <![CDATA[select e from Hobby e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <checkboxGroup dataContainer="userDc"
                   property="hobbies"
                   itemsContainer="hobbiesDc"
                   id="checkboxGroup"/>
</layout>

В этом случае checkBoxGroup будет отображать имена экземпляров сущности Hobby, а метод getTypedValue() вернёт коллекцию выбранных экземпляров этой сущности.

Пользовательские элементы

ДЕМО

Для задания списка элементов в checkBoxGroup используйте следующие методы:

Список элементов

Метод setItems() позволяет программно задать элементы компонента.

@ViewComponent
protected JmixCheckboxGroup<Integer> checkboxGroupWithList;
    checkboxGroupWithList.setItems(getItemsList());
protected List<Integer> getItemsList() {
    return List.of(2, 4, 5, 7);
}

Список элементов с описаниями

ComponentUtils.setItemsMap() позволяет вам явно указать строковое описание для каждого значения элемента.

@ViewComponent
protected JmixCheckboxGroup<Integer> checkboxGroupWithMap;
    ComponentUtils.setItemsMap(checkboxGroupWithMap, getItemsMap());
protected Map<Integer, String> getItemsMap() {
    Map<Integer, String> itemsMap = new LinkedHashMap<>();
    itemsMap.put(2, "Two");
    itemsMap.put(4, "Four");
    itemsMap.put(5, "Five");
    itemsMap.put(7, "Seven");
    return itemsMap;
}

Список значений перечисления

ДЕМО

Значения перечисления можно задать как элементы checkBoxGroup декларативно или программно.

Ниже приведён пример декларативного подхода.

<checkboxGroup id="verticalCheckboxGroup"
               label="Vertical"
               themeNames="vertical"
               itemsEnum="io.jmix.uisamples.entity.CustomerGrade"/>
<checkboxGroup id="horizontalCheckboxGroup"
               label="Horizontal"
               themeNames="horizontal"
               itemsEnum="io.jmix.uisamples.entity.CustomerGrade"/>

Пример ниже использует программный подход.

@ViewComponent
protected JmixCheckboxGroup<CustomerGrade> checkboxGroupWithEnum;
    checkboxGroupWithEnum.setItems(CustomerGrade.class);

Ориентация

ДЕМО

Используйте атрибут themeNames, чтобы явно задать расположение элементов:

<checkboxGroup id="verticalCheckboxGroup"
               label="Vertical"
               themeNames="vertical"
               itemsEnum="io.jmix.uisamples.entity.CustomerGrade"/>
<checkboxGroup id="horizontalCheckboxGroup"
               label="Horizontal"
               themeNames="horizontal"
               itemsEnum="io.jmix.uisamples.entity.CustomerGrade"/>

Рендеринг элементов

Есть возможность настроить рендеринг элементов. Для этого вы можете использовать метод setRenderer() или аннотацию @Supply.

@Autowired
private UiComponents uiComponents;
@Autowired
private FileStorage fileStorage;

@Supply(to = "userCheckboxGroup", subject = "renderer")
private ComponentRenderer<HorizontalLayout, User> userCheckboxGroupRenderer() {
    return new ComponentRenderer<>(user -> {
        FileRef fileRef = user.getPicture();
        HorizontalLayout row = uiComponents.create(HorizontalLayout.class);
        row.setAlignItems(FlexComponent.Alignment.END);
        if (fileRef != null) {
            Image image = uiComponents.create(Image.class);
            image.setWidth("30px");
            image.setHeight("30px");
            image.setClassName("user-picture");
            InputStreamDownloadHandler handler =
                    DownloadHandler.fromInputStream(event ->
                            new DownloadResponse(
                                    fileStorage.openStream(fileRef),
                                    fileRef.getFileName(),
                                    fileRef.getContentType(),
                                    -1
                            ));
            image.setSrc(handler);
            row.add(image);
        }
        row.add(new Span(user.getFirstName() + ", " + user.getLastName()));
        return row;
    });
}

Кроме того, элементы можно отображать с помощью вложенного fragmentRenderer. Подробнее см. в разделе FragmentRenderer.

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

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

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

vertical

Располагает элементы вертикально.

Lumo

horizontal

Располагает элементы горизонтально.

Aura

helper-above-field

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

Aura, Lumo

Атрибуты

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

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

itemsContainer

Задаёт контейнер элементов.

—

itemsEnum

Задаёт перечисление элементов.

—

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

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

Обработчики

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

Имя Описание

itemEnabledProvider

Определяет, включен ли каждый элемент.

itemLabelGenerator

Предоставляет текст, отображаемый для каждого элемента.

renderer

Предоставляет компонент для отображения каждого элемента. See Пользовательская презентация товара.

validator

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

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

AttachEvent - ClientValidatedEvent - ComponentValueChangeEvent - DetachEvent - TypedValueChangeEvent - statusChangeHandler

Элементы

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

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