Example Application Walkthrough

Let us follow the long tradition of first saying “Hello World!” when learning a new programming framework. First, using the primary server-side API.

Java

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
@Title("My UI")
public class HelloWorld extends UI {
    @Override
    protected void init(VaadinRequest request) {
        // Create the content root layout for the UI
        VerticalLayout content = new VerticalLayout();
        setContent(content);
        // Display the greeting
        content.addComponent(new Label("Hello World!"));
        // Have a clickable button
        content.addComponent(new Button("Push Me!",
            click -> Notification.show("Pushed!")));
    }
}

A Vaadin application has one or more UIs that extend the com.vaadin.ui.UI class. A UI is a part of the web page in which the Vaadin application runs. An application can have multiple UIs in the same page, especially in portals, or in different windows or tabs. A UI is associated with a user session, and a session is created for each user who uses the application. In the context of our Hello World UI, it is sufficient to know that the underlying session is created when the user first accesses the application by opening the page, and the init() method is invoked at that time.

The page title, which is shown in the caption of the browser window or tab, is defined with an annotation. The example uses a layout component as the root content of the UI, as that is the case with most Vaadin applications, which normally have more than one component. It then creates a new Label user interface component, which displays simple text, and sets the text to “Hello World!”. The label is added to the layout.

The example also shows how to create a button and handle button click events. Event handling is described in “Events and Listeners” and on the practical side in “Handling Events with Listeners”. In Java 8, you can implement listeners with lambda expressions, which simplifies the handler code significantly.

The result of the Hello World application, when opened in a browser, is shown in Hello World Application.

Hello World Application

To run a program, you need to package it as a web application WAR package and deploy it to a server, as explained in “Deploying an Application”. During development, you typically deploy to an application server integrated with the IDE.