One neat discovery I found in the webOS 1.4.5 SDK is that it is possible to have a simple app which doesn’t use Mojo. Why would you want to? Load time! Mojo brings a lot to the table, but if you want to use your own favorite JavaScript framework, much of that ends up being overhead and increases your app’s load time.

Step one: Make a web app and test it in Chrome or Safari.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Save this into a new folder (using a folder name of “hello” in this example) as index.html. This will become your app folder. You can test your app in Chrome or Safari by simply opening this file in your browser. Not terribly impressive, but hey, it’s a start.

Step two: Add a file to turn your folder into an app.

{
    "id":"com.yourdomain.hello",
    "version":"0.0.1",
    "vendor":"Your Company",
    "type":"web",
    "main":"index.html",
    "title":"Hello"
}

Save this off as appinfo.json in your application folder. You can test this app real fast in webOS. Just pull up your emulator, then open a command line prompt and do this:

palm-package hello
palm-install com.yourdomain.hello_0.0.1_all.ipk

Then go to your emulator and pull it up. And… nothing happens. You get a blank card and a loading spinner. Hypnotic, but certainly not what we intended. We’re missing something, and luckily it’s not much of a something.

Step three: Add this tiny chunk of JavaScript near the top:

if (window.PalmSystem) PalmSystem.stageReady();

This tells webOS that you are ready to present your app to the user. It exists to give you a chance to preload whatever you need (usually your JavaScript libraries and some app initialization) so your users don’t see things flying around the screen as you load them.

Add that line of code, so now your index.html should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <script>
        if (window.PalmSystem)
            window.PalmSystem.stageReady();
    </script>
    <h1>Hello World!</h1>
</body>
</html>

Now when you palm-package and palm-install (as above) and then run your app, instead of a card floating there with a loading spinner, you get your app!

Moving forward

From here, you can add your favorite JavaScript library (some work better on mobile devices than others), and make a proper app.

This is exciting stuff for cross platform mobile development. I’ll be working closely with Palm engineering to see what other gems we can expose, so stay tuned!

Advertisements