Оглавление
Vaadin
Веб-интерфейсы целиком на Java: компоненты, макеты, формы, таблицы и маршруты без JavaScript.
1.Начало работы
- Что такое VaadinКак Vaadin Flow строит веб-интерфейс из Java-кода, чем он отличается от обычного сайта и что мы сделаем в курсе.
- Создание проектаСоздаём проект Vaadin со Spring Boot, разбираем pom.xml, главный класс и запускаем приложение.
- Первый экран и @RouteСоздаём первый экран Vaadin, привязываем его к адресу аннотацией @Route и задаём заголовок вкладки.
2.Интерфейс
- Компоненты: кнопки, поля, уведомленияОсновные компоненты Vaadin: Button, TextField, TextArea, Checkbox, DatePicker и всплывающие уведомления Notification.
- Макеты: VerticalLayout и HorizontalLayoutКак расставлять компоненты на экране: вертикальные и горизонтальные макеты, отступы, выравнивание и растягивание.
- События и обработчикиОбработка нажатий, изменения значений полей, режимы ValueChangeMode и горячие клавиши в Vaadin.
- Каркас приложения: AppLayoutОбщая шапка и боковое меню для всех экранов: AppLayout, SideNav, DrawerToggle и аннотация @Layout.
- Выбор и структура: радиокнопки, списки, вкладкиRadioButtonGroup, Select и ComboBox для выбора из списка, TabSheet для вкладок, Details и Accordion для сворачиваемых блоков, иконки VaadinIcon.
3.Данные и формы
- Сервисы и Spring Data JPAПодключаем базу данных через Spring Data JPA, пишем сервис и получаем его в конструкторе экрана Vaadin.
- Таблица GridПоказываем список статей в компоненте Grid: колонки, заголовки, сортировка, кнопки в ячейках и выбор строки.
- Ленивая загрузка, поиск и сортировка в базеGrid загружает строки страницами из базы: setItems с запросом, VaadinSpringDataHelpers, сортировка и фильтр по заголовку.
- Формы и BinderСвязываем поля формы со свойствами объекта через Binder: forField, bind, readBean, writeBeanIfValid и bindInstanceFields.
- Проверка данных в формеПравила проверки на сущности через Jakarta Validation, BeanValidationBinder, собственные валидаторы и сообщения об ошибках.
- Диалоги: Dialog и ConfirmDialogМодальные окна в Vaadin: просмотр статьи в Dialog, подтверждение удаления через ConfirmDialog и обновление таблицы.
- Правка прямо в таблице: Grid EditorРедактируем заголовок и автора статьи прямо в строке Grid: Editor, Binder, поля в ячейках, сохранение при закрытии и клавиши Enter и Esc.
- Загрузка и скачивание файловОбложка статьи: компонент Upload с UploadHandler из Vaadin 25, хранение файла в базе, показ картинки и ссылка на скачивание через DownloadHandler.
4.Навигация и оформление
- Переходы между экранамиНавигация в Vaadin: ссылки RouterLink, переход из кода через UI.navigate, пункты меню и события перед входом на экран.
- Параметры маршрутаПередаём номер статьи в адресе: HasUrlParameter, необязательный параметр, шаблоны маршрутов и параметры запроса.
- Оформление: Lumo и CSSТема Lumo, варианты компонентов, служебные CSS-классы, свой файл стилей, части компонентов ::part и тёмная тема.
- Перевод интерфейса: I18NProviderМногоязычный интерфейс в Vaadin: файлы переводов в папке vaadin-i18n, getTranslation, выбор языка по браузеру, переключатель языка и своё I18NProvider.
5.Готовое приложение
- Вход и права доступаSpring Security во Vaadin: VaadinSecurityConfigurer, страница входа с LoginForm, аннотации @PermitAll, @RolesAllowed, @AnonymousAllowed и выход.
- Фоновые задачи и PushКак обновить экран из фонового потока: аннотация @Push, UI.access и долгие операции без зависания интерфейса.
- Тесты экрановПроверяем экраны Vaadin без браузера: browserless-test-spring, SpringBrowserlessTest, поиск компонентов и нажатия в тестах.
- Сборка для продакшенаСобираем приложение Vaadin в один JAR, запускаем в production-режиме, задаём порт и настройки сервера.