Email Article

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

Compare that to the following version 7 code using the FieldGroup. It allows us to bind the entire class via the FieldGroup.setItemDataSource() method:

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

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.