Spring Boot: Vaadin Flow

Spring Boot View Vaadin Flow

In Spring Boot, the Model-View-Controller (MVC) pattern is used to separate the application logic into three components; Vaadin Flow is a pure Java option for view.

📘 Vaadin Flow

Modern Java framework for building web UI applications

Vaadin is a web application framework for Java that allows developers to build modern, interactive web applications using Java without having to write HTML, CSS, or JavaScript.

Spring Boot Request-Response Cycle

1 Vaadin

Vaadin Flow is a Java framework that allows you to build web applications entirely in Java, without the need for HTML or JavaScript.

Here are the key points:

• Component-Based: Vaadin Flow uses a set of high-quality, customizable UI components that are connected to web components running in the browser, managing client-server communication automatically.
• Event-Driven: The framework is event-driven, allowing you to handle user interactions with Java event listeners, similar to desktop application development.
• Routing and Navigation: It includes a Router API for creating hierarchical page structures, enabling easy navigation between views.
• Backend Integration:Vaadin Flow supports integration with various backend technologies such as Spring Boot, Context Dependency Injection (CDI), and plain Java servlets, facilitating data binding and business logic implementation.
• Quick Development: The framework provides a quick start process, allowing you to build functional web applications in a short amount of time using Java alone.

Vaadin Logo

Here are some key points about Vaadin:

• Vaadin Official Website
• Vaadin Documentation
• Vaadin Spring Boot Integration
• Vaadin Flow
• GitHub Tutorial Vaadin 24
• Vaadin Maven CLI create a project

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.

NoteVaadin offers two main flavors for web application development:

1. Hilla: A full-stack framework combining a Spring Boot backend with a React or Lit frontend. It provides type-safe communication between client and server, auto-generated TypeScript interfaces, and built-in security features.

2. Flow: A server-side Java framework for building web applications. It allows developers to create UIs using a component-based approach, with automatic server-client communication and state management.

Both flavors leverage Vaadin’s extensive set of UI components and themes. Hilla is ideal for developers comfortable with modern JavaScript frameworks, while Flow suits those preferring a Java-centric approach.

Both can be used to create responsive, feature-rich web applications with excellent performance and maintainability.

Hilla / Flow

1.1 atmosphere

Vaadin uses the Atmosphere framework to facilitate robust client-server communication, particularly for real-time and push-based features.

Atmosphere is an open-source project that provides a powerful abstraction layer for various asynchronous communication protocols, including WebSockets, Server-Sent Events, and long-polling.

Vaadin integrates Atmosphere to handle its server push functionality, allowing servers to send updates to clients without the need for client-side polling. This integration enables Vaadin applications to create responsive, real-time user interfaces with minimal developer effort.

Atmosphere’s key features utilized by Vaadin include:

1. Protocol negotiation and fallback mechanisms
2. Automatic selection of the best available transport method
3. Handling of connection management and reconnection scenarios
4. Cross-browser compatibility

By building on Atmosphere, Vaadin abstracts away the complexities of low-level communication protocols, allowing developers to focus on application logic while still benefiting from efficient, real-time communication between client and server.

1.2 Binding

• Data Binding
• Loading & Saving Business Objects
• Binding Data to Forms

In Vaadin, the Binder is a data binding class used to connect UI components to Java beans. It is not a container but rather a utility that facilitates the transfer and validation of data between the user interface and backend objects.

Binder reads values from business objects, converts them to the format required by UI fields, and vice versa, supporting validation to ensure data integrity. This makes it essential for creating dynamic and interactive forms in Vaadin applications.

NoteThere can be only one Binder

There can be only one Binder instance for each form.

You should use this instance for all the fields in the form.

Client To Server: How to Bind Form Data

The following steps include everything needed to load, edit, and save values for a form. Java 8 method references are used.

// Create a Binder instance for the Person class
1Binder<Person> binder = new Binder<>(Person.class);

// Create a TextField for the title
2TextField titleField = new TextField();

// Bind the titleField to the Person class
binder.forField(titleField)
    .bind(
        // Callback that loads the title from a person instance
3        Person::getTitle,
        // Callback that saves the title in a person instance
        Person::setTitle);

// Create a TextField for the name
4TextField nameField = new TextField();

// Shorthand for cases without extra configuration
5binder.bind(nameField, Person::getName,
        Person::setName);

1

Create a Binder instance for the Person class.

2

Create a TextField for the title.

3

Bind the titleField to the Person class using method references.

4

Create a TextField for the name.

5

Bind the nameField to the Person class using method references.

Server to Client: Reading & Writing Automatically

Writing automatically to business objects when the user makes changes in the UI is usually the most convenient option. You can bind the values directly to an instance by allowing Binder to save automatically values from the fields.

In the example here, field values are saved automatically:

Binder<Person> binder = new Binder<>();

// Field binding configuration omitted.
// It should be done here.

Person person = new Person("John Doe", 1957);

// Loads the values from the person instance.
// Sets person to be updated when any bound field
// is updated.
binder.setBean(person);

Button saveButton = new Button("Save", event -> {
    if (binder.validate().isOk()) {
        // Person is always up-to-date as long as
        // there are no validation errors.

        MyBackend.updatePersonInDatabase(person);
    }
});

1.3 Create Vaadin Views

To create the web interface of the system, create Vaadin views for each of the main functionalities. The views will be used to display the data and handle user interactions.

Vaadin allows you to create rich, interactive UIs using Java code. It provides a wide range of UI components and layouts that you can use to build your application’s interface.

Example of a simple Vaadin view:

@Route("menu")
public class MenuView extends VerticalLayout {
    private final MenuService menuService;

    public MenuView(MenuService menuService) {
        this.menuService = menuService;
        
        H1 title = new H1("Restaurant Menu");
        Grid<Menu> grid = new Grid<>(Menu.class);
        grid.setItems(menuService.getAllMenuItems());
        
        add(title, grid);
    }
}

This view creates a page with a title and a grid showing all menu items.

Key Vaadin Concepts:

1. Server-side Architecture: Vaadin primarily runs on the server, which means your business logic stays secure and you can leverage the full power of Java.

2. Component-based UI: Build UIs by combining and customizing existing components or creating your own.

3. Data Binding: Easily bind UI components to data sources, including JPA entities.

4. Themes and Styling: Customize the look and feel of your application using CSS and Vaadin’s theming capabilities.

5. Integration with Spring Boot: Vaadin integrates seamlessly with Spring Boot, allowing you to use Spring’s dependency injection and other features.