Vaadin 6.3 widget and GWT dev mode

Reading time ~3 minutes

Vaadin 6.3-pre1 is just around the corner, so I decided to give the package a try and make an own custom component which includes a client side widget. Then I’ll do some debugging of the client side code.

Vaadin 6.3 includes GWT 2.0, so the old Vaadin 6.2 + GWT 1.7 way of using OOPHM does not work as is any more.

My environment is:
Mac OS X 10.5.8
Java 5 or 6
Firefox 3.5.8
Eclipse 3.5 Galileo
Vaadin Eclipse Plug-In (Experimental)
Tomcat 6.0.20

Step-by-step how I did it: Create workspace for SimpleComponent and create a server. Servers -> Right click -> New -> Server -> Choose: Tomcat v6.0 Server -> Next -> Browse to installation directory -> Finish Server installed.

Create a Vaadin project: File -> New -> Vaadin Project Server installed. Server installed. Server installed. Server installed. Server installed. Add project to server: Right click server -> Add and Remove… -> Add your project to Configured column -> Finish Server installed. Now you can debug your vaadin application (which still is without a custom widget). Just start server in debug mode and open http://localhost:8080/SimpleComponent in Firefox.

Server installed. Server installed.

Hopefully you can see the basic hello world application in your browser.

You can stop the Tomcat server now.

Let’s proceed to creating a custom widget. First install the plugin required by Firefox to debug client side code (GWT Development Mode. Vaadin server side code is no problem, since you can just put breakpoints in code while server runs in debug mode.) Go to and install the plugin and restart Firefox.

Then, in Eclipse, select your SimpleComponent project and go File -> New -> Other… -> Vaadin Widget Server installed. I like to put the widget in it’s own subpackage .widget Server installed. Change name to SimpleComponent -> Finish

Don’t compile the widgetset at this point yet, since it has to be done later too. Answer no to those question untill I tell you when you can compile. The compilation takes a couple of minutes, so it’s just annoying to sit and wait unnecessarily. Now the Eclipse plugin has created a widget stub, which you can add to the test application. Server installed.

It’s convenient to launch the GWT Dev Mode from Eclipse also when debugging. We can let the Vaadin plugin create this for us. Right click the SimpleApplication -> Properties -> Vaadin -> Create development mode launch -> Ok Server installed.

We have to modify the launch slightly, so choose Run -> Debug configurations… -> Java Application -> “GWT development mode for SimpleComponent” -> Arguments. In Program arguments add “-startupUrl http://localhost:8080/SimpleComponent” like in the screenshot. -> Apply -> Debug. Server installed.

GWT Development mode should now run. Click “Copy to Clipboard” button to get the URL to open in Firefox. Server installed.

Start the Tomcat server in debug mode from Eclipse. Now you should compile the widgetset.

Paste the URL from GWT Dev Mode application to Firefox. This takes a while since the plugin itself does some compiling when opening. If you now click on the “click here” text on the page (you might have to add &restartApplication to URL to get rid of cache) the client side breakpoint in Java code should be triggered. Server installed. Server installed. Server installed.

If this does not happen, just stop GWT Dev mode and Tomcat and restart first Tomcat server and GWT Dev Mode. Server installed.

Please point out if I missed something.

Moving to Jekyll!

I have been running this site on top of [Drupal][drupal], because I felt that platform would be awesome to build something on top of. Tha...… Continue reading