Vaadin Button tutorial

last modified July 4, 2017

Vaadin Button tutorial shows how to use a Vaadin Button component. The Vaadin Button example shows a small notification window.

Vaadin

Vaadin is a popular Java framework for building single page web applications.

Vaadin Button

Button is used to trigger some action. When the user clicks a button, a Button.ClickEvent is fired. A button event handler is added with the onClick() or the addClickListener() method.

Vaadin Button example

The following program demonstrates the usage of a Vaadin Button component. When we click on the button component, a notification window is displayed.

$ tree
.
├── nb-configuration.xml
├── pom.xml
├── README.md
└── src
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── zetcode
    │   │           └── vaadinbuttonex
    │   │               └── MyUI.java
    │   └── webapp
    │       ├── META-INF
    │       │   └── context.xml
    │       ├── VAADIN
    │       │   └── themes
    │       │       └── mytheme
    │       │           ├── addons.scss
    │       │           ├── favicon.ico
    │       │           ├── mytheme.scss
    │       │           └── styles.scss
    │       └── WEB-INF
    └── test
        └── java

This is the project structure of the Vaadin web application. The project was created in NetBeans. In NetBeans, we need to install NetBeans Vaadin plugin and then create a new Vaadin Web Application Project. We will work with the MyUI.java file.

package com.zetcode.vaadinbuttonex;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Title;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;

@Theme("mytheme")
@Title("Vaadin Button")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        
        HorizontalLayout layout = new HorizontalLayout();

        Button button = new Button("Button");
        button.addClickListener(e -> {
            Notification.show("Button clicked");
        });
        
        layout.addComponents(button);
        layout.setMargin(true);
        
        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

MyUI is the application entry point. A UI may either represent a browser window (or tab) or some part of a HTML page where a Vaadin application is embedded.

@Theme("mytheme")

With the @Theme annotation, we specify the theme of the application. A default mytheme is automatically created for us.

@Title("Vaadin Button")

With the @Title annotation, we set the title of the browser window.

HorizontalLayout layout = new HorizontalLayout();

Components in Vaadin are placed inside layout managers. HorizontalLayout places components in a row. Since we have only a single Button component, it does not matter much which layout manager we choose.

Button button = new Button("Button");

A new Button component is created. The label of the button is specified as the parameters.

button.addClickListener(e -> {
    Notification.show("Button clicked");
});

A button event handler is added with the addClickListener() method. In the body of the method, we call Notification.show(), which shows a small notification window in the middle of the page.

layout.addComponents(button);

The button is added to the layout with addComponents() method.

layout.setMargin(true);

With the setMargin() method, we create some margin around the button component.

setContent(layout);

Finally, the layout is added to the UI.

@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}

As we can see from this code excerpt, Vaadin framework is built on Java Servlet technology.

In this tutorial, we have showed how to use the Vaadin Button component. You might also be interested in the related tutorials: Vaadin CheckBox tutorial, Vaadin DateField tutorial, Vaadin ComboBox tutorial, Vaadin TextArea tutorial, Vaadin Slider tutorial, Java tutorial.