Beginning GWT UiBinder

Those who (want to) use Google Web Toolkit (GWT) and following its development must have known that starting version 2, GWT supports declarative (e.g. using markup a'la HTML) user interface building. That technology is called UiBinder.

I'm having a hard time understanding the technology, so I'm going to blog my experience to get a better understanding. Feel free to drop comments so we can learn together.

So what is UiBinder? UiBinder is a feature of GWT to build the "view" (things that are shown to user) of our GWT applications using XML/HTML instead of Java code. You can still use the old way (code) if you want to (e.g. you're a Swing developer).

Let's get down with example. I'm going to build a Web page like this:

I'm using Eclipse with Google Plugin, but basically you can use any IDE (actually I use IntelliJ more). Let's create a new Web Application Project named uibinder-demo.

You can use any package (mine is com.wiradikusuma.tutorial.uibinder), but don't check "Use Google App Engine"—I'm just going to focus on GWT. Click "Finish" to have everything generated, then click the green "play" icon to run it (or right click on the project, "Run As -> Web Application"). Open your browser and verify that your application is indeed running. Good, leave the server running.

Now we're going to add some UiBinder stuff. Open Uibinder_demo.html and empty its body element:



Right click on package com.wiradikusuma.tutorial.uibinder.client and create a new UiBinder named Main. Make sure the UI is based on "GWT widgets" and "Generate sample content" is checked. Click "Finish". Open Uibinder_demo.java in the editor and replace the contents of onModuleLoad to:



Refresh your browser and see that the view has changed to something simpler. Now open Main.ui.xml and replace its contents with this:



Refresh your browser again. Sweet. Now you might be wondering, "Can you show me the Java code equivalent?" Sure! Let's revisit Uibinder_demo.java in the editor and replace the contents of onModuleLoad to:



Refresh your browser and see the same layout, except the content is now Yahoo homepage (to show that we're actually looking at the Java code version). Nice. Let's revert our changes. Open Uibinder_demo.java in the editor and replace the contents of onModuleLoad back to:



So far our useless webapp is working, but ugly. Let's put some style. Open Main.ui.xml and insert the following code just before g:docklayoutpanel:



As you can see, it's pretty much standard CSS. Let's apply the header class:



And the footer class:



Refresh your browser. You can see it's now styled (still ugly, but you get the picture).