Visual View Builder
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.
|
Tip
|
Theming & Other Features
Visual 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.
|
Creating a Custom View
Go to 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.
Choosing a Template
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.
Building a 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.
Creating a Layout
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.
Publishing & Sharing
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:
|
Note
|
Sharing in Preview
Sharing 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.
|
Downloading the Project
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.
b9ce6c1a-050b-11ee-be56-0242ac120002