Components: buttons, fields, notifications

A component is a ready-made piece of interface: a button, an input field, a checkbox, a grid. In Vaadin every component is a Java class. You create an object with new, set it up with methods and add it to the screen with add. The component takes care of its look and behavior in the browser.

A field and a button

Let us make a quick draft screen: the user types a title and clicks a button.

// src/main/java/com/example/blog/views/DraftView.java
package com.example.blog.views;
 
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
 
@Route("draft")
public class DraftView extends VerticalLayout {
 
    public DraftView() {
        TextField title = new TextField("Title");
        Button create = new Button("Create draft",
                event -> Notification.show("Draft created: " + title.getValue()));
 
        add(title, create);
    }
}

Open http://localhost:8080/draft, type "My first post" and click the button. A notification "Draft created: My first post" appears at the bottom of the screen for a few seconds.

The second argument of Button is the click handler. It runs on the server, so title.getValue() immediately returns what the user typed in the browser.

Setting up components

Fields and buttons have many useful methods:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
title.setPlaceholder("For example, Monthly summary");
title.setClearButtonVisible(true);
title.setMaxLength(120);
title.setWidth("400px");
 
create.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
create.setIcon(VaadinIcon.PLUS.create());

The field gets a hint inside, a clear button and a length limit, and the button becomes a blue primary button with a "plus" icon. The fragment needs the imports com.vaadin.flow.component.button.ButtonVariant and com.vaadin.flow.component.icon.VaadinIcon.

Frequently used components

All fields share the methods getValue() and setValue(...), and the label goes into the constructor.

Notifications

Notification.show(text) is the shortest way to tell the user something. To configure it, keep the returned object:

// src/main/java/com/example/blog/views/DraftView.java (part of a handler)
Notification note = Notification.show("Draft saved", 3000, Notification.Position.TOP_CENTER);
note.addThemeVariants(NotificationVariant.LUMO_SUCCESS);

The notification appears at the top center, turns green and disappears after 3 seconds.

Common mistake

A component is created but not visible on the page:

// src/main/java/com/example/blog/views/DraftView.java (fragment)
TextField author = new TextField("Author");
// forgot add(author);

There is no error — the field simply was not added anywhere. A component appears in the browser only after add(...) into the view or into a container that is already on the view.