Not content with re-entering the race with a brand new device, and first mainstream mobile phone wireless charger, the Touchstone, they have also developed a new operating system, the webOS, which uses Mojo.

Mojo is an MVC (Model-View-Controller) application framework, based on the HTML 5, CSS, and JavaScript web standards. Applications that are built using Mojo can be run at native speeds and have access to a wide range of APIs to access device specific functions and services.

Hearing anything familiar to the iPhone’s development stature during it’s first year?

We’ll you shouldn’t.

It’s a completely different situation.
Apple was forcing users to create iPhone optimised web applications.
In order to do this, the end user had to open Safari, and navigate to the web application. Something that was improved in a later release with icon short cuts on the main screen, but still unable to match the look or feel of any of the native Apple applications.

In contrast to this, Palm use their own SDK (JavaScript and HTML5) for all of their own applications. It’s integrated and consistent across all applications, with a specific bespoke API for interacting with the device or doing webOS specific functions.

The Mojo SDK contains a number of useful pre built widgets you can use, such as buttons, checkboxes, date picker, drawer, filterfield, list, people picker, progress bar, rich text edit, and a webview.
As well as a number of useful utility classes.
The whole Mojo framework is unit tested using its own bespoke unit test implementation.

Using the leaked SDK on an Apple Mac, I’ll be putting together a quick hello world tutorial for those getting started.

Firstly you’ll need to download and install Virtualbox.

It’s a free virtualisation software for x86 hardware created by Sun. It is used as an emulator by the SDK by loading the webOS image.

Secondarily you’ll need to download, and install, the SDK.

MAC, Rapidshare
WIN, Rapidshare

It was leaked by someone else, not myself, so I’ll link to their SDKs.

Now that you have everything installed, I would recommend having a play around the phone, and getting a feel for the interface and the conventions of the pre built applications.
If you haven’t had a chance to play with the actual device yet, you can definitely get a feel for how it behaves.

In order to create our application, we need to generate a base to build upon. The base that you’ll be generating provides you with a folder structure, and application information files.

1. Open Terminal.
2. Enter the command "palm-generate HelloWorld" and press enter.
3. You’ll receieve a message stating "Generating new_app in /Users/{username}/HelloWorld".

Open the /Users/{username}/HelloWorld folder in Finder. Replacing the {username} token with your username.

Within the HelloWorld folder you should see the following;

app (folder)
JavaScript class files

appinfo.json
used to specify a unique name, version, and icon information

icon.png
icon for the dashboard

images
PNG/JPG

index.html
the default view

sources.json
Seems to be used to list all of the files used by the application for the packaging process?

stylesheets
CSS

Editing the appinfo.json file allows us to add a unique name, and change the vendor, so we’ll do that first.

Opening the file will display the following:

{
	"id": "com.yourdomain.helloworld",
	"version": "1.0",
	"vendor": "My Company",
	"type": "web",
	"main": "index.html",
	"title": "HelloWorld",
	"icon": "icon.png"
}

The file format is a JSON (JavaScript Object Notation) file, basically, a readable format representing associative arrays, objects, and simple data structures.

The values are in the following format "key":"value".

Lets start by altering the unique id of our application, so change the value of "id" from "com.yourdomain.helloworld" to "com.test.helloworld".

Alter the other values to match the appinfo.json file below.

{
	"id": "com.test.helloworld",
	"version": "0.1",
	"vendor": "TestEvaluationCompany",
	"type": "web",
	"main": "index.html",
	"title": "Testing Hello World",
	"icon": "icon.png"
}

There are more potential key-value pairs we could add to the appinfo.json file, below is a list of the ones I know of so far. Please do let me know of any more you find via the comments.

id
Unique identifier for your application.
Recommended usage is to use a reverse DNS notation (com.domain.appname) in lower case characters.

version
Versioning of your application in a Major.Minor format.
Best to keep to this format as it could be used for over the air downloads/updates.

vendor
Company or individual who created the application.

type
Application type, which should be “web”.
This seems to be a clever way of future proofing there install process, potentially “native”, “java”, or even “python”?

main
Initial HTML file to be displayed when the application is launched.

title
Displayed in the launcher, and in the top grey tab, which I wish to affectionately call, the tabular.

icon
Path to the icon used for the launcher screen.

vendorurl
URL of the company or individual.

miniicon
Path to the icon used for the notifications.

Now we’ve gone far enough to test our application. It will show up as an individual application on our home screen, but not do anything other than display a predefined message.

But it’ll be good to test and get someone up and running now, so lets go.

First of all you need to package your application into a IPX file.

An IPX file (or an Itsy Package) is an installable package apart of a lightweight package management system designed for embedded devices, similar to Debian’s dpkg.

Packaging is done via Terminal;

1. Open Terminal.
2. Enter the command "palm-package ~/HelloWorld" and press enter.
3. You’ll receieve a message stating "Creating package in /Users/{username}/com.test.helloworld_0.1_all.ipk".

Now we have the package, we could send it off to a friend to test, or presumably, off to Palm to enter into the App Catalog.

Installing an application on the emulator;

1. Open Terminal.
2. Enter the command "palm-install com.test.helloworld_0.1_all.ipk" and press enter.
3. You’ll receieve a message stating
   "connecting to device emulator (###)
copying /Users/{username}/com.test.helloworld_0.1_all.ipk to /media/internal/developer/com.test.helloworld_0.1_all.ipk on device emulator (###)installing package /media/internal/developer/com.test.helloworld_0.1_all.ipk on device emulator (###)".

You’ll now be able to click on the launcher icon and see your application. The icon is the standard unchanged ‘blue square with crescent moon’, with the label “Testing Hello World”, as we specified in our appinfo.json file.

That’s it for our introduction. In part 2 we’ll start to create a real world application.