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.

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

@Title("My UI")
@Theme("valo")
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!",
            new ClickListener() {
                @Override
                public void buttonClick(ClickEvent e) {
                    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 addition to listeners, in Java 8 you can handle events with lambda expressions, which simplifies the handler code significantly.

content.addComponent(new Button("Push Me!",
    event -> Notification.show("Pushed!")));

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.

Developing a pure client-side application, you could write a Hello World just as easily, and also in Java:

public class HelloWorld implements EntryPoint {
    @Override
    public void onModuleLoad() {
        RootPanel.get().add(new Label("Hello, world!"));
    }
}

We do not set the title here, because it is usually defined in the HTML page in which the code is executed. The application would be compiled into JavaScript with the Vaadin Client Compiler (or GWT Compiler). It is more typical, however, to write client-side widgets, which you can then use from a server-side Vaadin application. For more information regarding client-side development, see "Client-Side Vaadin Development".

Docs

Docs

Example Application Walkthrough