Own UI components

In certain cases, you want to extend the standard functionality of UI component or change it individually. To do this, you can derive from the standard components and then make the new UI component available in the GUI Builder as well.

Create UI component

  1. In Project Management > main-java click on. image not found Create a new GUI element.

  2. In the following dialog, specify a name for your UI component at Name, e.g. MyButton.

  3. Click at Superclass > Browse.

  4. In the following dialog, select a UI component from which you want to derive your UI component (superclass), e.g. Button.
    image not found

  5. Click OK.

  6. Click Finish.

Result:

  • A new UI component of type Button is created.

package com.company.demoproject.ui;

import com.vaadin.flow.component.button.Button;

public class MyButton extends Button
{
    public MyButton()
    {
        super();
        this.initUI();
    }

    /* WARNING: Do NOT edit!<br>The content of this method is always regenerated by the UI designer. */
    // <generated-code name="initUI">
    private void initUI()
    {
        this.setText("Button");

        this.setSizeUndefined();
    } // </generated-code>
}

  • In Project Management > main-java > ui the new UI component is displayed and can thus be displayed in the GUI builder, edited via Properties can be configured and expanded in the Javacode view.
    image not found

  • To add the component to the palette, you can proceed as follows: +.

    • Press Customize Palette
      image not found

    • Then click the Interaction category and then click Add Element.

    • In the following dialog then search for MyButton and then select your classes.

    • Then you can confirm with OK and your button should then appear under Interaction.

Extend UI component

The new UI component can be extended with new properties and methods as desired.

  1. In Project Management > main-java > ui, double-click the new UI component.

  2. Assign an icon to the UI component.

  3. Define a new property, e.g. MousOverCaption.

String MouseOverCaption = "";

public String getMouseOverCaption() {
    return MouseOverCaption;
}

public void setMouseOverCaption(String mouseOverCaption) {
    MouseOverCaption = mouseOverCaption;
}

  1. Click Save.

Properties defined in the code are later used for Properties > Object is displayed.

Use new UI component

The new UI component can be used like any other UI component in the GUI Builder.

  1. Open in Project Management > main-java > ui > MainLayout.ui.xml*.

  2. Select the new UI component in the Palette and drag and drop it onto the GUI builder.