UI Basics
These guides cover the building blocks of a Vaadin user interface. You build a user interface as a tree of components. It consists of ready-made components, such as buttons and text fields, layouts that arrange them, and HTML elements for the structure around them.
If you’re new to Vaadin, start with Compose with Components, which explains how to think in components, and Arrange with Layouts. The other guides each cover a single task, such as showing a notification or handling errors, and you can read them in any order.
To turn your user interface into views that users can navigate between, see Views & Navigation. To build reusable components of your own, see Components.
Localization & Accessibility
These guides don’t cover translating the user interface, or checking that the application is accessible.
To translate the user interface, see the Localization reference. It covers translation files, language selection, the strings of Vaadin components, and number and date formats. To translate the titles of views and the items of the navigation menu, see Translating Titles and Menu Items.
Vaadin components are designed for compliance with WCAG 2.1 level AA. Whether your application complies depends also on how you use them, for example on labels, headings, and color contrast. Some guides point out what to watch for, such as Add Images and Icons for buttons with only an icon. To check the whole application, see Evaluating Web Accessibility from the W3C. Automated checkers, such as axe-core, find some of the problems, but not all of them.
Topics
- Compose with Components
- Learn how to decompose user interfaces into a tree of components and how those components communicate.
- Arrange with Layouts
- Learn how to arrange components horizontally, vertically, and in form grids using Vaadin's built-in layout components.
- Write HTML
- Learn how to create HTML structure in Java using Vaadin's built-in HTML element classes.
- Add Images and Icons
- Learn how to display images and use icons in your Vaadin application.
- Add Dialogs and Popovers
- Learn how to use Confirm Dialog, Dialog, and Popover to present information and collect input in overlays.
- Show a Notification
- Learn how to show notifications to inform users about events, completed actions, and errors.
- Add Styling
- Learn how to style components using theme variants, inline styles, and CSS class names — starting from pure Java.
- Customize the App Icon
- Learn how to replace the browser tab icon, and where to go next for home screen icons and splash screens.
- Add Keyboard Shortcuts
- Learn how to add keyboard shortcuts to buttons and input fields in your Vaadin application.
- Add Drag and Drop
- Learn how to make components draggable and droppable in your Vaadin application.
- Handle Errors
- Learn how to handle unexpected exceptions, navigation errors, and exceptions thrown by application services in a Vaadin Flow application.