Posts Tagged ‘vaadin’

As part of my freelance work one day i’ve noticed the very cool project vaadin which is based on google’s GWT and helps to create powerful web applications that will run on differnt browsers and devices. Building a web application with vaadin is analogue to build a SWING or Java FX application. You will create the “pages” (UIs) only in JAVA code and use layout objects e.g. the vertical layout to arrange all widgets like input fields, buttons, borders, labels, views, etc. on your page. There is no need to bother with HTML, javascript or css when you start writing your application, you can simply concentrate in implementing your business logic.

How does it work? When the user navigates to the vaadin application the server provides a JAVA SCRIPT that is loaded and running on the browser to renders the application page. All user actions will be syncronized to the server via RCP (AJAX GET and PUT) calls that will exchange information in JSON form and to the server. In user’s point of view a vaadin application behaves and feels like a native program, for example a rich client written in JAVA SWING. But in differnce to this it will simply run in your browser and there is no need to install software before. It is very impressive what huge functionlity you will get without the effort to search and embed JAVA-SCRIPT elements or code like jquery plugins. To get a better understanding how vaadin works, please have a look a the vaadin book which describes the framework well. The vaadin user interface will show you losts of useful widgets, layouts, databindings, concepts and addons and the corresponding source code and documentation.

What i want to do

Because i am a great fan of spring, especially spring-web-mvc, i want to find out a solution how to integrate a more or less complex vaadin application within a spring mvc application. So the result have to

it should be deployed as a simple war file, running within a tomcat or standalone.

Lets start

Before we start, all source code of this demo is hosted on github and can be cloned from here.

To be able run the application stanalone and within a simple web container like tomcat or jetty, i decided to used the new spring-boot project.

When starting a spring boot application, spring-boot determines the classpath and tries to find out which components are present. It loads the main application class, looks for the spring configuration, determines classes in packages and its annotations and looks for files in conventional pathes like application.properies or logback.xml etc. To pull up the vaadin servlet in combination with spring-boot i integrated the brand new vaadin4spring project into my classpath which makes it very easy to add UIs into the vaadin application.

The vaadin4spring project

First, checkout the project from github and install the artifacts into your local repository.

The project comes with some example projects that are worth to open and have a look.

I think it is only a matter of time when this project will be published into spring’s or the global maven repositories so you can avoid cloning and building this project locally. But currently, it is necessary.

The demo application

maven’s pom.xml

Our demo application starts with a pom.xml which contains the dependencies to the vaadin4spring project, to spring-mvc, spring-boot and the spring-boot-maven-plugin. The spring-boot-maven-plugin is responsable to start the application from the shell, simply typing mvn spring-boot:run.

The main configuration file application.properties

The application.properties is placed in folder /src/main/resources and contains the URL mapping for all requests that are intended for the vaadin servlet. This is important for a clear separation which servlet have to process a request, the VaadinServlet or spring’s DispatcherServlet.

The main application and the spring configuration class

The main application class Application also contains the spring configuration, configures spring-boot using the SpringApplicationBuilder class and starts up the spring boot process. It is referred in mavens pom.xml to specify the application’s main class, see <start-class>demo.vaadin.Application</start-class>.

The vaadin UI class

Using the vaadin4spring project it is very simple to integrate a vaadin UI-classes into the vaadin servlet. Just implement the abstract UI class and add the annotation @VaadinUI to the class. Here is one of the two UIs i have implemented into the demo application:

You will access the application in your browser when opening the URL http://localhost:8080/myUI/simple. The url is a combination of the vaadin.servlet.urlMapping property and the path attribute in @VaadinUI.

Adding spring-mvc functionality

To add the spring-mvc functionality according to spring-boot you only have to implement a Controller class with @Controller and @RequestMapping annotation and add the spring-boot-starter-web or spring-boot-starter-thymeleaf artifact to the project.

For this demo i have used a sample code which comes directly from spring-boot project is written by Rob Winch and taken from the example spring-boot-sample-web-ui.