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.
- Click Download and extract the webapp.zip file.
- Then, import the project in IntelliJ IDEA or your favorite IDE.
- Click the Open option in the welcome window or select File > Open.
- Select the pom.xml file in the webapp directory.
- 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