Visual View Builder is a tool in the Vaadin Start application generator. It allows you to assemble custom views by dragging and dropping items into place. When you’re done, you can download and run the application locally or share it with others so they can customize it further.
Visual View Builder generates the required code declarations, configurations, and sample data for your application.
Theming & Other FeaturesVisual View Builder is part of Vaadin Start. You can customize the application theme, settings (e.g., Java version), and more before downloading or sharing the application.
https://start.vaadin.com and log in to get started. Select the VIEWS tab, click + Add View, and choose Visual View Builder from the drop-down menu. This opens View Builder.
Choose one of the four layout templates and add an optional header or footer — or both. You can see how this looks in the previous screenshot. After selecting a template, click Start building to proceed to content and actions.
You can edit the layout later, such as adding a margin, by clicking it once it’s in the view.
Drag items from the menu in the toolbar to the view (see the margin in the screenshot here). You can place content and add containers with some pre-made components.
If you want to place items in a row, for example, you can do so by dragging a
Horizontal Layout component from the toolbar on the side and then add items to it. Click on the items to expand them so as to fill the space in the layout.
Do the same instead with a
Vertical Layout if you want the items arranged from top-to-bottom.
Once you’re ready, you can share the project with others either by copying the link to it and giving it to them, or by creating a GitHub repository for it. Click Share… to do so. You can see these options in the screenshot here:
Sharing in PreviewSharing views is a preview feature. Give it a try. If you encounter a bug, though, file an issue by clicking the Submit feedback button in the bottom right-hand corner of the screen.
When you’re done with Visual View Builder and ready to generate the application, click Download in the bottom right-hand corner of the screen. Incidentally, you can add as many views as you want before downloading the project.