Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Build the Main View

Now that you have IntelliJ IDEA or Eclipse running and a project available, we can start building our first view with Designer.

To do this:

  1. In the Project tree, right click the frontend folder, and select New > Directory. Name the new folder src/views.

  2. Right click the newly-created views folder and select New > Vaadin 10+ Design.

  3. In the Name field, type main-view.

  4. Ensure Lit is selected as the Template type.

  5. Ensure the Create Java companion file checkbox is checked. This allows us to bind data and add listeners to our view in Java.

  6. In the Java package field, click the folder selection button and navigate to com.example.application.

The New Vaadin 10+ design dialog should now look like this.

Creating the main view.

Click OK to generate the files.

Vaadin Designer opens inside your IDE.

Important
Eclipse on macOS opens designs in Google Chrome
If you are using Eclipse on macOS, the visual editor of the Designer can only open up in the Chrome browser. Install Google Chrome if you haven’t done so already.

Getting Familiar with the UI

Designer consists of four main parts:

  • Paper is where the UI you are building renders. It shows you what your view looks like. Before you add components to your view, the paper proposes a set of starting points for your newly created view.

  • Palette is a list of components that are available for use. The list is divided into multiple sections:

    • HTML elements are the built-in elements of the HTML language, like <p>, <h1> and <div>.

    • Parts is a list of all available web components in your project. These are scanned automatically from the node_modules folder in your project. When you add new 3rd-party web components to your project, they show up in the list and are available for use.

    • Components are snippets for Vaadin’s components that give you handy, commonly used configurations, like having a button with an icon and caption.

    • Project components are the other designs in your project. You can include them in your current view.

  • Outline shows you what components are in use in the view and their hierarchy.

  • Properties is where you modify how a single component looks and behaves.

Creating the Main Layout

This is the layout which we are building.

A web application with a listing of contacts and an editor open.

From the image, you can see we need:

  • A vertical layout at the root of the view.

  • A horizontal layout with a text field for filtering, as well as a button to add new entries, at the top.

  • A horizontal layout for a grid of data entries and a form below.

We’ll disregard the form for now, as we build it separately after adding the other components to the view.

Adding the Components

  1. On the paper, click Vertical to get a vertical layout as your starting point. Your view now consists of an empty layout.

  2. Find Horizontal layout in the palette and drag it onto the vaadin-vertical-layout on the paper twice. You can use the search field at the top to find components.

  3. Find Vaadin Text Field in the palette and drag it onto the first vaadin-horizontal-layout.

  4. Find Vaadin Button in the palette and drag it onto the first vaadin-horizontal-layout.

  5. Find Vaadin Grid in the palette and drag it onto the second vaadin-horizontal-layout.

Components added to the view.

Our view doesn’t look as planned yet, but it does have the components we need. We’ll now continue to configure the components to get it to look like we want.

Configuring the Main Layout

In the main layout, we need to add a bit of space between the components, as well as around the layout, to make it look better:

  1. Select the top-level layout, by clicking anywhere in the empty space of the vertical layout.

  2. In the properties view, in the Size and space panel, open the Padding selector and select M. This adds some space around the main layout, giving the design room to "breathe".

Spacing and padding added to the main layout.

Configuring the Toolbar

For the toolbar, we need to configure a text field:

  1. Select the text field.

  2. In the properties view, under attributes, find the label attribute and remove the value from it. We don’t need a separate label as we have the description as the placeholder value for the field.

  3. In the properties view, under attributes, find the placeholder attribute and replace "Placeholder" with "Filter by name…​".

  4. In the properties view, under attributes, find the clear-button-visible attribute and enable the checkbox. This gives the user an easy way to clear the filter.

  5. Select the button.

  6. In the properties view, find the text panel at the top and replace the default "Button" text with "Add contact".

Configured toolbar.

Making the Grid Fill the Available Space

To show as much data as possible, we want to give the Grid the rest of the screen space:

  1. Select the lower horizontal layout, vaadin-horizontal-layout.

  2. In the properties view, in the Size and space panel find the width and height fields and choose "100%" in both. This expands the layout to take up all the available space.

  3. Select the Grid, vaadin-grid.

  4. In the properties view, in the Size and space panel set the width and height fields to "100%". This gives all the space in the layout to the grid.

Filled toolbar.

Our main layout is now looking great, but it’s still missing the form. Proceed to the next chapter to add one: Build your contact form

758A02F4-4C0C-4FF2-821B-7ECA08C1101C