JAW Speak

Jonathan Andrew Wolter

Introducting JAW’s Very Simple GWT Html Template

with one comment

Reading time: 2 – 4 minutes

Update 2009/7/29: This is a great way to see how GWT generators and deferred binding works, but for real work I recommend Google’s newish UiBinder (formerly called the Declarative UI). See this thread in the google group.


At a recent client of ThoughtWorks’, I was writing complex GWT views. If you’ve ever worked with Google Web Toolkit, you know the pain that this can involve. Instead of creating HTML files of templates, you need to build the DOM programatically with your own widgets, 3rd party widgets, or the basic widgets GWT gives you. I wrote a simple templating system to meet my needs. Maybe it will help you too, please feel free to request features and share if it helps you.

If you try JAW’s Very Simple GWT Template, all you need to do is follow a few conventions and you get the following.

  1. Create a html file with your complex layout. For instance a really fancy 12×12 html table with all sorts of colspans and rowspans for displaying detailed tabular data.
  2. Create a value object (in Java, on the GWT side) that you want to automatically use to dump some attributes into the template.
  3. In the html template, use ${valueObject.someProperty} style notation where you want automatic setting of values into the template.
  4. In the html template, use $${specialDoubleDollarSign} notation where you want to manually bind the template values.

Really, it is very simple and no frills. It solved my need of presenting data in a visually rich way, into html that a designer could produce without any knowledge of GWT. Also, you can embed it into other widgets, or other widgets into it.

I think it’s cool in two ways:

  1. Automatic data binding from your value object, into the ${myObj.property} template slots.
  2. Ability to manually attach complex widgets (with GWT defined event behavior), into the $${doubleDollarSignSlot} template slots.

I’ve created a Google Code project with the source code and some examples (as tests). Please take a look and leave criticism and feedback.

If you’re curious how this is implemented, it’s all with defered binding and generators in GWT. As all code I actually want to work, I’ve test driven it and you can look at the tests for details.

Bookmark and Share

Written by Jonathan

November 29th, 2008 at 6:44 pm

Posted in code, java

Tagged with

One Response to 'Introducting JAW’s Very Simple GWT Html Template'

Subscribe to comments with RSS or TrackBack to 'Introducting JAW’s Very Simple GWT Html Template'.

  1. I will be trying this stuff for one of our products. We require a similar templating framework where the UI can be added on the fly. I will try and let you know the feedback.

    Shrirang

    30 Jun 09 at 3:59 am

Leave a Reply