Docs

Docs

Creating a Flow Application

Basics of creating an application using Flow.

Vaadin Flow lets a server-side Java application build a user interface from components in Java. These Java components are connected to web components running in the browser. Flow manages the relaying of user interaction back to the server-side application, which can handle it with event listeners.

Application views and their components are typically used to display and accept input of application data. This data is often stored in a backend service, such as a database. Application logic is often created using application frameworks, such as Spring.

application architecture

Basic Features

The basic features in Flow are:

  • An architecture that lets you concentrate on the UI. No need to think about client-server communication.

  • A set of high-quality UI components that focus on both the end-user and developer experience.

  • Powerful abstraction layers to build your own reusable UI components with either Java or HTML templates.

  • Data binding API to connect UI components to any backend using type-safe Java.

  • Router API to create hierarchical page structures for the user to navigate.

For example, you can create a UI in Java as follows:

// Create an HTML element
Div layout = new Div();

// Use TextField for standard text input
TextField textField = new TextField("Your name");

// Button click listeners can be defined as lambda expressions
Button button = new Button("Say hello",
          e -> Notification.show("Hello!"));

// Add the web components to the HTML element
layout.add(textField, button);

When using the Flow Java API, the components control their JavaScript counterparts in the browser. You don’t need know anything about the HTML or JavaScript that runs under the hood.

Topics

Building a UI
How to construct views with user interface components.
Handling Events
Learn the basics of event handling in Vaadin Flow.
Creating a Main View
How to create main views with a header, a menu, and a content area.
Basic Routing & Navigation
Understanding the basics of the routes of views, URLs and navigation.
Images & Icons
Images and icons are basic visual features of an application.

Technology Stacks

Vaadin starter and demo projects are available in three different technology stacks. They all follow the same application architecture, where you have the UI layer as an application view, with a service-layer backend.

Spring Boot

Spring Boot is a Java framework for creating web services that you can deploy and run conveniently. It enables the use of Spring Framework, the popular enterprise application framework for Java EE, with minimal configuration.

The application has a main view, which gets access to the business model service by autowiring.

public class MainView extends VerticalLayout {
    public MainView(@Autowired GreetService service) {

The service is a Spring service:

@Service
public class GreetService implements Serializable {
    public String greet(String name) {
        if (name == null || name.isEmpty()) {
            return "Hello anonymous user";
        } else {
            return "Hello " + name;
        }
    }
}
Context Dependency Injection (CDI) and Java EE

The Java Enterprise Edition (EE) includes many features for creating enterprise applications. CDI, or context dependency injection, is the Java EE way to manage service objects and inject them into applications, such as Vaadin UIs. CDI requires a Java EE-enabled web container; the starter projects use Apache TomEE.

The starter project includes an example service that handles business data and logic. The service is injected into the main view, and can be injected in a similar way into other views or elsewhere.

public class MainView extends VerticalLayout {
    @Inject
    private GreetService greetService;

The service is scoped to the Vaadin session, so each user session has its own service instance.

@VaadinSessionScoped
public class GreetService {
    public String greet(String name) {
        if (name == null || name.isEmpty()) {
            return "Hello anonymous user";
        } else {
            return "Hello " + name;
        }
    }
}
Plain Java servlet

You can also choose to develop the application as a plain Java servlet. You can deploy this servlet to any Java web container that doesn’t need to support Java EE or its features.

In a similar way to the Spring and CDI starters, the plain Java application also has a service to handle business data and logic, but you need to manage access to it yourself.

public class MainView extends VerticalLayout {

    public MainView() {
        // Use TextField for standard text input
        TextField textField = new TextField("Your name");

        // Button click listeners can be defined as lambda expressions
        GreetService greetService = new GreetService();
        Button button = new Button("Say hello",
            e -> Notification.show(greetService.greet(textField.getValue())));

In the plain Java servlet, the service is an ordinary object:

public class GreetService {
    public String greet(String name) {
        if (name == null || name.isEmpty()) {
            return "Hello anonymous user";
        } else {
            return "Hello " + name;
        }
    }
}