Vaadin Example : Java and HTML based RAD tool (with Hibernate and Spring)

Goal of this example

In the “good old days” there was a concept of RAD (Rapid Application Development) that allowed developers to quickly create graphical user interface. The visual page editor allowed drag-and-dropping UI components into the form, customizing the size, layout, etc, then write the business logic in the same language as the UI was built, for example Pascal in case of Delphi. This concept exists in java too for desktop applications, Swing, AWT, SWT, but what about the WEB? It uses HTML + Javascipt on the view and Java on the backend, the developer needs to work with the  HTTP / HTML technology and it’s limitations. Vaadin provides a solution to have a visual form editor and be able to access all UI elements with pure Java without the need to worry about HTML and Javascript or client side at all (because that will be auto generated)

Technology Used
  • Vaadin 6.7.6
  • Vaadin Eclipse plugin
  • Spring
  • Hibernate
  • Maven
Techniques shown in this example
  • Vaadin Navigator Addon
  • Custom components
  • Page refresh

Reading resources
  1. Book of Vaadin : this is the complete guide to Vaadin
  2. Vaadin Sampler : this is a sample application the demonstrates all build in components and reskinning possibility of Vaadin
Structure of the example project

This example project uses Hinernate and H2 in memory database. The database is initialized from the test_data.sql file, all this is configured in the persistence.xml.

  • Hibernate DAOs are in the org.exampledriven.vaadinexample.dao package
  • Vaadin UI components are in org.exampledriven.vaadinexample.ui
Vaadin Form Eclipse pligin

After installing the Vaading Eclipse plugin from Eclipse Marketplace, we have the option to create new Vaadin Projects or Composites using the file / new / other / Vaadin menu option. When creating a new Comosite it will crete a new java file and open the visual editor that allows drag and drop adding visual components to a form :

(sometimes existing Vaadin components are opened as regular java files, in this case the file/open with/Vaading editor menu helps)

Integrating with spring

Both Vaadin and Spring was build around the concept of initializing a main servlet, that takes care of initializing the rest of the application. Luckily spring provides a way to not to have a servlet, just a listener.


By adding the above to web.xml spring can be initialized the usual way.

Custom components

Vaadin provides a very easy way to create custom components, based on exising components. In the example ChildDetail is a custom components, it is composed of a number of input fields, buttons and the layout. The Vaadin form editor automatically detects components in the projects and adds them to the palette. Couldnt be easier…

Page refresh

There can be situations, when the website needs to synchronize it’s state with the backend. One option is that the server pushes messages to the client, the other and much easier solution is when the webpage refreshes itself. Vaadin provides a built in solution for the latter it is a visual component called progress indicator, and its usage is demonstrated in in the example.

Vaadin Navigator Addon

Using the Navigator addon it is possible to create a tabbed interface. The addon provides events to control the tab change, for example to display a warning before navigating away of a tab demonstrates how to use it.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: