Getting started with Vaadin on WildFly

Vaadin is an open source Java web framework with a large set of Web Components and Java EE supported with CDI integration. Let’s see how to get started with it to create a sample Web application which will run on WildFly.

The simplest way to get started with Vaadin is by creating a new Vaadin project is to use the Project Base starter available at: https://vaadin.com/start

 

In the form, choose your Technology stack (for example CDI and Java EE) and enter:

Group ID: om.packagename.myapp.

App Name: webapp.

1. Click Download and extract the webapp.zip file.
2. Then, import the project in IntelliJ IDEA or your favorite IDE.
3. Click the Open option in the welcome window or select File > Open.
4. Select the pom.xml file in the webapp directory.
5. Click Open and Open as Project when prompted.

Let’s have a look at some of the generated project files:

Within the src/main/java folder you will find the Java code organized in packages.

At this point, the core clss is MainView: a Java class that implements the web UI using Vaadin Flow:

 
    @Route("")
    @CssImport("./styles/shared-styles.css")
    @CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field")
    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())));

            // Theme variants give you predefined extra styles for components.
            // Example: Primary button is more prominent look.
            button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

            // You can specify keyboard shortcuts for buttons.
            // Example: Pressing enter in this view clicks the Button.
            button.addClickShortcut(Key.ENTER);

            // Use custom CSS classes to apply styling. This is defined in shared-styles.css.
            addClassName("centered-content");

            add(textField, button);
        }
    }

The @Route annotation tells Vaadin to direct the root URL to this view. The URL parameter is optional and is derived from the class name, if not given.

The @CssImport annotation imports the specified CSS file.

The view extends VerticalLayout which shows components vertically.

Within the MainView constructor a set of actions are performed:

• A text field is created to enter the user’s name.
• A button with the text Say hello on it.
• A click-listener (using a lambda expression) is included to display a notification when the user clicks the button.
• The text field and the button are added to the View using a VerticalLayout.

When the button is clicked, the click-listener recalls the GreetService:

@VaadinSessionScoped
public class GreetService {

    public String greet(String name) {
        if (name == null || name.isEmpty()) {
            return "Hello anonymous user";
        } else {
            return "Hello " + name;
        }
    }
}

Running the Application on WildFly

The self-generated package includes a plugin to run the application in Jetty. You can deploy it on WildFly by adding to the pom.xml:

<plugin>
    <groupId>org.wildfly.plugins</groupId>
    <artifactId>wildfly-maven-plugin</artifactId>
    <version>2.0.0.Final</version>
</plugin>

To run the application:

mvn clean install wildfly:deploy

As a result, a simple textbox field will display with a button. By clickin on the button the listener will print the content of the text field at the bottom of the screen:

Now let’s be a bit more adventurous! We will add a simple Grid component to display a List of Java objects:

package com.packagename.myapp;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

import javax.annotation.PostConstruct;
import javax.inject.Inject;
import java.util.ArrayList;
import java.util.List;


@Route("")
@CssImport("./styles/shared-styles.css")
@CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field")
public class MainView extends VerticalLayout {

    @Inject
    private GreetService greetService;

    @PostConstruct
    public void init() {

        setJustifyContentMode(JustifyContentMode.CENTER);
        setWidth("100%");

        List<Person> personList = new ArrayList<>();

        personList.add(new Person(100, "Lucas", "Kane", 68));
        personList.add(new Person(101, "Peter", "Buchanan", 38));
        personList.add(new Person(102, "Samuel", "Lee", 53));


        Grid<Person> grid = new Grid<>(Person.class);
        grid.setItems(personList);

        grid.removeColumnByKey("id");

        grid.setColumns("name", "surname", "age");

        add(grid);
        setSizeFull();
    }

}

As you can see, the code is pretty much self-explanatory. A com.vaadin.flow.component.grid.Grid is created, passing as argument in its constructor a List of Person objects. The result, when executed is the following:

As you can see, with very little effort, we managed to display tabular data using Vaadin

Source code for this tutorial: https://github.com/fmarchioni/mastertheboss/tree/master/web/vaadin