Simplifying GWT Markup with HTML Widgets

The more I’ve worked with CSS and GWT, the more I’ve tried to simplify the markup that GWT creates. GWT spits out a lot of extraneous DIVs, which, while providing maximum flexibility, result in bloated markup. For example, here’s some GWT code to create a simple horizontal menu of hyperlinks:

	public void setMenu(List<MenuItem> items)
	{
		// userMenu is a HorizontalPanel
		userMenu.clear();
		for (int i=0; i<items.size(); i++)
		{
			MenuItem item = items.get(i);
			if (i>0)
			{
				userMenu.add(new Label ("|"));
			}
			Hyperlink y = new Hyperlink(item.getLabel(), item.getUrl());
			userMenu.add(y);
		}
	}

And here’s the resulting markup, courtesy of Firebug (an indispensable tool for CSS work, especially in GWT):

<table cellspacing="0" cellpadding="0" id="detail_menu">
	<tbody>
		<tr>
			<td align="left" style="vertical-align: bottom;">
				<div class="gwt-Hyperlink">
					<a href="#prayers">Prayers</a>
				</div>
			</td>
			<td align="left" style="vertical-align: bottom;">
				<div class="gwt-Label">|</div>
			</td>
			<td align="left" style="vertical-align: bottom;">
				<div class="gwt-Hyperlink">
					<a href="#manage_lists">Manage Lists</a>
				</div>
			</td>
		</tr>
	</tbody>
</table>

That’s quite a bit of markup for a simple menu of hyperlinks, albeit it requires very little CSS. The HorizontalPanel ensures the hyperlinks appear horizontally, so really all the CSS that’s needed is a little padding in each TD to space things out.

A simpler alternative for menus used by many Web designers is the humble unordered list. Unfortunately, GWT does not have widgets that spit out the lowly UL and LI tags. You can always do it manually using the HTML or InlineHTML widgets; however, it is more satisfying to use real widgets, so I created an UnorderedListWidget and ListItemWidget. Here is the previous GWT menu code rewritten using the new widgets:

	public void setMenu(List<MenuItem> items)
	{
		// userMenu is an UnorderedListWidget
		userMenu.clear();
		for (int i=0; i<items.size(); i++)
		{
			MenuItem item = items.get(i);
			if (i>0)
			{
				userMenu.add(new ListItemWidget("|"));
			}
			Hyperlink y = new Hyperlink(item.getLabel(), item.getUrl());
			userMenu.add(new ListItemWidget(y));
		}
	}

And here’s the much leaner markup (unfortunately, I do not know a way to get rid of the unnecessary Hyperlink DIVs apart from creating a lightweight Hyperlink widget):

<ul id="detail_menu" class="roa-hMenu">
	<li>
		<div class="gwt-Hyperlink">
			<a href="#prayers">Prayers</a>
		</div>
	</li>
	<li>|</li>
	<li>
		<div class="gwt-Hyperlink">
			<a href="#manage_lists">Manage Lists</a>
		</div>
	</li>
</ul>

Finally, here are the widgets. It’s easy to generate any HTML markup you need this way, thanks to GWT’s Document and Element hierarchies.

package com.turbomanage.gwt.client.ui.widget;

import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.UListElement;
import com.google.gwt.user.client.ui.ComplexPanel;
import com.google.gwt.user.client.ui.Widget;

public class UnorderedListWidget extends ComplexPanel
{
	public UnorderedListWidget()
	{
		setElement(Document.get().createULElement());
	}

	public void setId(String id)
	{
		// Set an attribute common to all tags
		getElement().setId(id);
	}

	public void setDir(String dir)
	{
		// Set an attribute specific to this tag
		((UListElement) getElement().cast()).setDir(dir);
	}

	public void add(Widget w)
	{
		// ComplexPanel requires the two-arg add() method
		super.add(w, getElement());
	}
}

package com.turbomanage.gwt.client.ui.widget;

import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;

public class ListItemWidget extends SimplePanel
{
	public ListItemWidget()
	{
		super((Element) Document.get().createLIElement().cast());
	}

	public ListItemWidget(String s)
	{
		this();
		getElement().setInnerText(s);
	}

	public ListItemWidget(Widget w)
	{
		this();
		this.add(w);
	}
}

Enjoy!