GWT and XUL

Dietrich Kappe, Friday, May 2, 2008 @ 5:36 pm

There are lots of nice things about writing event-based component GUI applications, but constructing UI's using code is not one of them. It's ugly, messy, time-consuming and hard to maintain. It's also a pain to read, which makes the maintenance even harder.

There are a number of solutions that have been tried over the year -- WYSIWYG roundtrip GUI designer in particular -- but the one I like the most is the XML-based UI description. Much like the DOM trees that you can identify with id's and to which you can hook up event handlers, XML UI markup languages -- XUL, SwiXML, Luxor -- allow you to construct a hierarchical UI with absolutely no compiled code whatsoever. Just write the XML, load it, hook up the GUI to the event handlers and you're ready to rock. And since the XML file configuration, not code, you can write and load different XML files if you feel like changing your UI a bit.

If this sounds like a good idea to you, you'll be happy to know that in the GWT Incubator Joel Webber is developing a project known as DeclarativeUi.

Writing imperative Java code to construct a user-interface hierarchy is awkward, and it makes working with UI designers difficult and/or impossible. What we want is to provide designers (and developers) with a simple way to define the static structure of applications and widgets, without having to write code.

Sound familiar? What does this markup and it's user look like?

<g:HorizontalPanel xmlns:g='http://code.google.com/webtoolkit/com.google.gwt.user.client.ui'>  <g:HTML id='label'>This &amp;lt;em&amp;gt;text box</em> is editable:</g:HTML>  <g:TextBox id='editor'/><g:HorizontalPanel>

And the code that implements the behaviors looks like this:

public abstract class EditableTextBox extends Composite implements Template {

  public static EditableTextBox create() {    return (EditableTextBox) GWT.create(EditableTextBox.class);  }

  public EditableTextBox() {    getEditor().setText("default text");  }

  public void setCaption(String captionHTML) {    getCaption().setHTML(captionHTML);  }

  public String getValue() {    return getEditor().getText();  }

  protected abstract HTML getCaption();  protected abstract TextBox getEditor();}

You use GWT.create(EditableTextBox.class)
to instantiate this new composite widget. The plans are to include
generation of a skeleton Java file from the xml. One very nice thing
about XML markup is that's its pretty easy to write a WYSIWYG GUI
editor using markup. Hopefully we'll see a few more of those for GWT.
Run-time evaluation, on the other hand, is not an objective, since that
would require something like reflection. That's a much larger goal and
well beyond the scope of this tool.
XUL and GWT

For those of you who were looking for an article on developing XUL extensions with GWT, have a look over at gdevelop.com for an article about just that topic.

agile ajax

Comments

• Leave a comment
• Comment feed for this post
• TrackBack URL

None so far.

Leave a comment