Creating UI in Vaadin Applications
How to use components, create your own, or integrate third party web components.
The Vaadin Design System includes a set of components that you can use to build your UI. The components have a server-side Java API in addition to the TypeScript API for client-side development.
You use a component by first creating it and then adding it to a containing layout.
For example, to add a Button component, create the object and add it to a layout.
Open in a
new tab
new tab
Button button = new Button("Click me!",
event -> event.getSource().setText("Clicked!!!"));
add(button);Topics
- Basic Features
- Common features available in all components.
- Enabled State
- Components that allow user interaction can have three different enabled states.
- Keyboard Shortcuts
- Creating keyboard shortcuts to components for a better user experience.
- HTML Elements
- Flow comes with a set of components for standard HTML elements.
- Creating Components
- How to create components using the Element API.
- Integrating Web Components
- How to create new HTML tags with custom names.
- Element API
- You can control the HTML DOM in the browser from the server-side using the Element API.
- Drag & Drop
- Drag and drop between components as well as between the UI and the operating system.
- Templates
- How to build views declaratively using templates.