Creating a Flow Application

Vaadin Flow lets a server-side Java application build a user interface from components in Java, which are connected to web components running in the browser. Flow manages relaying 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 input application data, often stored in a backend service such as database. Application logic is often created with application frameworks such as Spring.

Topics

The basic aspects of a Flow application are as follows:

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 relays user interaction back to the server-side as component events, which the application can handle in Java code using an event handler. An event handler is an implementation of an event listener interface, such as a lambda expression or an anonymous class, and you can also use handler methods.

Basic Routing and Navigation

Each view has a route through which it can be accessed by a URL. Interaction with the application includes navigation between the different views.

Routing and Navigation are further described in Routing and Navigation.

Creating a Main View

Applications often have a main view with a menu bar to show a selection of sub-views. When the user clicks on a menu item, the sub-view is displayed. The AppLayout component allows creating such views, supporting navigation and responsive layouts.

Images and Icons

Images and icons are basic visual features of an application. Vaadin Design System comes with two sets of icons that you can use in your application.

Styling

To define the basic style of applications, Vaadin provides a default Lumo theme, and an alternative Material theme. You can customize styling with CSS style sheets.

For further reading, see Using Themes in the Vaadin Design System.

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 easily. It enables using 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 simple 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. It is injected in the main view, and can be injected in similar way to 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, which you can deploy to any Java web container, which does not 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 by your own.

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;
        }
    }
}