GWT – Introducing UiBinder

In this final post of GWT introduction, we are going to learn about UiBinder.  We will update the basic calculator project to use UiBinder for laying out the UI instead of writing a much less readable java code.

UiBinders provide a way for us to declare the layout of your application and widgets using traditional HTML and CSS rather than programatically in java.
This provides us with a much richer way to create our application which enforces the design principle – “Separation Of Concerns” by separating Functionality and View of User Interface.

Step 1: Generate UiBinder template

Right Click the client package (com.example.hellogwt.client in this case) select New –> Other. Type in: UiBinder and then your widget name in the next popup
(SimpleCalculatorWidget in this case). See image for more info.

uibinder-1Once you click finish, GWT will create a sample widget for you which you can actually test on your browser before you go ahead and start coding your own calculator widget. All you need to do it change you onModuleLoad() method in HelloGWT.java to look like this:

 

Now, you need to run your application. If it is already running you just need to refresh the application page already opened in your browser. Since, you made changes on the client side only, GWT can pick up your changes without you having to restart the server. Which is pretty cool because it saves a lot of time during application development.

On refresh, GWT will take a while to recompile and then you should be able to see a tiny button following a Hello. You can even click this button to see a popup saying hello.

Step 2: Understand the generated code

Now, before we jump into coding our calculator, it is worthwhile to take a look at what GWT has generated for us and get ourselves familiar to UiBinder.

Here you can see that GWt uses:

<ui:style></<ui:style> tags to define CSS.
<g:HTMLPanel></g:HTMLPanel> GWT panel to layout UI. It is the HTMLPanel tag under which we will add our code to create our simple calculator UI.
<g:Button        /> a Button element.
styleName=“{style.important}” this is how we apply the css to any UI element.
ui:field=“button” makes the UI element available to the owning Java class through its field name.

uifield 

If you are even remotely familiar with HTML, this should look pretty similar to you. If not, don’t worry, GWT provides its own set of panel which you can use for your UI Layouts. You can learn more about them in GWT’s official website here.

The second file GWT created for us is SimpleCalculatorWidget.java, which is an associated owner class to theUiBinder template that allows programmatic access to the UI constructs declared in the template. Let’s take a look at them one by one.

 

This is the boilerplate code which glues the UiBinder template(UI) to the Java code(Functionality). The UiBinder<U, O> interface declares two parameter types:

  • U is the type of root element declared in the ui.xml file, returned by the createAndBindUi call
  • O is the owner type whose @UiFields are to be filled in.

In the constructor you will notice:

It creates and returns the root object of the UI, and fills any fields of owner tagged with UiField. In this case there is only one, the Button. initWidget initialises the widget so that we can call it any methods on it or add it to a panel, like we added it to our RootPanel in onModuleLoad() method.

 

This is how we add event handlers to our UI elements. Compare this with the way we added click handler programmatically in our previous post.

By now, you should have a fairly good idea about what UiBinder is and how it works.

We will now update the generated ui.xml file to create out Calculator UI and corresponding Java file to handle Calculate button click so that the operands get passed to the server and returned calculation(summation, in this case) gets rendered on screen.

Step 3: Update the UiBinder template

Cut the <table></table> from HelloGWT.html, as we don’t want to dump all UI related code in the host file, and paste it in SimpleCalculatorWidget.ui.xml. We will create our widgets as their own file and just add them to the HTML’s body using RootPanel.get().add(…).

Read the code carefully and notice that how we have introduced new TextBox element and using ui:field attribute for our elements so that we can refer them in our java code.

 

Step 4: Update UiBinder owning Java file

Create reference variables to refer to the template file’s UI elements, using @UiField annotation.

Update the Calculate button’s Click Handler to handle field verification and service calling.

 

 

This is how your UI should look during various phases of  testing:

screen-shot-2016-12-11-at-8-55-47-pm

Exercises:
1.
Change the color of result label to green when the calculator displays the result. Make sure the error message is still displayed in red. There are multiple ways to do it.

Conclusion:

This concludes the GWT’s introductory tutorial. Please comment on this series and help me improve. Also, let me know if it helped you or I should include something else to help you better.

With this basic and quick intro out of the way you should keep checking codecramp.com for some really cool and advanced GWT stuff in coming days.

Till then, take care.

Happy Learning!!!