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.

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

  1. Set the content of a element.
  2. Set the element to a CSS class that disables animations
  3. Set the element to another CSS class that will position the element at the beginning position of the animation (give the element two classes)
  4. Schedule a DeferredCommand
  5. In the DeferredCommand, remove the CSS classes set above and set the element to a CSS class that enables animations.
  6. Then set the element to a CSS class to position the element at the destination position. (again keeping the animation class).
  7. 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.

About Clay Lenhart

I am a DBA/Technical Architect for Latitude Group and love technology.
This entry was posted in Languages and tagged , , . Bookmark the permalink.

16 Responses to GWT is Flexible — an iPhone Demo

  1. This was a very interesting article. I haven’t seen any discussion of GWT applications and iPhone. Did you try extending any of the GWT controls to add these events?

  2. Clay Lenhart says:

    Oh yes. :) The source code is there to see how the events are wired up. Unfortunately you can’t wire the events in a GWT way, but since you can code Javascript in GWT, you can wire the iPhone events.

  3. Bruce Johnson says:

    Nice article & insight.

  4. OtengiM says:

    This is great article, It smells as a new GWT Iphone framework comming up?!. It would be kick ass to have a full stack from back end with google guice and webservice to the front end with GWT for iphone web applications with your ideas.

  5. devdanke says:

    Thank you for showing how to do this and linking to the demo. I’ve wanted to write a GWT iPhone app for a while, but didn’t know how hard it would be. You’ve shown me that it’s doable.

  6. domanthan says:

    in fact, we need only the GWT Rpc Compiler for Iphone, isnt it? Cause iphone doesnt need HTML and Javascripts

  7. Bart Guijt says:

    Looks like you beat me to it :-)

    Anyway, interesting research you did here. I am about to do mostly the same thing: incorporate the Dashcode parts into GWT – see http://code.google.com/p/gwt-mobile-webkit/

    Cheers!

  8. Clay Lenhart says:

    Bart,

    I saw that site recently! Great work!

  9. Erick Audet says:

    I agree with the above comment about the smell of a new GWT/iPhone framework. This is great source code. I have tested your source code by adding some new tags in the xml files (listitems, buttons, textbox) and it works great. Perhaps an opensource project should be created.

  10. Clay Lenhart says:

    No, there are too many “gotchas” for this to be a framework. For example, you have to be careful with the way I did iphone events in this example — you could get a memory leak. I couldn’t hook in to the GWT way of doing event unfortunately.

    This will remain what it is — an example. Feel free to use it as a reference!

  11. Nico says:

    Hello !

    You did a great job !…. but the sources and demo are no more available (I already saw them a few weeks ago). Do you plan to publish them back ?

    Thx, Nico

  12. Clay Lenhart says:

    Whoops, these got lost in the upgrade. You can find the source code here as well: http://bitbucket.org/Clay/sampleiphonewebapp

  13. Nico says:

    Thx ! It will be useful to test it on Android.

  14. Clay Lenhart says:

    The source files are back again.

  15. Geotako says:

    Thanks to this example, we have developed a GPS App for iPhone/Android with 100% Google Technologies (m.geotako.com):

    Technical Info:
    - Back-end using Google AppEngine cloud infrastructure
    - Front-end using Google Web Toolkit which can run on both iPhone Safari and Android Chrome (also other desktop browsers)
    - GWT based internationalization
    - Integrated with Facebook Connect for wall posting
    - Using Google Maps API for reverse geocoding (retrieve your address automatically when you add a new location)
    - HTML5 based Geolocation for tracking your location with GPS
    - HTML5 based Web Database for storing local information in the browser

    Features:
    - Discover interesting locations around you with beautiful photos
    - Share your journey with friends by checking-in to locations around you
    - Grabbing mayorship of a location when you checkin frequently
    - Post to Facebook wall when you checkin
    - Locate where your friends have been to
    - Add new locations with photos
    - A ranking showing the top travelers with the highest number of mayorships
    - Support English, Traditional Chinese and Simplified Chinese

    You may try it here: m.geotako.com

    The app can also be found in Google App Engine Applications Gallery

  16. Jeannette says:

    I see a lot of interesting content on your website.
    You have to spend a lot of time writing, i know how to save you a lot of time, there is a tool that creates readable, google
    friendly posts in couple of minutes, just search in google – k2 unlimited content

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>