Vaadin with Ant, Struts and Spring MVC

I wanted to smoke test a recent JSP integration add-on we prepared for an upcoming webinar on JSP/JSF integration. Lately we also got complaints (for reason!) that we have removed our ANT example build script. We are clueless where the old example is lost and we’ll try to fix the situation soon, but I decided to tackle these two things at once and created an example project that uses ANT based build, no dependency management system and embeds a Vaadin UI into legacy (fake) app built with Struts 1 and Spring MVC views.

I hope this blog entry and the example project answers some questions you might face when adding Vaadin to an existing web project.

Step 0: The base project

I didn’t have any legacy projects on my computer so I had to create one from scratch 🙂 . I have lately used NetBeans as my main IDE and, although it favors Maven these days, it still contains nice support for ANT built projects.

I used the project wizard in NetBeans to create a basic web app project with Struts 1.x and Spring 4 MVC dependencies. The build for the project is “almost portable”. If you don’t use NetBeans, and wish to build this project without NetBeans, you’ll have to include Struts and Spring dependencies somehow else. Alternatively just follow the instructions in this blog entry and adapt your existing ANT build with similar changes.

Step 1: Add Vaadin dependencies and basic Vaadin UI

Following dependencies are needed with 7.6 series at runtime:

• atmosphere-runtime-2.2.7.vaadin1.jar
• flute-1.3.0.gg2.jar
• guava-16.0.1.vaadin1.jar
• js-1.7R2.jar
• jsoup-1.8.3.jar
• sac-1.3.jar
• streamhtmlparser-jsilver-0.0.10.vaadin1.jar
• vaadin-client-compiled-7.6.4.jar
• vaadin-push-7.6.4.jar
• vaadin-sass-compiler-0.9.13.jar
• vaadin-server-7.6.4.jar
• vaadin-shared-7.6.4.jar
• vaadin-slf4j-jdk14–1.6.1.jar
• vaadin-themes-7.6.4.jar
• yuicompressor-2.4.8.jar

I copied these jar files form the all in one zip distribution, to a project folder called lib/vaadin-runtime and use IDE to add the dependencies to the project — NetBeans is smart enough to modify the build script to include files to the generated war file. Another possibility would be to add them directly to WEB-INF/lib directory or manually to your ANT build. Some of the libraries are actually not needed, unless you use on the fly theme compilation or push.

Next step was to create a simple UI class…

package com.myapp;
import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
@Theme("valo") public class VaadinUI extends UI {
   @Override     
   protected void init(VaadinRequest request) {                    
       setSizeUndefined();         
       setContent(new Label("Hello Vaadin user!"));     
   }  
}

… and add old-school configuration for Vaadin servlet to web.xml file:

<servlet>
    <servlet-name>vaadin-servlet</servlet-name>
    <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
    <init-param>
        <param-name>ui</param-name>
        <param-value>com.myapp.VaadinUI</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>vaadin-servlet</servlet-name>
    <url-pattern>/vaadinui/*</url-pattern>
    <url-pattern>/VAADIN/*</url-pattern>
</servlet-mapping>

After this your plain Vaadin UI is mapped to path “vaadinui” and if you call “ant” in your project, you’ll have a working WAR file (with Vaadin UI in it next to legacy views).

Embed Vaadin application into JSP views

Thanks to the brand new JSP taglib, adding Vaadin based UIs to existing JSP based web apps is dead simple. In this example I added the Vaadin application, created in previous step, to Struts and Spring MVC views, but anything using JSP should be possible.

I first downloaded the add-on containing the taglib from the Directory and placed in to lib folder and added to runtime dependencies like in previous step.

Next I went to welcomeStruts.jsp file and added import rule to present vaadin taglib:

<%@ taglib uri="/vaadin" prefix="vaadin"  %>

Using the ui tag is dead simple, the only required parameter is url, which should be the mapping you used for your vaadin UI:

<vaadin:ui url="/vaadinui"/>

I wanted the Vaadin part to be of dynamic height so I also gave a following style tag to override the default 100% height of v-app style name and the light gray background color:

<style>.valo.v-app {height:auto;background:transparent;}</style>

Then, just to prove it works, I applied exactly the same method for the Spring MVC view as well.

Consuming add-ons

Consuming Vaadin add-ons without modern build systems is the hardest part of this exercise. We need to add dependencies manually, create and update the widgetset, again manually, create custom classpath for GWT compilation and command the GWT compiler manually.

First thing was naturally to download an add-on. I downloaded Switch because of its simplicity and added it to web apps classpath like previously. If you need some less trivial add-ons, I suggest first to add it to some Maven built draft project and inspect what dependencies it needs and add those as well to your legacy project. Normally, with Maven build, you’d now do a clean build and vaadin-maven-plugin would update your application’s “widgetset” (practically a …Widgetset.gwt.xml file you have in your project) to include relevant GWT modules from your add-on dependencies. Now you need to do this manually 🙁 Inspect it from your draft project as I suggested above or manually dig out the correct module name from the jar file. In my case I added file a widgetset file src/java/AppWidgetset.gwt.xml with following content:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN"
        "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.vaadin.DefaultWidgetSet"/>
    <inherits name="org.vaadin.teemu.switchui.SwitchComponentWidgetset" />
</module>

Also it is now good idea to add a @Widgetset(“AppWidgetset”) annotation to the UI class.

Next we’ll want to create an ANT task to actually compile the GWT module. For that we need Vaadin client side jars and their dependencies and the jar files actually needed for the compilation. For GWT “development time” you’ll need following dependencies:

• vaadin-client-7.6.4.jar
• vaadin-widgets-7.6.4.jar

I collected these to vaadin-gwt directory. In this example I’ll be using those only during GWT compilation, but you’ll need to add these for your IDE’s build path if you want to build some application specific client side code, right into your project. I always try to use add-ons only, a bit better habit architecturally.

During the actually GWT compilation you’ll use quite a lot of dependencies. Practically the rest that there still in the zip distribution. I collected those to vaadin-gwt-compilation directory:

• ant-1.6.5.jar
• ant-launcher-1.6.5.jar
• apache-mime4j-0.6.jar
• appengine-api-1.0-sdk-1.7.7.jar
• asm-5.0.3.jar
• asm-commons-5.0.3.jar
• asm-tree-5.0.3.jar
• asm-util-5.0.3.jar
• cglib-nodep-2.2.jar
• commons-codec-1.8.jar
• commons-collections-3.2.2.jar
• commons-io-2.4.jar
• commons-lang3–3.1.jar
• commons-logging-1.1.3.jar
• cssparser-0.9.11.jar
• easymock-3.0.jar
• hamcrest-core-1.3.jar
• httpclient-4.3.1.jar
• httpcore-4.3.jar
• httpmime-4.3.1.jar
• icu4j-50.1.1.jar
• javax.servlet-api-3.0.1.jar
• jetty-annotations-8.1.12.v20130726.jar
• jetty-client-8.1.12.v20130726.jar
• jetty-continuation-8.1.12.v20130726.jar
• jetty-http-8.1.12.v20130726.jar
• jetty-io-8.1.12.v20130726.jar
• jetty-jndi-8.1.12.v20130726.jar
• jetty-plus-8.1.12.v20130726.jar
• jetty-security-8.1.12.v20130726.jar
• jetty-server-8.1.12.v20130726.jar
• jetty-servlet-8.1.12.v20130726.jar
• jetty-servlets-8.1.12.v20130726.jar
• jetty-util-8.1.12.v20130726.jar
• jetty-webapp-8.1.12.v20130726.jar
• jetty-xml-8.1.12.v20130726.jar
• junit-4.11.jar
• nekohtml-1.9.19.jar
• objenesis-1.2.jar
• serializer-2.7.1.jar
• swing-worker-1.1.jar
• vaadin-client-compiler-7.6.4.jar
• vaadin-client-compiler-deps-1.2.0.jar
• validation-api-1.0.0.GA-sources.jar
• validation-api-1.0.0.GA.jar
• xercesImpl-2.11.0.jar
• xml-apis-1.4.01.jar

For the ANT script I combined the require jar files with following declaration:

<!-- Define what is needed during GWT compilation -->
<path id="classpath.widgetset">
    <!-- Actual GWT compiler etc -->
    <fileset dir="lib/vaadin-gwt-compilation">
        <include name="*.jar"/>
    </fileset>
    <!-- Vaadin runtime, some shared class, some stuff could be omitted -->
    <fileset dir="lib/vaadin-runtime">
        <include name="*.jar"/>
    </fileset>
    <!-- The client side stuff of Vaadin -->
    <fileset dir="lib/vaadin-gwt">
        <include name="*.jar"/>
    </fileset>
    <!-- Possible add-ons, switch in this case -->
    <fileset dir="lib">
        <include name="*.jar"/>
    </fileset>
</path>

Then I’m simply using java tag to ignite the GWT’s Compiler class to compile the AppWidgetset module. I hooked to -post-compile, created by NetBeans ANT script, but create some custom named target if you don’t happen to use NetBeans:

<target name="-post-compile">
    <java classname="com.google.gwt.dev.Compiler"
              failonerror="yes" fork="yes">
        <arg value="-war"/>
        <arg value="build/web/VAADIN/widgetsets"/>
        <arg value="AppWidgetset"/>
        <arg value="-logLevel"/>
        <arg value="INFO"/>
        <arg value="-strict"/>
        <jvmarg value="-Xmx1024M"/>
        <jvmarg value="-Xss512M"/>
        <jvmarg value="-Djava.awt.headless=true"/>
        <classpath>
            <!-- This contains AppWidgetset.gwt.xml, the GWT module to compile -->
            <pathelement path="src/java"/>
            <!-- Some GWT stuff, like optimizations, may need classes as well -->
            <pathelement path="build/web/WEB-INF/classes"/>
            <path refid="classpath.widgetset"/>
        </classpath>
        <sysproperty key="vFailIfNotSerializable" value="false"/>
    </java>
</target>

If you now try the Vaadin UI’s in the app, you’ll notice that the standalone UI works properly, but the embedded views are still using DefaultWidgetset, without the cool Switch widget. The JSP taglib (at least currently) still needs you to manually define the widgetset in use. Modify the embedded Vaadin UI’s to use the widgetset like this:

<vaadin:ui url="/vaadinui" widgetset="AppWidgetset"/>

All done. I certainly suggest everybody to move to modern build systems like Maven or Gradle, but Vaadin by no means forces you to use them. I hope these instructions make all this bit easier, even without our Eclipse plug-in.

Check out the full example project