Designing Quarkus Front-Ends with Vaadin made easy

Vaadin Flow provides a comprehensive set of UI components and tools for creating rich and interactive user interfaces, while Quarkus offers a lightweight and efficient Java framework for developing cloud-native applications. In this article, we will explore how to combine the strengths of Vaadin and Quarkus to build web applications with ease.

What is Vaadin?

If you are new to Vaadin, you can get a quick introduction in this article which shows how to set up a basic Vaadin application: Vaadin Tutorial: Building Modern Web Applications with Ease

Vaadin Flow follows a component-based architecture, where UI components are created and composed together to build the application’s user interface. These components are written in Java and rendered on the client-side using JavaScript and HTML. This approach allows developers to write the application logic in Java while leveraging the power of the web platform for rendering and interactivity.

In order to use Vaadin Flows with Quarkus you can add the Vaadin Flow extension to your Quarkus project:

We will now build a sample Quarkus application which combines Vaadin Flow extension with a simple Service that loads data from the Database and displays it in a Grid Component.

Step 1: Build the Server Side

Firstly, we will create a simple Model that we will display in a Vaadin Grid. This model uses the following Person Entity Class:

@Entity
@NamedQuery(name = "Person.findAll", query = "SELECT p FROM Person p WHERE country = :country")

public class Person implements Serializable {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    
    private String name;
    private String surname;
    private int age;
    private String country;
    // Getters/Setters omitted for brevity    
}

Then, in order to fetch the list of Person, filtered by Country, we will add the following Service Class:

@Dependent
public class PersonService {
    @Inject
    EntityManager entityManager;
    
    public List<Person> getPersons(String country) {
       
        return (List<Person>) entityManager.createNamedQuery("Person.findAll")
        .setParameter("country", country)
        .getResultList(); 
    }
   
}

Step 2: Building the Vaadin View

In Vaadin, a View represents a distinct portion of a web application’s user interface. It defines the visual components and layout that are displayed to the user when accessing a specific URL or navigating to a particular section of the application.

A Vaadin View is typically a Java class that extends a Vaadin layout component, such as VerticalLayout or HorizontalLayout, and contains the @Route annotation. This annotation specifies the URL path that you will use to access the view.

Finally, within the View, we will add a set of Components that you will be interacting with during the navigation.

Here is our Main View, which you will be able to reach on the Web application Home page via the @Route(“”) annotation:

@Route("")
public class MainView extends VerticalLayout {

    @Inject
    PersonService greetService;

    public MainView() {

        H1 pageTitle = new H1("Welcome to Quarkus Vaadin!");
        add(pageTitle);
        ComboBox<String> comboBox = new ComboBox<>("Country");
        comboBox.setAllowCustomValue(true);
        List<String> countries = new ArrayList();
        countries.add("US");
        countries.add("UK");
        comboBox.setItems(countries);

        Grid<Person> grid = new Grid<>(Person.class);
        grid.removeColumnByKey("id");
        grid.setColumns("name", "surname", "age", "country");
        grid.setSizeFull();
        grid.setWidth("600px");

        Button button = new Button("Search", e -> {
            List<Person> persons = greetService.getPersons(comboBox.getValue());
            System.out.println(persons);
        
            grid.setItems(persons);
            grid.getDataProvider().refreshAll();
            
        });

       
        button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);     
        button.addClickShortcut(Key.ENTER);

        add(comboBox, button,grid);
        setWidth("100%");
        setSizeFull();
                
    }
}

Here is a detail about the Vaadin components we use in this View:

• H1: This is a Vaadin component representing a level-one heading (tag). It displays the title “Welcome to Quarkus Vaadin!”. The add() method adds this component to the view.
• ComboBox: This component is a drop-down list with a list of “Country”.
• Grid: This component represents a table or grid for displaying tabular data. In this case, it contains the Person class as the item type.
• Button: This component represents a clickable button. The button triggers a click event listener (e -> { … }) that fetches persons based on the selected value in the ComboBox and updates the data in the grid accordingly.

Step 3: Running the application

For the sake of simplicity, our application uses the H2 Database as Datasource. Also, we will add an import.sql file to pre-load some data:

    INSERT INTO Person (id, name, surname, age, country) VALUES (1, 'John', 'Doe', 25,'US');
    INSERT INTO Person (id, name, surname, age, country) VALUES (2, 'Jane', 'Smith', 30,'UK');
    INSERT INTO Person (id, name, surname, age, country) VALUES (3, 'Michael', 'Johnson', 35,'US');
    INSERT INTO Person (id, name, surname, age, country) VALUES (4, 'Emily', 'Davis', 28,'UK');
    INSERT INTO Person (id, name, surname, age, country) VALUES (5, 'David', 'Brown', 32,'US');

Finally, you can run the application as follows:

mvn install quarkus:dev

Upon selecting the Country Combobox, you will see that the Grid Component reloads Data via the Listener Event bound to the Button Object:

Conclusion

In conclusion, Vaadin Flow offers a powerful and efficient way to build front-ends for Quarkus applications. By combining the ease and productivity of Java development with the rich and interactive UI capabilities of Vaadin, developers can create modern and feature-rich web applications.

Source code: https://github.com/fmarchioni/mastertheboss/tree/master/quarkus/vaadin-demo