Build a User Interface using the Vaadin Mobile App Framework
Vaadin is a web application framework for creating rich and interactive applications in Java that run in the browser, without any additional plug-ins. As such, it's an excellent tool for developing HTML5 mobile apps. In the Create a Vaadin Mobile App Project in Eclipse tutorial, we installed the Vaadin Framework and created an Eclipse Vaadin 7 project for an application that will manage a library of fitness exercises. In today's follow-up, we'll learn how to automatically generate the User Interface (UI) from a Java Class.
Changes to Forms in Vaadin 7
Previous to version 7, forms were generated using the com.vaadin.ui.Form control. Although it is still available in Vaadin 7, it has been superseded by the FieldGroup control. One of its best features is that it supports automated data binding as well as automatic creation of form fields!
Here is some version 6 code that creates a Form and binds data to it:
person = new Person(); // a person POJO BeanItem<Person> personItem = new BeanItem<Person>(person); // item from POJO personForm.setItemDataSource(personItem); // bind to POJO via BeanItem // Create the Form final Form personForm = new Form(); person = new Person(); // a person POJO BeanItem<Person> personItem = new BeanItem<Person>(person); // item from POJO personForm.setItemDataSource(personItem); // bind to POJO via BeanItem // Add form to layout addComponent(personForm);
public class AutoGeneratedFormUI extends UI {
@Override
public void init(VaadinRequest request) {
VerticalLayout layout = new VerticalLayout();
setContent(layout);
FieldGroup fieldGroup = new BeanFieldGroup<Person>(Person.class);
// We need an item data source before we create the fields to be able to
// find the properties, otherwise we have to specify them by hand
fieldGroup.setItemDataSource(new BeanItem<Person>(new Person("John",
"Doe", 34)));
// Loop through the properties, build fields for them and add the fields
// to this UI
for (Object propertyId : fieldGroup.getUnboundPropertyIds()) {
layout.addComponent(fieldGroup.buildAndBind(propertyId));
}
}
}
Configuring Your Project to Use Vaadin Widgets
All native Vaadin widgets are included in the com.vaadin.DefaultWidgetSet package. If you neglect adding it to your project resources, you'll be greeted by a nasty error message when you try to load your app in the browser!
Failed to load the widgetset: /myapp/VAADIN/widgetsets/com.vaadin.DefaultWidgetSet/com.vaadin.DefaultWidgetSet.nocache.js?1352494554184
The widgets are included in the vaadin-client-compiled-7.4.0.jar file. There are several other jar files that need to be referenced from your project. To add them to your project:
- Go to the Vaadin download page and download the All-in-one archive under Direct Download. It contains all the jars of the Vaadin Framework. Additional dependencies are included in the lib folder as well.
- Copy all vaadin-* files except vaadin-client and vaadin-client-compiler to WEB-INF/lib in your project. We don't need the vaadin-client and vaadin-client-compiler jars because they are only needed when compiling your own widget set to Javascript.
- Copy lib/*.jar to WEB-INF/lib in your project
Jsoup
Vaadin also depends on an external library called Jsoup. It's a Java HTML Parser that provides an API for extracting and manipulating data. Specifically, you'll want the jsoup-1.8.1.jar core library. Copy it into your project's WEB-INF/lib folder along with the Vaadin jars.
Here is what your WEB-INF/lib folder should look like afterwards:
The Entity Bean
Automatic form generation starts with the Entity Bean. It's a class that represents a real-life "thing" or person for the purposes of your application. It basically performs the same function as the model in MVC architecture. In our case, the entity is a fitness exercise class that was written in the Persistence in Java EE Applications article.
Create a package named "com.robgravelle.exercises.entities" and a class called "Exercises" as in the Persistence in Java EE Applications tutorial.
Coding the ExercisesUI Class
Create a new class in the "com.robgravelle.exercises" package named "ExercisesUI" that extends com.vaadin.ui.UI. Here is the generated code with an extra annotation to suppress the missing serial UID message:
package com.robgravelle.exercises;
import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.UI;
@SuppressWarnings("serial")
@Theme("myproject")
public class ExercisesUI2 extends UI {
@Override
protected void init(VaadinRequest request) {
// TODO Auto-generated method stub
}
}
Generating the Form
The init() Method is where we set the layout and define the form fields. The easiest way to do that is to let Vaadin generate them from the Entity bean. To do that for our Exercises class:
- Instantiate a new BeanFieldGroup of type Exercises.
- Set the FieldGroup instance's ItemDataSource to a new BeanItem, again of type Exercises, passing in a new instance of our Entity class.
- Iterate over each of the FieldGroup instance's property IDs and add the component to the layout:
@Override
public void init(VaadinRequest request) {
VerticalLayout layout = new VerticalLayout();
setContent(layout);
FieldGroup fieldGroup = new BeanFieldGroup<Exercises>(Exercises.class);
fieldGroup.setItemDataSource(
new BeanItem<Exercises>(
new Exercises("Bench Press", "chest", "front delts, triceps, lats",
"barbell", "compound", "pushing")));
// Loop through the properties, build fields for them and add the fields to the UI
for (Object propertyId : fieldGroup.getUnboundPropertyIds()) {
layout.addComponent(fieldGroup.buildAndBind(propertyId));
}
}
The last required step before we can see the form in a browser is to provide Servlet information using annotations. Include the following code at the top of the class, just after the opening curly brace:
public class ExercisesUI extends UI {
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(
productionMode = false,
ui = ExercisesUI.class)
public static class Servlet extends VaadinServlet {
}
Viewing your Application in the Browser
Start up your server and enter the URL to your project:
http://localhost:8089/ExercisesMobileApp/
Make sure that the project name matches exactly what's under your server in the server view:
Here is the auto-generated form in the browser:
Conclusion
As with all things easy, the end results can leave a little to be desired. The fields are all there, but their ordering is not right, and the look is very plain to say the least. Luckily, as you'll see in the next instalment, all these things are easily remedied!
Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses.
In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on Reverb Nation.
