Learning GWT UiBinder – Part 2 (Styles and Instantiation)

Part 1 of this short tutorial explained how to layout a component UI with help of UiBinder.
This part will show how to style already layouted structure.
To begin with we create a CSS file with needed styles:

@CHARSET "UTF-8";
.name{
    font-weight: bold;
}

.label{
    color: #0000FF;
    font-style: italic;
}

.bio{
    color: #666666;
}
.photo{
    margin-right: 5px;
}

Then we register this CSS in the UiBinder xml template:

Then we assign to widgets required styles with help of addStyleNames attributes.
That’s it about simple styling.

I also decided to have “bio” part of the user profile to be rendered inside a disclosure panel so the users can expand/collapse it as needed.
The first though is to do it like this:

<g:DiclosurePanel>
<g:Label ui:field="bio" addStyleNames="{style.bio}"/>
</g:DisclosurePanel>

But this way will not allow me to set the header of the disclosure panel. DisclosurePanel has method setHeader(Widget) but I don’t know how to nicely construct and reference a widget inside the xml attribute.
Also the mostly useful constructor of the DisclosurePanel class it the public DisclosurePanel(ImageResource openImage, ImageResource closedImage,
String headerText) which allows setting of open/close icons as well as the string header. I don’t know why GWT guys have constructor with String parameter but setter only with Widget parameter, but this is the different story. Our task is to be able to instantiate the DisclosurePanel with help of that mentioned constructor.
For being able to delegate instantiation of UI components from the GWT framework to the developer’s code GWT provides @UiFactory annotation.
I just add the following method to my UserProfile.java:

@UiFactory
    protected DisclosurePanel createPanel(String label)
    {
        Resources res = GWT.create(Resources.class);
        DisclosurePanel result = new DisclosurePanel(res.getCloseIcon(), res.getOpenIcon(), label);
        return result;
    }

Now each time I will write in my .ui.xml

<g:DisclosurePanel label="Details">
            <g:Label ui:field="bio" addStyleNames="{style.bio}"/>
 </g:DisclosurePanel>

for example it will call the createPanel(String label) method to get the instance of the DisclosurePanel with specified textual header and open/close icons.
In result we will have this:

There are some more annotations available with UiBinder but this little example actually shown the essence of it.

@CHARSET “UTF-8″;
.name{
font-weight: bold;
}.label{
color: #0000FF;
font-style: italic;
}

.bio{
color: #666666;
}

.photo{
margin-right: 5px;
}

Advertisement