Skip to content

GWT Mini Pattern: Configuration Reader

I’ve written about configuration options to GWT widgets before. Basically, the idea is that you have some configuration that lets the widget change behavior without redeploying or compiling code. In fact, nontechnical users (like designers) can change configuration, if it’s documented. These are the ways I know to specify configuration:

Meta tags

In the page:

<meta content="bar" name="foo" id="foo" />

Updated 4/1/2008, to have id in the meta tag attbute.

In your code:

String var = DOM.getElementProperty(DOM.getElementById("foo"), "content");

You can also request only Boolean and Int:

String var = DOM.getElementPropertyInt(DOM.getElementById("foo"), "content");

This is simple, all browsers ignore these tags, and you can place them anywhere in a page and get them read. However, attributes can only contain strings.

Hidden spans

In the page:

<span id="foo" style="display: none">bar</span>

In your code:

String var = DOM.getInnerHTML(DOM.getElementById("foo"));

This is a good choice if you want configuration to be more structured than what a tag attribute can provide--you can parse the 'var' string further.

Javascript using jsni

<script type="text/javascript">
var ID = 'bar';
</script>

And in your code:

private native String getIDAsString()/*-{
if ($wnd.ID == undefined) {
return "";
} else {
return $wnd.ID;
}
}-*/;

private Integer getID() {
Integer id = new Integer(-1);
try {
id = Integer.valueOf(getIDAsString());
} catch (NumberFormatException ignore) {}
return id;
}

Integer foo = getID();

This method is great when you have variables that are used by other javascript components that you'd like to leverage for your GWT component, or if you have a really complex configuration that is multiple levels in structure.

Javascript using dictionary

(As outlined here and here.)
In the page:

<script type="text/javascript">
var dictionary = {
foo: "bar"
};
</script>

In your code:

Dictionary theme = Dictionary.getDictionary("dictionary");
String bar = theme.get("foo");

This is good for simple hash datastructures. I haven't tried it, but from the documentation, it doesn't look like it supports anything past String key value pairs, and your module must inherit from com.google.gwt.i18n.I18N.

Regardless of your configuration method, I've found myself using a ConfigReader to isolate this logic. It looks something like this:

public class ConfigReader{

private final boolean opt1;
private final String opt2;

public ConfigReader(){
// init opt1 and opt2 using one of the four methods above.
}

public boolean isOpt1() {
return opt1;
}

public String getOpt2() {
return opt2;
}
}

Thunderbird Plugins: Lightning

If you live in your email and you use Thunderbird, I’d recommend taking a look at Lightning.  It’s a calendaring plugin to Thunderbird.  It has changed the way I schedule my life–I used to have a mishmash of emails, paper calenders, todo lists  on the back of envelopes and memories that coordinated my life.  Now I just have one place that I go to.  You can have calendars on remote servers, using HTTP (readonly), webDAV or ftp, multiple calendars, and reminders.  It’s still beta software (version 0.7) and under active development, so, of course, buyer beware, but I’ve found it to be quite useful.  If you want to follow future progress, visit the Mozilla Calendar Weblog.

GWT Mini Pattern: Use a span to enable

Since I last checked, you aren’t able to have more than one GWT module on a page.  However, each widget is independent, so it makes a lot of sense to package them up as separate modules.  Then, you have one module that inherits from all of the other ones, and therefore all the widget code gets executed.  Except, sometimes it makes sense for a widget to be on one page and not another.  The easies way I have found to do this is to use a span tag with a unique id to mark a page for a component.  Sometimes the span tag is where the component places itself–other times it just serves as a
marker for a component which manipulates the DOM in other ways.

The code often looks like this:

RootPanel rp = RootPanel.get(SPAN_ID);
if (rp != null) {

MyComponent obj = new MyComponent();
rp.add(obj);
}

Now, if we’re on a page that this component does not make sense on, it never gets intialized, no network calls are made, etc.

One issue is that if you want to have the component in more than one place on the page, you need to handle that with special cases.  You can simply use the same id twice, because it is bad form to have more than one element with the same id on a single page–ids are supposed to be globally unique on a page.  If you could use a special tag, that’d be nice, but GWT does not support getElementsByTagName.

GWT Mini Patterns Introduction

GWT can be used to create applications and widgets. I’ve done both, but the feeling I get from reading the newsgroups is that a lot of people are using using GWT to build network applications rather than smaller chunks of functionality. So, I’m going to write a number of posts about GWT component patterns.

First off, what’s a GWT component? In my mind, it is a small bit of functionality that is better run on the client than on the server. It can have server interaction. It does not occupy the entire screen, and has to integrate into an existing HTML based application. Components are relatively self contained and can be dropped in multiple places across a website, or across different websites.

The patterns in this category are not that complicated. They just seemed to be popping up in my code more than once and I thought it’d be nice to document them. Check back here for more as I write them.

[tags]patterns,google web toolkit[/tags]