Building a UI

A web application typically consists of one or more views. Each view is a hierarchical composition of components. At the bottom of the hierarchy, you have a root layout component, which contains other components. Vaadin comes with a large library of UI components that you can use.

Different views can represent steps of the application workflow, such as login, main view, and logout, or offer different functionalities or data resources. Even in a single view, you often want to have sub-views to display different content.

Schematic diagram of a view

Each view is typically associated with a route, a part of the URL that Vaadin determines to show a particular view.

For typical applications that have a main view with a menu and sub-views that the user can navigate to, you can use the App Layout component, as described in Creating a Main View.

Composing a View

A view is built from components hierarchically, and is a composite component, which you typically build for smaller parts of a view as well. At the bottom, you have a root layout component.

Building a Menu

You can build a menu in many ways, by using Tabs, Button, or Link components in a layout, or a component such as Grid.

Tabs allows creating both horizontal and vertical menus, which you can define with the orientation attribute.

// A layout with a menu and a content area
HorizontalLayout mainLayout = new HorizontalLayout();

// Create a vertical menu
Tabs tabs = new Tabs();

// Add the menu items (simplified)
tabs.add(new Tab("Hello World"),
         new Tab("Card List"),
         new Tab("About"));

// The selection will be displayed here
Div content = new Div();
content.add("Content will be here");

mainLayout.add(tabs, content);

Creating a Main View

The AppLayout component gives a basic layout for the main view of an application. It has a menu area, as well as a content area controlled by the menu. It fully works with routing to provide navigation between content views.

The starter applications created with the Vaadin application builder by default use the AppLayout to handle the main view.

View Navigation

While the simplest applications have just one view, most of them often require several.

The user can change from one view to another using navigation, such as with menu navigation, which can be implemented in many ways. Each view can be mapped into a URL using routing, hence making the different functionalities and resources available using the URLs.

View navigation

See Routing and Navigation for an introduction to routing.

Using Templates

UIs can also be implemented using declarative templates. See Using Templates to learn more.