vaadin-framework/documentation/introduction/intro-walkthrough.asciidoc

---
title: Example Application Walkthrough
order: 2
layout: page
---

[[intro.walkthrough]]
= 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.

[source, 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 __UI__s that extend the
[classname]#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 [methodname]#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 [classname]#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
<<../architecture/architecture-events#architecture.events,"Events and Listeners">> and on the practical side in <<../application/application-events#application.events,"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
<<figure.intro.walkthrough>>.

[[figure.intro.walkthrough]]
.Hello World Application
image::img/HelloWorld.png[scaledwidth=70%]

To run a program, you need to package it as a web application WAR package and
deploy it to a server, as explained in
<<../application/application-environment#application.environment,"Deploying
an Application">>. During development, you typically deploy to an application
server integrated with the IDE.