Vaadin Touchkit - New Project

Prerequisites:

• Eclipse Java EE IDE for Web Developers with m2eclipse plugin
• Apache Tomcat installed on your computer and integrated with Eclipse
• Sun Java 2 Standard Edition 6.0 (Java 1.5 or newer is required)

1. Create a new Maven project in eclipse using vaadin-archetype-touchkit archetype. 

Create the project.

Type touchkit in the filter field and you the desired archetype will be offered. Select it.

Type the group and artifact id for the new maven project.

After pressing Finish the project will be created in your workspace. It has some sample files so you can start the sample application without any modifications. But we'll do some changes so we can call this a HelloWorld application :).

2. Change the code so that button generate a "HelloWorld" message

If you open the src/main/java directory you will see a package named after your maven group and artifact ID. Open the MyVaadinApplication.java file located in that package and change the text of the label (created when the button is pressed) to "Hello World!".

3. Compile vaadin widget set using gwt-maven-plugin

You could try and start the application by starting your Tomcat instance inside Eclipse. Typing the URL addresse of your application in the browser (localhost:8080/helloworldtouchkit/) will result in following error:

This means that your vaadin widgets aren't compiled into javascript. You should press CTRL-6 for Vaadin Eclipse plugin to compile them. But now you will get another error in Eclipse saying:

java.lang.ClassNotFoundException: com.google.gwt.dev.GWTCompiler

The problem is that Vaadin plugin expects to find gwt-dev.jar on the project classpath but the Touchkit archetype doesn't create that maven dependency in the pom. To fix this problem we have two solutions. First one is to manually add that maven dependency in the pom.xml file and use the Vaadin plugin button. The other one is to use gwt-maven-plugin that is already specified in the project pom file. We are going for the second approach and all we need to do is to create new maven run configuration (which execute gwt:compile goal ) as shown on the image below.

After running maven build all widgets should be compiled.

4. Deploy and start the application

Add the application to the Tomcat server to be configured and start it. In the web browser type the URL of the application (localhost:8080/helloworldtouchkit/). The application should start and by pressing the Click me button, the Hello World! label should be written on the screen.

Source: 
http://itconclusion.blogspot.co.at/2012/11/mobile-hello-world-app-with-vaadin.html