Выбор и структура: радиокнопки, списки, вкладки

В первом уроке главы были поля для ввода текста, даты и флажок. Но часто пользователь не вводит значение, а выбирает его из готового списка: статус статьи, язык, рубрику. Для этого у Vaadin есть три компонента выбора. А когда полей на экране становится много, их раскладывают по вкладкам и сворачиваемым блокам — это компоненты структуры. Соберём из них новую версию экрана черновика.

Радиокнопки

RadioButtonGroup показывает все варианты сразу, выбрать можно только один:

// src/main/java/com/example/blog/views/DraftView.java
package com.example.blog.views;
 
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;
 
@Route("draft")
public class DraftView extends VerticalLayout {
 
    public DraftView() {
        RadioButtonGroup<String> status = new RadioButtonGroup<>("Статус");
        status.setItems("Черновик", "На проверке", "Опубликована");
        status.setValue("Черновик");
        status.addValueChangeListener(event -> Notification.show("Статус: " + event.getValue()));
 
        add(status);
    }
}

На http://localhost:8080/draft три кружка в ряд, отмечен «Черновик». Выберите «Опубликована» — внизу появится «Статус: Опубликована». <String> — тип значения: getValue() вернёт выбранную строку.

Select или ComboBox

Оба компонента — выпадающие списки, разница в поиске:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
Select<String> language = new Select<>();
language.setLabel("Язык");
language.setItems("Русский", "English");
language.setValue("Русский");
 
ComboBox<String> category = new ComboBox<>("Рубрика");
category.setItems("Новости", "Обзоры", "Советы", "Интервью", "Релизы", "События");
category.setPlaceholder("Начните вводить");

Select просто раскрывает список. В ComboBox можно печатать: наберите «ре» — останется «Релизы». Импорты: com.vaadin.flow.component.select.Select и com.vaadin.flow.component.combobox.ComboBox.

Компонент	Когда выбирать
`RadioButtonGroup`	2–5 вариантов, все должны быть видны сразу
`Select`	Короткий список, поиск не нужен
`ComboBox`	Длинный список, нужен поиск по вводу

Вкладки

TabSheet — набор вкладок, у каждой своё содержимое. Переключает их сам:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
TextArea content = new TextArea("Текст");
content.setWidthFull();
 
TabSheet tabs = new TabSheet();
tabs.add(new Tab(VaadinIcon.EDIT.create(), new Span("Текст")), content);
tabs.add(new Tab(VaadinIcon.COG.create(), new Span("Настройки")),
        new VerticalLayout(status, language, category));
tabs.setWidthFull();
 
add(tabs);

Замените прежний add(status) на add(tabs). На экране две вкладки с иконками: «Текст» с полем статьи и «Настройки» со статусом, языком и рубрикой. Вкладку можно создать и проще: tabs.add("Текст", content).

Сворачиваемые блоки

Details — блок с заголовком, который раскрывается по клику. Accordion — несколько таких блоков, из которых открыт не больше одного:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
Details seo = new Details("Поисковики", new TextField("Описание"));
 
Accordion help = new Accordion();
help.add("Как писать заголовок", new Paragraph("Коротко и по делу: до 60 символов."));
help.add("Когда публиковать", new Paragraph("Читатели активнее всего утром в будни."));
help.close();
 
add(seo, help);

Под вкладками появятся свёрнутые «Поисковики» и две подсказки. Без help.close() первая панель Accordion была бы открыта.

Иконки

VaadinIcon — перечисление из более чем 600 иконок. create() возвращает компонент Icon, который настраивается как любой другой:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
Icon tip = VaadinIcon.LIGHTBULB.create();
tip.setColor("orange");
tip.setSize("20px");
tip.setTooltipText("Сначала заполните заголовок");
add(tip);

Рядом появится оранжевая лампочка, при наведении — подсказка. Иконки также принимают Button, Tab и SideNavItem. Импорты — из пакета com.vaadin.flow.component.icon.

Частая ошибка

Вместо TabSheet взяли Tabs, а содержимое положили рядом:

// src/main/java/com/example/blog/views/DraftView.java (неправильно)
Tabs tabs = new Tabs(new Tab("Текст"), new Tab("Настройки"));
add(tabs, content, settings);

Ошибки нет, но при клике по вкладкам на экране ничего не меняется — видно оба блока сразу. Tabs — только полоса с вкладками, содержимое нужно прятать самому в addSelectedChangeListener. Для обычного случая «вкладка — свой блок» берите TabSheet.

Спасибо, что читаете!