Gwt 2.0 : Uibinder example using Eclipse

There many exciting and productive features got released with GWT 2.0. UiBinder is one of them which allows you to create UI using declarative XML files. You need to write very less code in comparison to previous versions of GWT.

Lets start with simple project which show how to use UiBinder.

First of all install GWT 2.0 plugin in Eclipse.

Create first web application : Select File > New > Web Application Project from Eclipse menu. In the New Web Application Project wizard, enter a name of your project (UiBinderTest) and a java package name com.example.uibindertest. Please don't select Use Google App Engine option. Click Finish. Your project is ready.

Run the application : Follow the instruction given in Running Your Web Application Locally section.

Lets convert this application and use UiBinder.

Create UiBinderTest.ui.xml file in com.example.uibindertest.client directory. Please have a look at the code in this document. We created DockLayoutPanel first and added all the elements to it. Now look the corresponding java code UiBinderTest.java in the same document. Its very small and clear, isn't it?. With the help of UiBinder we are able to write compact, faster code easily.

Now lets create a dialog box using UiBinder. Please create ResponseDialog.ui.xml file in com.example.uibindertest.client directory. Look at the code in the document. Now create corresponding java file ResponseDialog.java file in the same package. Look at the code in the document. Please note that in ResponseDialog.java we do not need to code initWidget() method because DialogBox put itself to DOM.

If you want to read more about UiBinder please read http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html

We are done with the changes. Run the application again.

Please write comment if you have any doubts.