Tuesday, December 7, 2010

State of GWT for mobile 2

In my last post I have been talking about different options to use GWT for mobile development. In this post I will focus on one of these options, HTML5 offline web application. HTML5 offline web application continue to work while they are offline. That means such a web application can be loaded just once and run without Internet connection. So here is how I got a GWT application in shape to run as offline app...

It is pretty easy to tell the browser that your web app is offline capable, just add a manifest attribute to the <html> tag:

<html manifest="cache.manifest">

In this cache.manifest file you specify which files shall be stored by the browser for offline usage. The manifest file is a plain text file which lists all resources, the paths are relative to the location of the manifest file. The detailed syntax of this manifest file is specified right here. A very simple cache.manifest file looks like this:


Et voilĂ  your application can run without an internet connection. Now, can you see the problem with GWT? Right... The name of the output produced by the GWT compiler changes with every compile. So the cache.manifest file has to be constructed dynamically. There is a good example by Alex Moffat on the development blog of Lombardi Software. Everything you need to know about GWT linkers, how to write one and how to configure it is explained. Something quite similar has been presented at the Google IO 2010 by Matt Mastracci, check out the video and slides of the talk GWT Linkers target HTML5 Web Workers, Chrome Extensions, and more as well.

So we have a dynamically created cache.manifest file which lists all our resources. There is just one tiny little thing left to be done. The filetype of the cache.manifest file has to be set to text/manifest, otherwise the browser will ignore it. You have to change the web server HTTP Headers configuration. There are different solutions depending on the web server you are using. To make this work in the Apache Tomcat, I have added a .htaccess file to the output directory. The .htaccess file contains one line only:

AddType text/cache-manifest .manifest

So that's it. Deploy you app and open your browser of choice (an HTML5 offline web application capable one of course). The first time your browser should ask you about installing the app for offline usage.

This is only the beginning. There are a couple of iPhone specific meta tags that can be added to your HTML, more about that next time...

Tuesday, November 30, 2010

State of GWT for mobile

I've been playing around with developing mobile apps using GWT. Using Java to output cross platform mobile apps seems like a no brainer. So I expected to find tons of examples, but that is not the case. I made a HTML5 offline web application demo for a recent talk on GWT. But this time I was up to create a real mobile app, something that could be published in an app store.

There are a variety of JavaScript frameworks (PhoneGap, jqtouch, Sencha Touch, titanium-mobile and others) tailored to mobile apps. But I could only find a GWT-wrapper project called gwt-phonegap for PhoneGap. PhoneGap has a very neat approach. It consists of two parts, one part is the actual JavaScript framework which provides access to mobile phone features including location data, accelerometer, camera, sound and more. The other part takes care of the integration of our HTML/CSS/JS code into a native mobile phone application. It sets up some type of WebKit view wrapped for all kinds of mobile platforms. Alas I could not get it to work properly. A new version of PhoneGap has been release just lately and gwt-phonegap did not play well with it (at least not in the Android emulator).

So I went back to the HTML5 route. There the a GWT third party library gwt-mobile-webkit which provides access to the HTML5 features of WebKit. That includes the W3C specifications W3C Web Database, W3C Web Storage, W3C Geolocation API and Application Cache API. I've only made a small test application using the location API. I've then used WebKit wrapper part of PhoneGap to make a native app for Android and one for the iPhone. That worked fine so far.

But I have to say, everything is kind of clunky, lot's of back and forth between the different project. And testing on the emulators is no joy either. I definitely want to go back to gwt-phonegap, having only one framework for everything could make things easier.

Anybody out there with a better approach?

Tuesday, September 14, 2010

Herbstcampus conference 2010

I have published the presentation slides and examples of my Herbstcampus conference talk on my website. In the talk I have presented some of the new features of GWT 2.0. At the end of the talk there were some code demos to showcase the most important new features, including Layout Panels, UiBinder and Code Splitting.

I used a small calculator web application for the example. The code can be found over here...

Sunday, August 22, 2010

Traceurl goes GWT 2.0

I finally managed to update the traceurl.com website to GWT 2.0 (2.0.4 to be precise). Up to now traceurl.com was compiled with a GWT 1.5 compiler. This update should fix a couple of issues with IE8 and bring some overall improvements in performance. The update path was quite smooth, although I had to fiddle with some third party libraries. Let me know in case you experience any problems...