Palm Pre has been out for sometime and it has gained considerable attention in the industry and widely regarded as one of the challengers to iPhone and Android based phones. One of the unique features of the Palm Pre is it’s underlying software stack. The OS powering the device is called WebOS and the application framework is called Mojo. Mojo is entirely based on JavaScript and HTML so, developer don’t have to learn any new languages. Especially, if one is attached to the world of web development then, WebOS provides extra advantage. So, I was also eager to play with it.
Mojo is a MVC framework with cetain new terms. Controllers are called assistants which are associated with with a scene or View. As a web developer, I’m also excited that I can play with HTML 5 with Mojo. There are number of widgets (UI API functions) and services (providing access to core applications, hardware, system services, and cloud services).
I downloaded and install Pre SDk in Ubuntu 9.04 and it did go well without any problem. It uses Virtual Box to run its emulator which I think is much better than that of Android (it’s VM is freaking slow).
It may be a bit biased but comparing the installation and SDK implementation, Palm Pre scores higher than Android (sorry no iPhone).
Most of the config settings are handled in JSON format which I really like (better than those ugly XML files
). Example of appinfo.json which is responsible for providing meta-data of an application:
{
"id": "com.infynyxx.firstapp",
"version": "1.0.0",
"vendor": "Infynyxx",
"type": "web",
"main": "index.html",
"title": "FirstApp",
"icon": "icon.png"
}
I used SDK Eclipse plugin to create application.

In the above structure, first-scene-assistant.js is a controller for the view apps/views/first-scene. Here is the code which is entirely Javascript.
function FirstSceneAssistant() {
/* this is the creator function for your scene assistant object. It will be passed all the
additional parameters (after the scene name) that were passed to pushScene. The reference
to the scene controller (this.controller) has not be established yet, so any initialization
that needs the scene controller should be done in the setup function below. */
}
FirstSceneAssistant.prototype.setup = function() {
/* this function is for setup tasks that have to happen when the scene is first created */
/* use Mojo.View.render to render view templates and add them to the scene, if needed. */
/* setup widgets here */
/* add event handlers to listen to events from widgets */
this.total = 0;
this.controller.get('count').update(this.total);
this.buttonAttributes = {};
this.buttonModel = {
buttonLabel: 'TAP HERE',
buttonClass: '',
disabled: false
};
//setup button
this.controller.setupWidget("MyButton", this.buttonAttributes, this.buttonModel);
//bind the button to the event listener
Mojo.Event.listen(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));
this.setupListSelector();
}
FirstSceneAssistant.prototype.activate = function(event) {
/* put in event handlers here that should only be in effect when this scene is active. For
example, key handlers that are observing the document */
}
FirstSceneAssistant.prototype.deactivate = function(event) {
/* remove any event handlers you added in activate and do any other cleanup that should happen before
this scene is popped or another scene is pushed on top */
}
FirstSceneAssistant.prototype.cleanup = function(event) {
/* this function should do any cleanup needed before the scene is destroyed as
a result of being popped off the scene stack */
}
FirstSceneAssistant.prototype.handleButtonPress = function(event) {
this.total++;
this.controller.get('count').update(this.total);
}
FirstSceneAssistant.prototype.setupListSelector = function() {
var selectorChoices = [{label: "United States", value: 1}, {label: "Nepal", value: 2}, {label: "India", value: 3}];
var selectorAttributes = {label: 'Pick a Thing', choices: selectorChoices, modelProperty:'value' };
this.selectorModel = {value: 2};
this.controller.setupWidget('myListSelector', selectorAttributes, this.selectorModel);
Mojo.Event.listen(this.controller.get("myListSelector"), Mojo.Event.propertyChange, this.handleSelectorChange.bind(this));
return this;
}
FirstSceneAssistant.prototype.handleSelectorChange = function(event) {
this.controller.get('count').update(event.value);
}
Here is the corresponding view file:
<div id="main" class="palm-hasheader">
<div class="palm-header">Header</div>
<div id="count" class="palm-body-text" style="color: red">0</div>
<div id="MyButton" name="MyButton1" x-mojo-element="Button"></div>
<br/>
<div id="myListSelector" class="palm-list-selector" x-mojo-element="ListSelector"></div>
</div>
And here is the output:

Well, this was my first shot with Mojo so, I haven’t gone so deep and still didn’t know much but I am really looking forward to go furthur with it because it makes heavy use of HTMl and JS, the language of the Web.