Learning GWT UiBinder – Part 1 (Layouting)

Today I decided to look inside UiBinder and learn some basics of how to work with it.
Frankly speaking it was not that hard to get it, especially after being familiar with Flex MXML which serves the same purpose: separation of your UI markup from your business logic.
In flex developers even have a special name for this approach. They call it Code Behind.

The plan was to see how much work would I save using UiBinder for designing a simple UserProfile widget.
Something like this was on my mind:

To implement this widget we will create 4 files:

• UserProfile.java – widget class
• UserProfile.ui.xml – xml file with interface markup
• UserProfileDO – data object to hold the user profile’s data. Will serve as a data provider for UserProfile widget
• entry point class to instantiate the widget and show it on the screen

Here is how it looks in my Eclipse:

We should start from the .ui.xml file, it’s like if we were developing an  HTML page and will start from the HTML itself and only after that do some javascripting, CSS-ing, etc. :

<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:FlowPanel>
        <g:HorizontalPanel>
            <g:Image ui:field="photo"/>
            <g:FlowPanel>
                <g:Label ui:field="name"/>
                <g:HorizontalPanel>
                    <g:Label text="mobile: "/>
                    <g:Label ui:field="mobile"/>
                </g:HorizontalPanel>
                <g:HorizontalPanel>
                    <g:Label text="email: "/>
                    <g:Label ui:field="email"/>
                </g:HorizontalPanel>
                <g:HorizontalPanel>
                    <g:Label text="web: "/>
                    <g:Label ui:field="web"/>
                </g:HorizontalPanel>
            </g:FlowPanel>
        </g:HorizontalPanel>
        <g:Label ui:field="bio"/>
    </g:FlowPanel>
</ui:UiBinder>

Very nice thing here is that in Eclipse you’ll get all the autosuggestion help from the IDE regarding the component names and attribute values. So this does help to write the code easy and quick.
If we where composing this UI directly in the java code it would be far from being that nice and accurate.
Notice that we marked few fields which we should be able to operate on programmatic with ui:field attribute.
So, this represent the UI we want to see for the component on the screen.

Now goes the data object to represent the raw data of some user profile:

public class UserProfileDO {
  private String imageURL;
  private String name;
  private String mobile;
  private String email;
  private String web;
  private String bio;

...getters and setters here....

  public UserProfileDO(String bio, String email, String imageURL,
 String mobile, String name, String web) {
   super();
   this.bio = bio;
   this.email = email;
   this.imageURL = imageURL;
   this.mobile = mobile;
   this.name = name;
   this.web = web;
  }
}

The last part of the puzzle is the code of the UserProfile widget:

public class UserProfile extends Composite {

    interface UserProfileUiBinder extends UiBinder<FlowPanel, UserProfile>{};
    private static UserProfileUiBinder uiBinder = GWT.create(UserProfileUiBinder.class);

    @UiField Image photo;
    @UiField Label name;
    @UiField Label mobile;
    @UiField Label email;
    @UiField Label web;
    @UiField Label bio;

    public UserProfile(UserProfileDO data)
    {
        super();
        initWidget(uiBinder.createAndBindUi(this));
        photo.setUrl(data.getImageURL());
        name.setText(data.getName());
        email.setText(data.getEmail());
        mobile.setText(data.getMobile());
        web.setText(data.getMobile());
        bio.setText(data.getBio());
    }

}

The first 2 lines will be similar for any widget which UI you want to keep in xml. Like the GWT docs says you declare an interface parametrized with 2 types: first one is the type of the topmost container you have in the widget’s xml (which is the FlowPanel in our case) and the second one is the widget’s class itself.
Then we have a constructor which takes a data object as only input parameter. The linkage of the UiBinder XML to the widget happens in the initWidget() method call.
Everything is very simple.

The last part is the entry point class which shows how easy it is to instantiate and show the UserProfile widget:

public class UiBinderLearning implements EntryPoint {

    public void onModuleLoad() {
        UserProfileDO upDO = new UserProfileDO("Project manager at Epam Systems.", "alexander.arendar@gmail.com",
                "/images/me.jpg", "+380952600399", "Alexander Arendar", "aarendar.wordpress.com");
        UserProfile userProfile= new UserProfile(upDO);
        RootPanel.get().add(userProfile);
    }
}

What we have in the browser is:

What we still miss is some styling for labels. I’ll show in the next post how to do it.
Conclusion: UiBinder really separates UI from business logic and all the middle-code stuff. I really liked it and will use it a lot.

<?xml version=”1.0″ encoding=”UTF-8″?>
<ui:UiBinder xmlns:ui=’urn:ui:com.google.gwt.uibinder’
xmlns:g=’urn:import:com.google.gwt.user.client.ui’>
<g:FlowPanel>
<g:HorizontalPanel>
<g:Image ui:field=”photo”/>
<g:FlowPanel>
<g:Label ui:field=”name”/>
<g:HorizontalPanel>
<g:Label text=”mobile: “/>
<g:Label ui:field=”mobile”/>
</g:HorizontalPanel>
<g:HorizontalPanel>
<g:Label text=”email: “/>
<g:Label ui:field=”email”/>
</g:HorizontalPanel>
<g:HorizontalPanel>
<g:Label text=”web: “/>
<g:Label ui:field=”web”/>
</g:HorizontalPanel>
</g:FlowPanel>
</g:HorizontalPanel>
<g:Label ui:field=”bio”/>
</g:FlowPanel>
</ui:UiBinder>

Advertisement