Using Java on webOS with GWT

5 BY devrel

The Google Web Toolkit™ software development framework, or GWT, is a great open source SDK that lets you build web applications using the Oracle® Java™ language. Though it was intended for web-based applications loaded in a web browser, it can also be used to create native webOS applications.

What is GWT?

Fundamentally, GWT is a compiler which turns Java source code into optimized JavaScript that can run in a web browser. GWT also has a fully skinnable UI toolkit and lots of utility libraries. It creates standalone HTML, JavaScript, and CSS that can be run locally or in a web browser. GWT can also generate proxy classes to communicate with server side code (JavaEE stuff), but we won’t use that in today’s example.

The first thing you might ask is why you might want to use GWT? There are lots of reasons. You might be a Java developer who prefers using a statically-typed language. You might be a web designer working with Java developers on your team. You might have existing Java code that you would like to reuse. Or maybe you just want to try something new. Whatever your reason, Google has a huge collection of resources to help you get started.

Building for the desktop browser

To get started, first run through the Get Started with the GWT SDK tutorial to make sure you have the GWT SDK downloaded and set up correctly. This will take less than 5 minutes.

Now run through the Google’s excellent full Getting Started tutorial. This should take less than an hour. In this tutorial you will make a simple stock watching app that has a full GUI, customized CSS, event processing, and field validation. Once you are done, you will have a GWT app running in your browser, like this:

StyleAfter.png

Now you are ready to turn the GWT app into a webOS app. First, download PhoneGap as described here, then copy the phonegap-palm directory to a new location. We will copy all of the GWT output into the new phonegap-palm/framework/www/ directory.

When you compiled the GWT app, it created a directory called ‘war‘ with all of the compiled output in it. In this directory you will see two files StockWatcher.html and StockWatcher.css and two sub-directories called stockwatcher and WEB-INF. Ignore the WEB-INF directory since it’s only useful for server side code. Inside the stockwatcher directory you will see a lot of strange looking files. When you compile your app, GWT turns it into a directory full of HTML, JavaScript code, and images with long random looking filenames like 6137B4343EAFEFC315A4BFB67BF30A11.cache.html.
This is the actual compiled application code and resources. GWT uses these long file names to ensure that all code is cached properly in the web browser when the app is loaded over the web. For our purposes we don’t care, since our app will be local. We just want to copy the entire contents of the war directory (except for WEB-INF) over to the phonegap-palm/framework/www directory.

GWT created the StockWatcher.html page as the start page. webOS apps need an index.html file to start, so rename StockWatcher.html to index.html. Now edit the index.html to add the following code just inside the <head> element.

<script language="javascript" type="text/javascript"
   charset="utf-8">
function onLoad() {
    if (window.PalmSystem) {
        window.PalmSystem.stageReady();
    }
}
</script>
<script language="javascript" type="text/javascript"
    src="phonegap.js"></script>

Now add an event handler to the body tag to call onLoad() when the app launches.


<body onload="onLoad()">

With these two change you can now build the webOS app. Just cd to the phonegap-palm directory and run ‘make’. This will generate an .ipk file and run it in the emulator (make sure you already have the emulator started). If all went well it will look like this:

MarsEditScreenSnapz001.png

That’s all there is to it. Since GWT apps are fundamentally just HTML, JavaScript, and CSS they can run on webOS with almost no modification. From here you could add server side connections, use some of the many GWT community libraries, or customize the UI with CSS.

Comments (5)

  1. Shai says:

    Is there a way to implement java.lang.Thread within GWT on webOS?
    I have quite a bit of code working in J2ME that should be pretty easy to port to GWT but I do need threads and can’t make it event driven…

    • unwiredben says:

      No, JavaScript doesn’t support threads. Instead, it uses an async I/O model where process is divided up into chunks as data arrives from network and disk sources.

      (Well, there are WebWorkers on some desktop browsers, but the data access model for a worker thread is very limited, and that’s not supported on HP webOS)

  2. rsanchez says:

    Yet another way to develop for webOS. You have Mojo, PDK, soon you’ll have PDK/Mojo hybrids, I read somewhere recently about an cross-platform SDK that can compile apps for iOS, Android, and webOS, some guy ported Qt a short while ago. There are so many ways, just need to get developers interested.