Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

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 back-end 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
An application consists of one or more views built hierarchically from user interface components. Views can be nested, such as a main view displaying sub-views.
Handling Events
Flow passes user interaction back to the server side as component events. The application can handle these events in Java code using an event handler.
Creating a Main View
Applications often have a main view with a menu bar that shows a selection of sub-views. When the user clicks on a menu item, the sub-view is displayed.
Basic Routing and Navigation
Each view has a route through which it can be accessed. A URL is used to select the required route. Interaction with the application includes navigation between the different views.
Images and 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;
        }
    }
}