TurboManage

David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler


    Web app developer since 1994 and Google Cloud Platform Instructor now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 223 other followers

  • Sleepless Nights…

    February 2010
    S M T W T F S
     123456
    78910111213
    14151617181920
    21222324252627
    28  
  • Blog Stats

    • 1,029,259 hits

Archive for February 11th, 2010

Simplifying GWT Markup with HTML Widgets

Posted by David Chandler on February 11, 2010

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!

Posted in Google Web Toolkit | 10 Comments »

 
%d bloggers like this: