Vaadin Designer works with projects using Vaadin Flow. You can get started with a Flow project with these instructions: https://vaadin.com/start#vaadin10
With your project selected, select Vaadin 10 Design from the list, and click .(or press Ctrl+N), choose
In the next step, make sure the locations are correct. The design file must be placed into the frontend folder or one of its sub-folders. You can also choose to create a Java companion file together with the new design. The companion file can be located under any of the project’s Java source roots.
Give your design a descriptive name. The name must be a valid HTML Custom Element name.
For example, the name user-editor-design will result in user-editor-design.html and UserEditorDesign.java.
Chooseto create the design and open Vaadin Designer.
Vaadin Designer is fully integrated with the IDE and its views can therefore be freely moved and arranged as you wish.
To be able to successfully use the Designer, you will need the Outline, Palette and Properties views, in addition to the main editor.
The elements of the Vaadin Designer are as follows:
Editor (see below for close-up)
Outline - component hierarchy
Properties for the selected component
In the editor view, illustrated in Component Editor, you have a number of controls in the toolbar.
Viewport size and presets
Rotate viewport (portrait / landscape)
Source code mode
Companion file connector
|By default, Vaadin Designer requires polymer dependency to render the whole viewport. Therefore, your project must have Polymer dependency placed inside webapp folder or configured using webjars.|
|Vaadin Designer will use shared-styles.html file inside webapp/styles/ folder as a global styles definitions for the whole project.|
The Palette appears on the right side of the editor. The Palette contains the web components available for the current design. Users can drag a component from the Palette and drop it into the desired locations.
When a design is opened, the Designer searches the entire project for web components and loads them into the Palette.
There are 3 groups of components: Project Designs, Web Components and HTML Elements.
This group contains the designs from the project so that you can easily reuse them in the currently edited design.
This group contains web components that are included the project, either as WebJars or Bower dependencies.
This group contains Native HTML5 elements, such as style, h1 to h6, div, li, ol, p, ul, a, span, img, script, col, table, button, form, input, label, slot and template.
Make sure to run |
Whenever you open a Vaadin 10 design, Vaadin Designer will scan whole project for you. All html files with dom-module and template tags will be considered as web components and end up in "Web Components" section.
Additionally, Vaadin Designer supports web components inside webjars dependencies. Those dependencies could be added using build tool, such as Gradle or Maven.
As a result, your palette might look a bit crowded. Palette Search field can help you to find elements quickly. Hover over the element and palette status bar will show its location.
The Outline is shown on top-right corner of the IDE by default, containing the hierarchy of the opened design.
You can drag and drop components from the Palette to the Outline and create your design’s structure.
A Vaadin 10 design can have many root elements.
Layout elements, such as div, vaadin-form-layout, vaadin-split-layout, vaadin-horizontal-layout and vaadin-vertical-layout, have their width and height expanded to 100% when they are roots.
Inside the Outline, you can also drag and drop a component around to re-arrange it, or press "Delete" to remove a selected component.
The Properties lay under the Outline by default, showing the properties of a selected component.
After selecting a component from the Editor or the Outline,
you can edit its properties in the Properties table.
It is a good idea to give components at least an id if they are to be used
from Java code to add logic (such as click listeners for buttons).
Generally, this is needed for most controls, but not for most layouts.
You can also add a new property by clicking on Click here to add a string property, Click here to add a boolean property (in IntelliJ IDEA) or the Add a new property icon (in Eclipse).