Первый экран и @Route

Экран (view) в Vaadin — это Java-класс, который наследует компонент-контейнер и описывает, что показать на странице. Чтобы экран открывался по адресу, на класс ставят аннотацию @Route. Это аналог маршрута в обычном веб-фреймворке, только вместо метода контроллера — целый объект с компонентами.

Создаём экран

Создайте папку views рядом с Application.java и в ней файл:

// src/main/java/com/example/blog/views/HelloView.java
package com.example.blog.views;
 
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
 
@Route("hello")
@PageTitle("Привет")
public class HelloView extends VerticalLayout {
 
    public HelloView() {
        add(new H1("Привет, Vaadin!"));
        add(new Paragraph("Эта страница написана на Java."));
    }
}

Сохраните файл: devtools перезапустит сервер. Откройте http://localhost:8080/hello — на странице заголовок и абзац, а на вкладке браузера надпись «Привет».

Что здесь происходит

Конструктор вызывается при каждом открытии адреса: у каждой вкладки браузера свой объект экрана. Vaadin создаёт экраны через Spring, поэтому в конструктор можно получать сервисы — это пригодится в главе про данные.

Адрес по умолчанию

Если у @Route нет значения, адрес берётся из имени класса: HelloView превращается в hello. Классы MainView и Main получают пустой адрес — корень сайта:

// src/main/java/com/example/blog/views/MainView.java
package com.example.blog.views;
 
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
 
@Route
public class MainView extends VerticalLayout {
 
    public MainView() {
        add(new H1("Админка блога"));
    }
}

Теперь http://localhost:8080/ показывает заголовок «Админка блога». То же самое даёт @Route("") у класса с любым именем.

Как устроена страница

В браузере компонент H1 превращается в обычный тег <h1>, а VerticalLayout — в веб-компонент <vaadin-vertical-layout>. Вы управляете ими только из Java: поменяли текст в обработчике — новый текст появился у пользователя.

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

Забыли @Route или опечатались в адресе — Vaadin не находит экран. В режиме разработки страница показывает:

Could not navigate to 'hello'

Ниже на той же странице Vaadin перечисляет все известные маршруты. Проверьте, что адрес есть в списке и что класс лежит в пакете com.example.blog или вложенном в него: Spring ищет классы только там.