Vaadin CheckBox tutorial

last modified July 4, 2017

Vaadin CheckBox tutorial shows how to use the Vaadin CheckBox component. The Vaadin CheckBox example toggles the title of the web page.

Vaadin

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

Vaadin CheckBox

CheckBox is a selection component that can be either checked or unchecked. Clicking on a check box will change its state. The CheckBox can be checked with the setValue() method. The value of the CheckBox is retrieved with the getValue() method. Changing the value of a check box will cause a ValueChangeEvent, which is handled by ValueChangeListener.

Vaadin CheckBox example

The following program demonstrates the usage of a Vaadin CheckBox component. The CheckBox toggles the title of the web page.

A Vaadin web application can be easily created 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.vaadincheckboxex;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.Page;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

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

    @Override
    protected void init(VaadinRequest vaadinRequest) {

        VerticalLayout layout = new VerticalLayout();

        CheckBox cbox = new CheckBox("Show title");
        cbox.setValue(true);

        Page.getCurrent().setTitle("CheckBox");

        cbox.addValueChangeListener(e -> {
            
            Boolean val = e.getValue();
            
            if (val) {
                Page.getCurrent().setTitle("CheckBox");
            } else {
                Page.getCurrent().setTitle(".");
            }

        });

        layout.addComponents(cbox);
        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. Here we create the CheckBox component.

CheckBox cbox = new CheckBox("Show title");
cbox.setValue(true);

A new CheckBox is created. The parameter of the constructor is the label of the CheckBox. Since by default the title of the web page is visible, we check the component with the setValue() method.

Page.getCurrent().setTitle("CheckBox");

Here we set the title of the web page. We can set the page title with the @Title annotation as well.

cbox.addValueChangeListener(e -> {
    
    Boolean val = e.getValue();
    
    if (val) {
        Page.getCurrent().setTitle("CheckBox");
    } else {
        Page.getCurrent().setTitle(".");
    }

});

With addValueChangeListener(), we add a listener for value changes. We get the current value of the CheckBox with the getValue() method. Depending on its state, set the title of the web page.

layout.addComponents(cbox);

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

layout.setMargin(true);

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

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