UIBinder in GWT

Question

I am trying to understand the UIBinder concept in GWT. I went through couple of tutorials online. Here is my question:

1) Why exactly one would want to use UIBinder? Is it only because we would be writing less code and developing as though we are writing javascript directly?

2) Is there anything that can be accomplished by using UiBinder that cannot be done by GWT or vice-versa?

I went through this link which provides a straight discussion on the same. Any other points or suggestions?

Thanks in advance.

Drava

It is still unclear how much google uses UiBinder internally #15610582 The query got closed even before i could assign a bounty!!!! – Aishaaisle

Answer 1

The biggest advantage of GWT in the process creating DOM is UiBinders, also known as “Declarative Layout”.

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.

• The UiBinder framework allows developers to build gwt applications as HTML pages with GWT widgets configured throughout them.

• The UiBinder framework makes easier collaboration with UI designers who are more comfortable with XML, HTML and CSS than Java source code

• The UIBinder provides a declarative way of defining User Interface.

• The UIBinder separates the programmic logic from UI.

• The UIBinder is similar to what JSP is to Servlets.

And here is one example that how UIBInder gives advantage over the traditional java code.

Coming to your questions (these are observed while i am developing)

1. If you are familiar with HTMl, and CSS,you can simply layout the structure there(means in ui.xml tempaltes)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.

From my experience I summarized points here recently. http://codeinventions.blogspot.in/2014/07/why-to-use-uibinder-in-gwt.html

Mattias

Good Article on UI-Binder @Baadshah – Rebecarebecca

Thanks a lot for ur replies. But can you please explain what exactly you mean by the statement: The UIBinder provides a declarative way of defining User Interface.? – Drava

Iow with ui binder you declare how your screen looks, but analogous to the way HTML works. As opposed using pure get java code where you'd have to code the steps to build the gui. With java you'd say put a button there, put a text box there. With ui hinder you say "make it look like this". – Es

Yeah,Exaclty.Already Micheal spotted that. in addition declarative layout in the sense declare your app skeleton layout as HTML pages (xml)with GWT widgets sprinkled throughout them and then play with them in your java code.instead creating a widget with new in java code. – Mattias

Thanks a lot. Got much better idea now – Drava

Answer 2

Problems with Only Java-Based Layout

• Hard to format HTML in Java – Think servlets vs. JSP – HTML-based layout is usually not dynamic enough • If it is, use it! • Hard to visualize the layout – Not easy to see final result from looking at Java code • Hard to effectively involve a graphic UI Web designer – They usually don’t know Java – Even if you manage to get the design into Java, it is hard to maintain

UiBinder: Main Idea

• Use XML file to lay out chunk of content – Can represent HTML or a Widget • Make Java class that represents that chunk of content – There are some overly-details steps involved, but Eclipse has shortcuts that automate making most of them • Use that Java class in your main application – If class represents HTML, use the GWT DOM API to insert it – If class represents a Widget, use normal “add” method to insert it

Advantages of UiBinder • Can make complex page layouts using HTML – Or HTML-like XML • Analogous to adding JSP to pure-servlet apps • More maintainable • Graphic Web designers can be involved from initial design through maintenance – Easy to start with regular HTML and gradually “sprinkle in” GWT bindings • Separation of concerns – Aesthetics and functionality of UI no longer mashed together • Compile-time check of cross references between XML & Java and even within XML itself

• Better browser performance – Browsers are very fast at stuffing long strings into innerHTML of an element • Not so much when it comes to executing JavaScript APIs – Lesson: use regular HTML whenever possible! – Goal of UiBinder: Make the easier choice the right choice

Booze