Connect to Java

You can connect both components and data between Java and the UI made with Designer. In practice, this is accomplished with a Java class that enables Vaadin Flow to connect your Java code to the UI. In other words, you access the UI defined in a design programmatically through the companion class for the design.

To connect a design element to Java:

  1. Make sure you have a companion Java class with @HtmlImport and @Tag annotations matching the design.

  2. Set the id attribute for the element. (Optional)

  3. Click on the corresponding checkbox for the element in the Outline that you want to connect to Java.

The Java Companion File

The Java companion file for a design is the file that contains the class that connects your Java code to the UI defined in the design. There can be only one companion class for a design.

You may have already created the companion file at the time you created the design using the new design wizard. If that is the case you are all set. You can start connecting components and data.

There is a companion file status indicator on the top right of the editor toolbar. The connection has three states: no connected file, connected to a java companion file or connected to multiple java files.

Design is not connected to any Java companion file
Design is connected to a Java companion file
Design is connected to multiple Java companion files

When you have connected your design with a java companion file, you can simply navigate to the file by clicking on the connected indicator. However, if you do not have a companion file for your design, you need to create one manually. Here is a code snippet for a companion file that is a valid starting point for any design. It has been written as if it was a companion to an imaginary my-design.html. You have to adapt it by providing the correct values for your design to the Tag and HtmlImport annotations. The class names are not relevant for Designer.

import com.vaadin.ui.Tag;
import com.vaadin.ui.common.HtmlImport;
import com.vaadin.ui.polymertemplate.PolymerTemplate;

public class MyCompanionClass extends
        PolymerTemplate<MyCompanionClass.MyCompanionClassModel> {

    public interface MyCompanionClassModel extends TemplateModel {


In general, any Java class will be picked up by Designer as a companion file for the design, as long as the class is a descendant of com.vaadin.ui.Component, it is annotated with com.vaadin.ui.Tag annotation, with the annotation’s value matching the design’s dom-module id and the value of the com.vaadin.ui.HtmlImport annotation matches the design path. So, if you have a specific need, you can freely customize the companion class to match your needs. You can learn more about designs in Flow documentation.

Connecting Components

Designer helps to connect the components used in the design to Java but before that can happen you need three things:

  1. You need a companion file for the design. See the The Java Companion File for how to get one.

  2. The component you want to connect to Java should have its id property set to a unique value (among all the id property values in the same design). If its id is empty, Designer will generate one for you.

  3. The project must have Vaadin Flow libraries as dependencies. Those are needed to correctly set the type of the new field.

When a companion file for the design exists, the Java column in the Outline should show a checkbox for each component which has a Java type to export. You can export the component to Java side by clicking on its checkbox in Java column, as illustrated in the bellow picture.

When you make changes in your java companion file, it will take a few seconds to update the status of the checkboxes and the connection indicator on the toolbar.
Adding a Field

Choosing to add the field in the previous picture will insert the following field to the companion class:

    private TextField username;

Flow uses the @Id annotation to connect the UI textfield to the field. The value in the annotation must match the id property of the component in the design. Otherwise, you are free to change the type, name and visibility of the field. Just be careful not to break it for Flow.

Take a look at the Flow documentation to learn more about binding components in Flow.

You can also remove the field by unchecking the checkbox in the Outline.

Removing a Field

Removing a field will erase it from the companion class along with its @Id annotation.

You should not have more than one companion class for a design, or more than one field annotated with the same @Id value, but if you do, all of them will be shown in the Java checkbox tooltip so that you can easily locate them to fix the problem manually.

Connecting Data

You can also bind data from Java to the UI. Designer provides you with a starting point by adding the template model inner class into the companion file when the file is created. You can learn more about binding data to designs in Flow documentation.