GWT is Flexible 鈥?an iPhone Demo
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.
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.
]]>