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:

Vaadin is an open source Java web framework.


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 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:

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

            // Theme variants give you predefined extra styles for components.
            // Example: Primary button is more prominent look.

            // You can specify keyboard shortcuts for buttons.
            // Example: Pressing enter in this view clicks the Button.

            // Use custom CSS classes to apply styling. This is defined in shared-styles.css.

            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:

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:


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:

Vaadin is an open source Java web framework.

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;

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

    private GreetService greetService;

    public void init() {


        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.setColumns("name", "surname", "age");



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:

Vaadin is an open source Java web framework.

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

Source code for this tutorial: