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
Create a Vaadin project: File -> New -> Vaadin Project
Add project to server: Right click server -> Add and Remove… -> Add your project to Configured column -> Finish
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.
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 http://gwt.google.com/samples/MissingPlugin/MissingPlugin.html and install the plugin and restart Firefox.
Then, in Eclipse, select your SimpleComponent project and go File -> New -> Other… -> Vaadin Widget
I like to put the widget in it’s own subpackage .widget
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.
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
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.
GWT Development mode should now run. Click “Copy to Clipboard” button to get the URL to open in Firefox.
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.
If this does not happen, just stop GWT Dev mode and Tomcat and restart first Tomcat server and GWT Dev Mode.
Please point out if I missed something.