In this post I’d like to write down my experiences (so far) with creating iPhone webapps with Vaadin TouchKit. For those of you who are not familiar with TouchKit:

TouchKit is a tool kit that lets you develop applications that look and feel like native iPhone applications using only Vaadin.

That means in plain English: Creating iPhone webapps in pure Java with a GWT-based, elegant web framework and no HTML, JavaScript or other technology required.

Vaadin provides an Eclipse plugin, which is the recommended way of developing a Vaadin application, but that would only be half the fun. I want to go two steps further:

• Use Maven as build / project management tool – but still using Eclipse as IDE.
• Use Google Appengine as hosting environment.

I wrote already about mavenizing a Google Appengine project.

Create a Vaadin Maven project

1. Vaadin already has a good Maven plugin. For TouchKit it is required to have the option to compile the Vaadin widgetset. Therefore we use the Maven archetype to create a project which includes the GWT plugin already:

   
   mvn archetype:generate \
   -DarchetypeGroupId=com.vaadin \
   -DarchetypeArtifactId=vaadin-archetype-sample \
   -DarchetypeVersion=LATEST \
   -DgroupId=your.company \
   -DartifactId=project-name \
   -Dversion=1.0.0 \
   -Dpackaging=war
   

2. Optional: run the application with mvn jetty:run. You can access the application at localhost:8080/project-name
3. Optional: Create the Eclipse project files to import the project in Eclipse with mvn eclipse:eclipse. Of course this is not required, and instead of Eclipse you can use your IDE of choice.
4. The created pom.xml file doesn’t reference the latest versions of Vaadin and GWT, unfortunately. For TouchKit at least Vaadin 6.3 is required. Therefore change Vaadin to version 6.3.0 and GWT to version 2.0.3:

   
   <dependency>
   <groupId>com.vaadin</groupId>
   <artifactId>vaadin</artifactId>
   <version>6.3.0</version>
   </dependency>
   <!-- This is also used by gwt-maven-plugin to deduce GWT version number. -->
   <dependency>
   <groupId>com.google.gwt</groupId>
   <artifactId>gwt-user</artifactId>
   <version>2.0.3</version>
   <scope>provided</scope>
   </dependency>
   

Add the TouchKit widgetset

1. Add the TouchKit dependency to the classpath:

   
   <dependency>
   <groupId>org.vaadin</groupId>
   <artifactId>vaadin-touchkit</artifactId>
   <version>0.5</version>
   </dependency>
   

2. Unfortunately, TouchKit is not available in a public Maven repository. You have two choices now: either add the TouchKit jar to your local repository using mvn install:install-file or you put it into your own remote repository. The advantage of the second option is obvious: you don’t need to install the file on all your development machines locally. Add your remote repository to pom.xml:

   
   <repository>
   <id>cloudme</id>
   <url>http://cloudme.googlecode.com/svn/maven</url>
   </repository>
   

3. Update web.xml file and change the servlet class to org.vaadin.touchkit.mobileapplication.MobileApplicationServlet, as described here.
4. Unfortunately, there is a bug in the current gwt-maven-plugin, and therefore a workaround is required to use the TouchKit widgetset: create your own widgetset which inherits TouchKit. It is important to set the entry point, otherwise the Maven plugin will not compile it correctly:

   
   <module>
   <entry-point class="com.vaadin.terminal.gwt.client.DefaultWidgetSet" />
   <inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />
   <inherits name="org.vaadin.touchkit.widgetset.TouchKitWidgetset" />
   </module>
   

5. Change the widgetset in web.xml:

   
   <init-param>
   <param-name>widgetset</param-name>
   <param-value>com.example.gwt.MyWidgetset</param-value>
   </init-param>
   

Now create a simple application using TouchKit widgets as described here, update the application parameter in web.xml and perform a clean build: mvn gwt:clean jetty:run

Enable Google Appengine

Please note that the following steps describe only the basic, most necessary steps required to run the TouchKit application in Google Appengine.

1. Add the GAE version to the properties section of the pom.xml:

   
   <gae.version>1.3.2</gae.version>
   

2. Add required plugins:

   
   <plugin>
   <groupId>org.apache.maven.plugins</groupId>
   <artifactId>maven-war-plugin</artifactId>
   <version>2.1-beta-1</version>
   <configuration>
   <webResources>
   <resource>
   <directory>src/main/webapp</directory>
   <filtering>true</filtering>
   <includes>
   <include>**/appengine-web.xml</include>
   </includes>
   </resource>
   </webResources>
   </configuration>
   </plugin>
   <!--
   The actual maven-gae-plugin. Type "mvn gae:run" to run project,
   "mvn gae:deploy" to upload to GAE.
   -->
   <plugin>
   <groupId>net.kindleit</groupId>
   <artifactId>maven-gae-plugin</artifactId>
   <version>0.5.7</version>
   </plugin>
   <!--
   Upload application to the appspot automatically, during
   release:perform
   -->
   <plugin>
   <artifactId>maven-release-plugin</artifactId>
   <configuration>
   <goals>gae:deploy</goals>
   </configuration>
   </plugin>
   

3. And, of course, the plugin repository:

   
   <pluginRepository>
   <id>maven-gae-plugin-repo</id>
   <name>maven-gae-plugin repository</name>
   <url>http://maven-gae-plugin.googlecode.com/svn/repository</url>
   </pluginRepository>
   

4. Create a appengine-web.xml file in WEB-INF:

   
   <appengine-web-app
   xmlns="http://appengine.google.com/ns/1.0">
   <application>project-name</application>
   <version>1</version>
   </appengine-web-app>
   

Now you can run the application with mvn gae:run