Vaadin tutorial

This tutorial is outdated. We recommend checking this article which covers how to create and deploy a Vaadin application on WildFly: Getting started with Vaadin on WildFly


 Vaadin is a cool Java web application framework designed for creating rich and interactive applications that run in the browser, without any plugins. A server-driven architecture together with reusable component model is used to simplify programming of applications and for better web application security. No HTML, XML or JavaScript necessary and all Java libraries and tools are at your disposal.



How is Vaadin made up ?

Vaadin is made of a server-side framework and a client-side engine.


The server side runs as a persistent Java Servlet session in the application server (f.e. JBoss Web Server) and contains the control logic and the business logic of the web application.


The client-side engine on the other hands runs in the browser as a JavaScript program, rendering the user interface and delivering user interaction to the server.



Web Browser (Client side engine)



Web server



Vaadin UI Components



Java Applications



JEE Stack (EJB – Web services ..)


As the Client-Side Engine is executed as JavaScript in the browser, no browser plugins are needed for using applications made with Vaadin. Behind the scenes, Vaadin uses GWT, the Google Web Toolkit, for rendering the user interface in the browser.


GWT programs are written in Java, but compiled into JavaScript, thus freeing the developer from learning JavaScript and other browser technologies.


GWT is ideal for implementing advanced user interface components (or widgets in GWT terminology) and interaction logic in the browser, while Vaadin handles the actual application logic in the server.

Installing Vaadin


If you want a quickstart with Vaadin and Eclipse just skip this section and move to “Working with Vaadin and Eclipse“. There you will be able to download Vaadin libraries directly from Eclipse.

Installing Vaadin is just a matter of downloading the newest Vaadin package from the download page at

Then unpack the installation package to a directory using a decompression program.

The Vaadin package contains the Content Browser application which allows you to browse documentation and example source code, and run the demo applications. The demo applications demonstrate most of the core features of Vaadin. You can find the demo applications also at the vaadin website:

To start the Content Browser, run the start.cmd/ script in the Vaadin installation directory. The start script launches a stand-alone web server running on the local host at port 8888, and a web browser at address http://localhost:8888/.


Working with Vaadin and Eclipse

In order to create your first Application with Vaadin and Eclipse you simply need to install the Vaadin plugin for Eclipse.


From the Eclipse Menu select Help | Install new Software.

Add “” and checkbox the Vaadin plugin.

vaadin tutorial

When you have completed the plugin installation you will be prompted to restart Eclipse.




Your first Vaadin Project

At this point you should have the New | Vaadin Project option available.


vaadin example


Choose a to start a new Project with a meaningful name and hit the Download button so that Vaadin libraries will be downloaded into Eclipse.


vaadin tutorial example


After the New Project wizard exists, it has done all the work for us: Vaadin libraries are installed in the WebContent/WEB-INF/lib directory, an application class skeleton has been written to src directory, and WebContent/WEB-INF/web.xml already contains a deployment descriptor.

Let’s see the application class created for us:

package com.example.sample;

import com.vaadin.Application;
import com.vaadin.ui.*;

public class SampleApplication extends Application {
 public void init() {
   Window mainWindow = new Window("Sample Application");
   Label label = new Label("Hello Vaadin user");


Now target this application to JBoss AS / Tomcat or any Java EE web server.

A Servlet registered at this address http://localhost:8080/Sample/ will render your application, producing a simple


Hello Vaadin User.


Adding some action to our example:


Vaadin has an excellent documentation, most of which is based on the free Vaadin book.

The following example follows a typical pattern where you have a Button component and a listener that handles user interaction (clicks) communicated to the application as events. Here we have defined an inner class that listens click events. (Pretty the same way we used to do it with AWT/Swing).

public void init() {
 final Window mainWindow = new Window("Clock window");
 final Label label = new Label();
 Panel panel = new Panel("Panel Containing a Label");
 panel.setWidth("200px"); // Defined width.
 mainWindow.addComponent( new Button("Get time",new Button.ClickListener() {
  public void buttonClick(com.vaadin.ui.Button.ClickEvent event) {
  label.setCaption("The time is " + new Date());


The outcome of this changes would be an empty Label which is filled with the current time when the Button is clicked.


vaadin tutorial example

Displaying tabular data


Well, any rich web application to be named such should provides a rich table component to display tabular data. Adding a table to your application is trivial with Vaadin.

public void init() {
 final Window mainWindow = new Window("Table window");

  Table table = new Table("Shoes price list");

  table.addContainerProperty("Brand", String.class, null);
  table.addContainerProperty("Colour", String.class, null);
  table.addContainerProperty("Price", Integer.class, null);
  /* Add a few items in the table. */
  table.addItem(new Object[] {"A10 Timberland","Grey",100}, new Integer(1));
  table.addItem(new Object[] {"Harmont & Blain","Black",85}, new Integer(2));
  table.addItem(new Object[] {"Roy Rogers","Blue",50}, new Integer(3));
  table.addItem(new Object[] {"IceBerg","Grey",150}, new Integer(4));


  Panel panel = new Panel("Panel");
  panel.setWidth("400px"); // Defined width.


This would produce the following output:

vaadin example tutorial

Lots of more examples are available at the home site.


In conclusion Vaadin is a framework designed to build web applications, not just web-sites. This positions it for application rather than website development. The programming model is much the same as in traditional desktop programming, with events and listeners rather than requests and responses. If you have written Swing or SWT-applications, you’ll feel right at home with Vaadin.