A framework for GWT multipage applications
This article is about the development of Rich Internet applications with Google Web Toolkit (GWT) that consist of multiple HTML pages like flickr or facebook. It dicusses techniques to distinguish the different HTML host pages on the client side and an architecture to organize your entrypoints. Finally a framework for gwt multipage applications is introduced.
GWT applications, HTML host pages, modules and entry points
Some time ago I was developing a web application with jsp that consisted of a couple of jsp files. To enhance the usability of the user interface I wanted to add some ajax functionality to the pages and thus I was looking for a reasonable way to integrate GWT into my project. But that was not a simple thing, since the classical GWT application has got one HTML host page and only one entry point. I did not want to create one module per jsp file and so I was googling for a solution – I’m not the only one having this problem, but did not find a simple way to solve this problem. So I decided to develop my own solution and share it as an open source project on code.google.com.
How to choose the right entrypoint for the current page
If you’ve got one module for the entire web application with one registered entrypoint you have to know, which page is currently displayed to call the code according to the page. Some possibilities (this list is not complete!) are abvious:
- Render a javascript variable containing the name of the entrypoint on the server side into the header of the html page and read the value via JSNI.
- Render a meta tag to the header containing the name of the entrypoint on the server side and read the value via the DOM object.
- Use the page’s title or a part of the title and read the value via the Window object.
- Use the URL of the page and read the value with the Window object.
I decided to choose the last option and annotate entrypoints with a regular expression describing the adresses that are valid for the entrypoint.
A framework for multipage applications with GWT
Now we need an architecture for a framework that decides which entrypoint is the right one, creates an instance and calls its onModuleLoad method. The first step is to mark the entrypoints with java annotations containing a regular expression for which the entrypoints are valid:
package com.claudiushauptmann.gwt.multipage.sample.client;
import com.claudiushauptmann.gwt.multipage.client.MultipageEntryPoint;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
@MultipageEntryPoint(urlPattern = "MyMultipageEntryPoint.html")
public class MyMultipageEntryPoint implements EntryPoint {
public void onModuleLoad() {
Label label = new Label("MyMultipageEntryPoint");
RootPanel.get().add(label);
}
}
Second, we need a dispatcher entrypoint that is called instead of the target entry points, that decides which is the right entrypoint and calls it’s onModuleLoad method:
<module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- Inherit the gwt-multipage module --> <inherits name='com.claudiushauptmann.gwt.multipage.gwt-multipage'/> <!-- Use this EntryPoint instead of your own one. --> <entry-point class='com.claudiushauptmann.gwt.multipage.client.EntrypointDispatcher'/> </module>
Via deferred binding the dispatcher entrypoint knows all possible entrypoints and looks whose regular expression matches the current url.
Conclusion
This framework was developed for multipage Rich Internet applications that are using GWT. The focus is about the pages and their entrypoints. There are some other issues about multipage Rich Internet applications that are not topic of this article but will perhaps find a place in this framework in the future.
If you are interested in this project you will find it at code.google.com:
http://code.google.com/p/gwt-multipage/
Please give some feedback and report bugs! The downloads are here, some more documentation will come soon.