GWT Widget from HTML

Question

I have a block of HTML that I would like to use as the basis of a GWT widget, but am not quite sure the best way to do so. As an example, my HTML block looks something like this:

<div class="my-widget">
    <div class="header">
        <span class="title">Title Text</span>
    </div>
    <div class="body">
        <span class="content">Content Text</span>
    </div>
</div>

Now, I can of course paste this as a static string into an HTML widget, but in this case I need the ability to set the text of the "title" and "content" elements on the fly. This kills (or at least makes significantly more difficult) the static text option.

The first thing that comes to mind in that case is to build out the elements in GWT manually and hold references to the ones I need to alter, like so:

DivElement container = document.createDivElement();
setStyleName(container, "my-widget");
setElement(container);

DivElement header = document.createDivElement();
setStyleName(header, "header");
container.appendChild(header);

// Hold onto this element for later manipulation
DivElement title = document.createDivElement();
setStyleName(title, "title");
header.appendChild(title);

But this quickly get unmanageable for all but the simplest of layouts (which mine is not.)

What I would like is the ability to send the HTML in as static text and then do some sort of selector, like jQuery, to query the elements I want to manipulate. I'm aware of GWT-Query but I haven't been able to get it to run without error, and it seems to me to be a bit too early in it's lifespan for me to be comfortable integrating it into a professional product just yet.

I'm also aware of Google's UiBinder, which sounds exactly like what I want. The problem there is, as far as I can tell, that functionality is only available in GWT 2.0, which is still in a release candidate state and therefore unusable for me.

So, given all that (sorry for the long question!) do you have any suggestions about how best to achieve something like this?

Answer 1

How about using HTML.wrap(). For example, if you added an id of "my-widget" to your outer-most div you could then do something like:

HTML myWidget = HTML.wrap(RootPanel.get("my-widget").getElement());

Answer 2

As you probably know, GWT doesn't provide a built in widget that maps directly to a span element. If you can use a div for the title and content, then this bit of code should (no GWT on this machine, going a bit by memory) generate the DOM structure you have.

FlowPanel myWidget = new FlowPanel();
myWidget.setStyleName("my-widget");

SimplePanel header = new SimplePanel();
header.setStyleName("header");

Label title = new Label(titleText);
title.setStyleName("title");
header.add(title);
myWidget.add(header);

SimplePanel body = new SimplePanel();
body.setStyleName("body");

Label content = new Label(contentText);
content.setStyleName("content");
body.add(content);
myWidget.add(body);

From here, you can provide accessors to the content and title labels and update them as needed.

title.setText(newTitle);
content.setText(newContent);

Answer 3

GWT 2.0 will be out before the end of the year. So unless you need to deliver in a few days time, I would start working with the RC2 and try out the new UIBinder approach.