Monday, September 15, 2014

Why to use UIBinder in GWT

One of my favorite feature released in GWT 2.4 is Declarative Layout aka UiBinder, a quick way to design the UI. The biggest advantage of using it is to separate the UI declaration from sensitive Java code. When the release team introducing UiBinder, they stated as below

UiBinders provide a way for you to declare the layout of your application and widgets using traditional HTML and CSS rather than programatically in java. This provides you with a much richer way to create your application.

Browsers are better at building DOM structures by cramming big strings of HTML into innerHTML attributes than by a **bunch of API calls**. UiBinder naturally takes advantage of this, and the result is that the most pleasant way to build your app is also the best way to build it.

The UiBinder is a framework designed to separate Functionality and View of User Interface. It allows developers to build gwt applications as HTML pages with GWT widgets configured throughout them.More over it makes easier collaboration with UI designers who are more comfortable with XML, HTML and CSS than Java source code.

As a Java developer I came across the old school days JSP and HTML as well and from that experience and after I move to GWT technology what I can say is The UIBinder is similar to what JSP is for Servlets.

The summary of the above all is (from my development experience):

1. If you are familiar with HTMl, and CSS,you can simply layout the structure there(means in ui.xml templates)and can simply play with GWT. This reduces your compile time.

2. Again, You can simply write the markup in xml and apply styles and other DOM attributes,where as in java code you have to write no.of lines of code [well at least 2 to 3] prepare a widget with styles and specific DOM attributes.

If you want to get started with it, Here I found a good example that how UiBinder gives advantage over the traditional java code.
I hope others will also share their experience  here about UiBinder usage.

No comments:

Post a Comment