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