Introduction to Vaadin framework

This tutorial introduces Vaadin web framework.

Vaadin framework

Vaadin is a popular Java framework for building single page web applications. It is developed by a Finnish company specializing in the design and development of Rich Internet Applications. It is estimated that 150 000 developers use Vaadin. Its development started in 2002.

Vaadin framework features

The following is a list of Vaadin features:

Vaadin NetBeans

NetBeans contains a plugin for creating Vaadin applications. We go to Tools/Plugins and install the Vaadin plugin. Then we restart NetBeans.

Vaadin new project
Figure: Vaadin new project

After Vaadin plugin has been installed, a new Vaadin project category appears in NetBeans. To create a new Vaadin project, we go to File/New Project/Vaadin and choose Vaadin Web Application Project.

Vaadin simple example

The following is a simple Vaadin application, which displays text using the Vaadin Label component.

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

This is the project structure of the Vaadin web application. Notice the mytheme, which is automatically created for us.

MyUI.java
package com.zetcode.simple;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Label;
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();

        Label lbl = new Label("Simple example");
        lbl.setDescription("This is a Label component");

        layout.addComponents(lbl);

        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 can either be 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.

VerticalLayout layout = new VerticalLayout();

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

Label lbl = new Label("Simple example");

A new Label component is created. The label displays a non-editable text.

lbl.setDescription("This is a Label component");

With the setDescription() method, we add a tooltip for the label component.

layout.addComponents(lbl);

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

setContent(layout);

Finally, the layout is added to the UI with setContent().

@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.

Vaadin Label
Figure: Vaadin Label

In the screenshot we can see the Label component and its tooltip.

In this tutorial, we have introduced Vaadin framework. You might also be interested in the related tutorials: Vaadin Button tutorial, Vaadin CheckBox tutorial, Vaadin ComboBox tutorial, Vaadin TextArea tutorial, Vaadin Slider tutorial, Java tutorial.