radioButtonGroup

radioButtonGroup позволяет пользователям выбирать одно значение из предопределённого списка элементов с помощью переключателей.

XML-элемент

radioButtonGroup

Java-класс

JmixRadioButtonGroup

Основы

Простейший вариант использования radioButtonGroup — выбор значения перечисления для атрибута сущности.

<radioButtonGroup id="verticalRadioButtonGroup"
               label="Vertical"
               themeNames="vertical"
               itemsEnum="io.jmix.uisamples.entity.CustomerGrade"/>
<radioButtonGroup id="horizontalRadioButtonGroup"
               label="Horizontal"
               itemsEnum="io.jmix.uisamples.entity.CustomerGrade"/>

В приведенном выше примере сущность User имеет атрибут onboardingStatus типа OnboardingStatus, который является перечислением.

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

radioButtonGroup может получить список элементов из контейнера данных с помощью атрибута itemsContainer. Например:

<data>
    <collection id="productsDc"
                class="io.jmix.uisamples.entity.Product"
                fetchPlan="_local">
        <loader id="productsLoader">
            <query>
                <![CDATA[select e from Product e]]>
            </query>
        </loader>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
<layout>
    <radioButtonGroup id="radioButtonGroup"
                   itemsContainer="productsDc"
                   themeNames="vertical"/>
</layout>

В этом случае radioButtonGroup будет отображать имена экземпляров сущности Hobby, расположенных в контейнере данных hobbiesDc, а его метод getValue() будет возвращать выбранный в данный момент экземпляр сущности.

Формирование списка опций

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

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

<radioButtonGroup id="radioButtonGroupWithList"
                  label="Items List"
                  themeNames="vertical"/>

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

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

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

<radioButtonGroup id="radioButtonGroupWithMap"
                  label="Items Map"
                  themeNames="vertical"/>

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

@ViewComponent
protected JmixRadioButtonGroup<Integer> radioButtonGroupWithMap;
    ComponentUtils.setItemsMap(radioButtonGroupWithMap, 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;
}

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

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

В следующем примере показан декларативный подход.

<radioButtonGroup id="radioButtonGroupWithEnum"
                  label="Items Enum"
                  themeNames="vertical"/>

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

@ViewComponent
protected JmixRadioButtonGroup<CustomerGrade> radioButtonGroupWithEnum;
    radioButtonGroupWithEnum.setItems(CustomerGrade.class);

Настройка активности элементов

itemEnabledProvider позволяет вам динамически управлять состоянием включения отдельных радиокнопок в зависимости от конкретных условий. Отключенные элементы отображаются серым цветом и не могут быть выбраны пользователем. По умолчанию все элементы включены.

@Install(to = "radioButtonGroup", subject = "itemEnabledProvider")
private boolean radioButtonGroupItemEnabledProvider(OnboardingStatus onboardingStatus) {
    if (onboardingStatus != null) {
        return onboardingStatus.getId() != 30;
    }
    return true;
}

Настройка отображения элементов

itemLabelGenerator позволяет вам настроить отображение элементов radioButtonGroup. Это дает вам контроль над текстом, который видят пользователи, позволяя представлять информацию более удобным для пользователя или контекстно-специфичным образом.

@Install(to = "statusRadioButtonGroup", subject = "itemLabelGenerator")
private String statusRadioButtonGroupItemLabelGenerator(
        final OnboardingStatus t) {
    return metadataTools.format(t).toUpperCase();
}

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

Можно настроить рендеринг элементов. Рендерер применяется к каждому элементу для создания компонента, который представляет этот элемент.

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

@Autowired
private UiComponents uiComponents;

@Autowired
private FileStorage fileStorage;

@Supply(to = "rbgRenderer", subject = "renderer")
private ComponentRenderer<HorizontalLayout, User> rbgRendererRenderer() {
    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. Дополнительную информацию смотрите в разделе Рендерер фрагментов.

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

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

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

vertical

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

Lumo

helper-above-field

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

Aura, Lumo

Атрибуты

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

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

itemsContainer

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

itemsEnum

Определяет класс перечисления для создания списка элементов. См. Перечисление предметов.

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

Обработчики

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

Имя Описание

itemEnabledProvider

itemEnabledProvider применяется к каждому элементу этого radioButtonGroup, чтобы определить, должен ли этот элемент быть включен (true) или отключен (false). См. Поставщик, поддерживающий элемент.

itemLabelGenerator

Позволяет настраивать метки, отображаемые для каждого переключателя. См. Настройка меток предметов.

renderer

Устанавливает средство визуализации элемента для этой группы переключателей. См. Рендеринг предметов.

validator

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

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

Элементы

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

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