Creating a Flow Application

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.

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.
Styling
You can customize styling with CSS style sheets.

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 back end.

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