Contents
Vaadin
Web interfaces written entirely in Java: components, layouts, forms, grids and routes without JavaScript.
1.Getting started
- What Vaadin isHow Vaadin Flow builds a web interface from Java code, how it differs from a regular website and what we will build in the course.
- Creating a projectCreate a Vaadin project with Spring Boot, look at pom.xml and the main class, and start the application.
- The first view and @RouteCreate the first Vaadin screen, bind it to an address with the @Route annotation and set the tab title.
2.Building the interface
- Components: buttons, fields, notificationsThe main Vaadin components: Button, TextField, TextArea, Checkbox, DatePicker and the Notification pop-up.
- Layouts: VerticalLayout and HorizontalLayoutHow to place components on a screen: vertical and horizontal layouts, padding, alignment and stretching.
- Events and listenersHandling clicks and field value changes, ValueChangeMode options and keyboard shortcuts in Vaadin.
- The app frame: AppLayoutA shared header and side menu for all screens: AppLayout, SideNav, DrawerToggle and the @Layout annotation.
- Choosing and structuring: radio buttons, lists, tabsRadioButtonGroup, Select and ComboBox for choosing from a list, TabSheet for tabs, Details and Accordion for collapsible blocks, VaadinIcon icons.
3.Data and forms
- Services and Spring Data JPAConnect a database through Spring Data JPA, write a service and receive it in a Vaadin view constructor.
- The Grid componentShow the list of posts in a Grid: columns, headers, sorting, buttons in cells and row selection.
- Lazy loading, search and sorting in the databaseGrid loads rows from the database page by page: setItems with a query, VaadinSpringDataHelpers, sorting and a title filter.
- Forms and BinderBind form fields to object properties with Binder: forField, bind, readBean, writeBeanIfValid and bindInstanceFields.
- Validating form dataRules on the entity with Jakarta Validation, BeanValidationBinder, custom validators and error messages.
- Dialogs: Dialog and ConfirmDialogModal windows in Vaadin: previewing a post in a Dialog, confirming deletion with ConfirmDialog and refreshing the grid.
- Editing right in the grid: Grid EditorEdit a post title and author directly in a Grid row: Editor, Binder, fields in cells, saving on close and the Enter and Esc keys.
- Uploading and downloading filesA post cover image: the Upload component with the Vaadin 25 UploadHandler, storing the file in the database, showing the image and a download link with DownloadHandler.
4.Navigation and styling
- Moving between screensNavigation in Vaadin: RouterLink links, navigating from code with UI.navigate, menu items and before-enter events.
- Route parametersPass the post number in the address: HasUrlParameter, an optional parameter, route templates and query parameters.
- Styling: Lumo and CSSThe Lumo theme, component variants, utility CSS classes, your own stylesheet, component parts with ::part and dark mode.
- Translating the interface: I18NProviderA multilingual interface in Vaadin: translation files in the vaadin-i18n folder, getTranslation, choosing the language from the browser, a language switch and a custom I18NProvider.
5.Finishing the app
- Login and access rightsSpring Security in Vaadin: VaadinSecurityConfigurer, a login page with LoginForm, the @PermitAll, @RolesAllowed and @AnonymousAllowed annotations and logging out.
- Background tasks and PushHow to update a screen from a background thread: the @Push annotation, UI.access and long operations without freezing the interface.
- Testing viewsTest Vaadin views without a browser: browserless-test-spring, SpringBrowserlessTest, finding components and clicking in tests.
- Building for productionBuild a Vaadin application into a single JAR, run it in production mode and set the port and server settings.