Catalog / Vaadin Cheat Sheet
Vaadin Cheat Sheet
A quick reference guide for Vaadin, covering essential components, layouts, data binding, and themes.
Core Components
Basic UI Components
|
A clickable button that triggers an action.
|
|
A text input field for user input.
|
|
A multi-line text input area.
|
|
Displays static text.
|
|
A boolean selection component.
|
|
A dropdown list for selecting from predefined options.
|
Data Input Components
|
Allows users to select a date from a calendar.
|
|
Allows users to select a specific time.
|
|
Allows users to upload files.
|
Layouts
Layout Managers
|
Arranges components vertically.
|
|
Arranges components horizontally.
|
|
A flexible layout that allows for complex arrangements.
|
|
Arranges components in a grid.
|
|
Arranges components in a form-like structure, typically for data entry.
|
Layout Properties
|
Adds margin around the layout.
|
|
Adds padding inside the layout.
|
|
Adds spacing between components in the layout.
|
|
Sets the width of the layout (e.g., “100%”, “500px”).
|
|
Sets the height of the layout (e.g., “300px”).
|
Data Binding
Binder API
|
Binds UI components to data fields in a Java bean.
|
|
Binds a component to a field in the bean.
|
|
Reads the values from the bean and sets them to the bound components.
|
|
Writes the values from the components back to the bean.
|
|
Validates the bound values.
|
Validation
|
Bean Validation annotation to ensure a field is not null.
|
|
Bean Validation annotation to specify the size of a string field.
|
|
A specialized text field for email input with built-in validation.
|
Theming
Styling with CSS
|
Annotation to define the theme for a Vaadin view.
|
Theme Folder |
CSS files are located in the |
|
Import CSS files directly into a component.
|
CSS Properties |
Use standard CSS properties to style components, such as |
Custom Themes
Create custom themes by defining your own CSS styles and applying them to components. This allows for complete control over the look and feel of your Vaadin application. |
Vaadin provides a set of built-in themes that can be customized or extended to create your own unique theme. |