radioButtonGroup
radioButtonGroup позволяет пользователям выбирать одно значение из предопределённого списка элементов с помощью переключателей.
XML-элемент |
|
|---|---|
Java-класс |
|
Основы
Простейший вариант использования 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, чтобы применить один или несколько вариантов темы.
| Вариант | Описание | Поддерживается в |
|---|---|---|
|
Располагает элементы вертикально. |
Lumo |
|
Размещает вспомогательный текст над полем, под меткой. |
Aura, Lumo |
Атрибуты
radioButtonGroup имеет следующие уникальные атрибуты:
| Имя | Описание | По умолчанию |
|---|---|---|
Определяет контейнер данных, содержащий список элементов. Компонент отображает имя экземпляра сущности. См. Привязка данных. |
— |
|
Определяет класс перечисления для создания списка элементов. См. Перечисление предметов. |
— |
radioButtonGroup имеет следующие общие атрибуты:
id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - dataContainer - datatype - enabled - errorMessage - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - required - requiredMessage - themeNames - visible - width
Обработчики
radioButtonGroup имеет следующие уникальные обработчики:
| Имя | Описание |
|---|---|
|
|
Позволяет настраивать метки, отображаемые для каждого переключателя. См. Настройка меток предметов. |
|
Устанавливает средство визуализации элемента для этой группы переключателей. См. Рендеринг предметов. |
|
Проверяет значение компонента. |
radioButtonGroup имеет следующие общие обработчики:
Элементы
Компонент radioButtonGroup может содержать следующие вложенные элементы: fragmentRenderer и tooltip.