GWT is a very flexible environment that allows you to write a web application
in Java and compile it to Javascript -- even for the iPhone.
A number of people have fears with GWT, for instance
- (not true) GWT isn't flexible which will lead developers down a dead-end
path.
- (not true) GWT is ugly, and can't be used to make "gucci" UIs.
This post will show that these are just myths.
Demos
First, lets take a look at the demo. Below is a re-write of Apple's "Simple
Browser" demo using GWT. You can find the original demo here: https://developer.apple.com/webapps/docs/referencelibrary/index-date.html
(search on the page for "simple browser").
You can try the GWT version of the demo on the iPhone: live GWT demo, and the source
code which includes the source control history.
or compare it to the original Apple demo
For those who don't have an iPhone, here is a quick video of the demo written
in GWT:
GWT is Flexible
The iPhone provides several unique challenges to GWT:
- iPhone has specific events like orientation change, touch, and transition
end events
- iPhone has specific animation features to slide from one "page" to the next
(Page, in the demo, is conceptual. Once the app is loaded, it never goes to
another HTML page.)
- The built-in GWT controls prefer tags like <div> and <table>.
We want to use other HTML tags such as <ul> and <li> in the iPhone
GWT manages events, with good reason. By managing events, GWT prevents a whole class of memory leaks. So
implementing events that GWT is unaware of is not ideal. The demo handles this
by either firing event on objects that will always exist in the application, or
adding or remove events when the control is added or removed from the DOM using
the onLoad() and onUnload() methods.
The GWT demo wires up the iPhone specific events by calling native JSNI
method. In native methods you write any Javascript you want, but you have the
added risk of memory leaks. This method wires up the screen orientation change
event:
private native void registerOrientationChangedHandler(
OrientationChangedDomEvent handler) /*-{
var callback = function(){
handler.@net.lenharts.gwt.sampleiphoneapp.client.model.Screen$OrientationChangedDomEvent::onOrientationChanged()();
}
$wnd.addEventListener("orientationchange", callback, false);
}-*/;
When the screen orientation changes, the
handler.@net.lenharts.gwt.sampleiphoneapp.client.model.Screen$OrientationChangedDomEvent::onOrientationChanged()()
method is called, which is a special GWT notation allow you to call Java methods
from Javascript. When the code is compiled to Javascript, this will be replaced
with the actual compiled Javascript function.
Animations on the iPhone are surprising easy. In fact animations are included in the CSS 3 specification
soon to be released. If you have the Google Chrome 2 browser, you can try out
the animations in the link.
To use these animations the pseudo code is
- Set the content of a element.
- Set the element to a CSS class that disables animations
- Set the element to another CSS class that will position the element at the
beginning position of the animation (give the element two classes)
- Schedule a DeferredCommand
- In the DeferredCommand, remove the CSS classes set above and set the element
to a CSS class that enables animations.
- Then set the element to a CSS class to position the element at the
destination position. (again keeping the animation class).
- When the transition ends (using the transitionend event), disable animations
by removing the CSS class that enables animations and replace it with the CSS
class to disable animations.
GWT allows you to create any type of element within the <body> tag. The
default set of widgets, unfortunately, do not give you every tag, so you have to
write your own class. Luckily you only need two classes to create any element:
one class for elements that contain text, and one class for elements that
contain other elements.
Here is the class that contains other elements:
package net.lenharts.gwt.sampleiphoneapp.client.util;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.*;
public class GenericContainerTag extends ComplexPanel {
public GenericContainerTag(String tagName) {
setElement(DOM.createElement(tagName));
}
/**
* Adds a new child widget to the panel.
*
* @param w
* the widget to be added
*/
@Override
public void add(Widget w) {
add(w, getElement());
}
/**
* Inserts a widget before the specified index.
*
* @param w
* the widget to be inserted
* @param beforeIndex
* the index before which it will be inserted
* @throws IndexOutOfBoundsException
* if <code>beforeIndex</code> is out of range
*/
public void insert(Widget w, int beforeIndex) {
insert(w, getElement(), beforeIndex, true);
}
}
To create the element, you pass in the name of the tag. For instance, if you
want to create a <ul> tag, you create it like so
GenericContainerTag ul = new GenericContainerTag("ul");
The class for elements that contain text is a bit more complicated,
especially since we're enabling iPhone specific events here. If you were to take
out the event code, you'd find this to be much smaller. Plus it tries to wire
touch events for the iPhone, and click events for all other browsers. For now,
don't worry about the details, let's just skip down to how to create it.
package net.lenharts.gwt.sampleiphoneapp.client.util;
//based on Label.java source code that comes with GWT
import com.google.gwt.user.client.ui.*;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.shared.GwtEvent;
import com.google.gwt.event.shared.HandlerRegistration;
public class GenericTextTag<E> extends Widget implements HasText {
private boolean mMovedAfterTouch = false;
private E mAttachedInfo;
private boolean mWantsEvents = false;
private boolean mEventsWiredUp = false;
HandlerRegistration mHandlerRegistration;
public GenericTextTag(String tagName) {
setElement(Document.get().createElement(tagName));
}
@Override
protected void onLoad() {
if (mWantsEvents) {
wireUpEvents();
}
}
private void wireUpEvents() {
if (!mEventsWiredUp && this.isAttached()) {
if (hasTouchEvent(this.getElement())) {
registerDomTouchEvents();
} else {
// used for debugging:
mHandlerRegistration = this.addDomHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
event.preventDefault();
fireTouchClick();
}
}, ClickEvent.getType());
}
mEventsWiredUp = true;
}
}
private void wireDownEvents() {
if (mEventsWiredUp) {
if (hasTouchEvent(this.getElement())) {
unRegisterDomTouchEvents();
} else {
mHandlerRegistration.removeHandler();
}
}
mEventsWiredUp = false;
}
@Override
protected void onUnload() {
wireDownEvents();
}
public GenericTextTag(String tagName, String text) {
this(tagName);
setText(text);
}
public void setAttachedInfo(E info) {
mAttachedInfo = info;
}
public final HandlerRegistration addHandler(
final TouchClickEvent.TouchClickHandler<E> handler) {
if (!mWantsEvents) {
mWantsEvents = true;
wireUpEvents();
}
return this
.addHandler(
handler,
(GwtEvent.Type<TouchClickEvent.TouchClickHandler<E>>) TouchClickEvent
.getType());
}
public E getAttachedInfo() {
return mAttachedInfo;
}
private native void registerDomTouchEvents() /*-{
var instance = this;
var element = this.@net.lenharts.gwt.sampleiphoneapp.client.util.GenericTextTag::getElement()();
element.ontouchstart = function(e){
instance.@net.lenharts.gwt.sampleiphoneapp.client.util.GenericTextTag::onDomTouchStart()();
};
element.ontouchmove = function(e){
instance.@net.lenharts.gwt.sampleiphoneapp.client.util.GenericTextTag::onDomTouchMove()();
};
element.ontouchend = function(e){
instance.@net.lenharts.gwt.sampleiphoneapp.client.util.GenericTextTag::onDomTouchEnd()();
};
}-*/;
private native void unRegisterDomTouchEvents() /*-{
var instance = this;
var element = this.@net.lenharts.gwt.sampleiphoneapp.client.util.GenericTextTag::getElement()();
element.ontouchstart = null;
element.ontouchmove = null;
element.ontouchend = null;
}-*/;
public void onDomTouchStart() {
mMovedAfterTouch = false;
}
public void onDomTouchMove() {
mMovedAfterTouch = true;
}
public void onDomTouchEnd() {
if (mMovedAfterTouch) {
return;
}
fireTouchClick();
}
private void fireTouchClick() {
fireEvent(new TouchClickEvent<E>(this));
}
public String getText() {
return getElement().getInnerText();
}
public void setText(String text) {
getElement().setInnerText(text);
}
private static native boolean hasTouchEvent(Element e) /*-{
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("safari") != -1 &&
ua.indexOf("applewebkit") != -1 &&
ua.indexOf("mobile") != -1)
{
return true;
}
else
{
return false;
}
}-*/;
}
The code below creates an <li> tag that contains the text "Hello
World!". The "Hello World!" test is not fixed. The class has getter and setter
methods for changing the text too.
GenericTextTag<String> li = new GenericTextTag<String>("li", "Hello World!");
GWT Does Not Have to be Ugly
As you can see in the examples above, you can create any HTML tag, and you
can use any CSS style you like. The sky is the limit on how you style your GWT
application. Many people see the GWT examples and they have an "application"
feel to it. Granted the built-in widgets encourage this, but as you can see, you
are not restricted to their widgets and you can have a more "document" feel to
your webpage. You have complete control of the body tag.
Why GWT?
For me, the difference between GWT and Javascript is whether you want to work
with a static language like Java, or a dynamic language like Javascript. I
assert, with little proof, that static languages are better. They provide a
much deeper verification of your code which I feel is necessary of any sizable
application. I remember the VBScript days, and I don't want to return to
shipping bugs that are trival to find by a static language compiler.
There are issues with the size of the javascript download that both sides
claim to be better.
- Pure Javascript is smaller because you include a library from Google that
the user has already downloaded plus your small javascript code that you write
- GWT is smaller, because the GWT compiler is highly optimized to remove dead
code and to restructure your code to be as small as possible. For instance, if
you only use 10% of a library, then the downloaded code includes only 10% of the
library.
Small apps can work OK with a dynamic language, with the potential that it
will have less code to download. However for larger applications, the GWT
compiler will produce smaller code as compared to hand written, minified
Javascript and the static language will help reduce the number of bugs.