Introduction to

Palm Mojo SDK

Brendan G. Lim
brendan@intridea.com
Twitter: brendanlim

Saturday, July 11, 2009

 Overview
• Introduction
• What’s the Mojo SDK?
• Introduction to webOS
• Creating your first application
• Data storage
• UI Widgets overview
• Conclusion

Saturday, July 11, 2009

Saturday, July 11, 2009
Saturday, July 11, 2009
Saturday, July 11, 2009
Saturday, July 11, 2009
 Do you know HTML?

Saturday, July 11, 2009

 Do you know CSS?

Saturday, July 11, 2009

 Do you know
JavaScript?

Saturday, July 11, 2009

 The Mojo SDK
is a perfect fit

Saturday, July 11, 2009

 Mojo SDK
• JavaScript framework

• Bundled with webOS

• Model-View-Controller (MVC)

• Includes

• Prototype, the JavaScript framework

• Mojo Framework & Documentation

• Emulator, DOM Inspector, debugger, etc

• Palm specific styling

• Can use standard web dev tools

Saturday, July 11, 2009

 webOS
• Palm’s next-gen operating system
• Applications built using standard web
technologies and languages (HTML, CSS,
JavaScript)
• Designed to run on a variety of hardware
with different screen sizes & resolutions

Saturday, July 11, 2009

 webOS
• User experience is optimized for launching
and managing multiple applications at once
• Integrates a card-based OS with a web
browser
• Applications can run in the background
• Applications run off Ajax web application
model

Saturday, July 11, 2009

 Ajax Web App Model
Browser Client
User Interface

Server Logic Data

HTTP DHTML/JavaScript
Web Server

Server Logic Data

Server-side Systems

Saturday, July 11, 2009

 Launcher

Quick Launch bar

Saturday, July 11, 2009

 Cards
Card View

Cards Activity
Saturday, July 11, 2009
 Stages
Card Activity Dashboard

Saturday, July 11, 2009

 Generate an App

~$ palm-generate helloWorld

Saturday, July 11, 2009

 ‣ <app>
‣ <assistants>
‣ stage-assistant.js
Structure of ‣ <views>
‣ <images>
an Application ‣ <stylesheets>
‣ appinfo.json
‣ icon.png
‣ index.html

Saturday, July 11, 2009

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

Saturday, July 11, 2009

 helloWorld App

Saturday, July 11, 2009

 Packaging an Application

palm-package helloWorld

The directory where your application was generated

Saturday, July 11, 2009

 Packaging an Application
Which ends up creating this package:
com.yourdomain.helloworld_1.0_all.ipk

Saturday, July 11, 2009

 Packaging an Application
Which ends up creating this package:
com.yourdomain.helloworld_1.0_all.ipk

That you can install by doing the following:

palm-install com.yourdomain.helloworld_1.0_all.ipk

Saturday, July 11, 2009

 Tada!

Saturday, July 11, 2009

 Scenes
• Can think of scenes as separate pages within a
website.
• Mutually exclusive views of the application
within a Stage
• Most applications have different scenes within
the same stage.
• An application must have at least one scene.
• Scenes are supported by a controller
• Referred to as a scene assistant

Saturday, July 11, 2009

 ‣ <app>
‣ <assistants>
‣ stage-assistant.js
‣ <views>
Generate a Scene ‣ <images>
‣ <stylesheets>
palm-generate
-t new_scene -p "name=First" . ‣ appinfo.json
‣ icon.png
‣ index.html

Saturday, July 11, 2009

 ‣ <app>
‣ <assistants>
‣ first-assistant.js
‣ stage-assistant.js
‣ <views>
Generate a Scene ‣ <first>
palm-generate ‣ first-scene.html
-t new_scene -p "name=First" . ‣ <images>
‣ <stylesheets>
‣ appinfo.json
‣ icon.png
‣ index.html

Saturday, July 11, 2009

 Linking to a Scene

Saturday, July 11, 2009

 Linking to a Scene
stage-assistant.js

Saturday, July 11, 2009

 Linking to a Scene
app/assistants/stage-assistant.js

Saturday, July 11, 2009

 Setting up the First Scene
app/views/first/first-scene.html

Saturday, July 11, 2009

 Setting up the First Scene
app/views/first/first-scene.html

Saturday, July 11, 2009

 Let’s tie in one more scene
Run this in the root of your app directory:
palm-generate -t new_scene -p "name=Second" .

Saturday, July 11, 2009

 Setup the Second Scene
app/index.html

Saturday, July 11, 2009

 Add Button to First Scene
app/views/first/first-scene.html

Saturday, July 11, 2009

 Link Button to Second Scene
app/assistants/first-assistant.js

Saturday, July 11, 2009

 Link Button to Second Scene
app/assistants/first-assistant.js

Saturday, July 11, 2009

 Setup the Second Scene
app/views/second/second-scene.html

Saturday, July 11, 2009

 After Repacking &
Reinstalling ...

Saturday, July 11, 2009

 Storage
• Mojo supports:
• HTML5 database CRUD operations
• Depot
• Cookies
• Used for application preferences or to
cache data

Saturday, July 11, 2009

 Mojo Depot
• Provides a simplified interface to the native HTML5
database API
• Depot is recommended if:
• You are storing simple objects for offline access
• You don’t need a specific schema design
• You have no need for transactions or queries
• Limited to 5MB of data per object
• Asynchronous calls

Saturday, July 11, 2009

 Using Mojo Depot

Create / Open
Mojo.Depot() - opens a depot with a name that matches or creates a new DB

Read
simpleGet() - returns object it retrieves if there’s a match

Update
simpleAdd()- adds or updates the value of the named object

Delete
removeAll() - removes the named depot and deletes associated data

Saturday, July 11, 2009

 Using Mojo Depot

Create / Open
var db = new Mojo.Depot({name:”dbName”, version:1, replace:false}, this.openOK.bind(this), this.openFail.bind(this));

Read
db.simpleGet(“myData”, this.getListOK.bind(this), this.getListFailed.bind(this));

Update
db.simpleAdd(“myData”, myDataContents, this.savedListOK.bind(this), this.savedListFailed.bind(this));

Delete
db.removeAll();

Saturday, July 11, 2009

 Using Mojo Depot
Callbacks
Create / Open
var db = new Mojo.Depot({name:”dbName”, version:1, replace:false}, this.openOK.bind(this), this.openFail.bind(this));

Read
db.simpleGet(“myData”, this.getListOK.bind(this), this.getListFailed.bind(this));

Update
db.simpleAdd(“myData”, myDataContents, this.savedListOK.bind(this), this.savedListFailed.bind(this));

Delete
db.removeAll();

Saturday, July 11, 2009

 Using Mojo Depot
var db = new Mojo.Depot({name:”dbName”, version:1, replace:false}, this.openOK.bind(this), this.openFail.bind(this));

FirstAssistant.prototype.openOk = function() {
Mojo.Log.info(“.....”,”Database opened”);
db.simpleGet(“myData”, this.getListOK.bind(this),
this.getListFailed.bind(this));
}

Saturday, July 11, 2009

 Mojo Cookies
• Simplified interface to cookies
• Intended to be used to store small amounts of data
• Application Preferences, versions, or state
information
• webOS creates a “fake domain” for individual cookies
based on the application’s ID.
• Limited to 4KB, but multiple cookies per application is
acceptable
• Synchronous calls

Saturday, July 11, 2009

 Using Mojo Cookies

Create / Open
Mojo.Model.Cookie(id) - opens or creates cookie that matches the id

Read
get() - returns object it retrieves if there’s a match

Update
put()- adds or updates object with an optional date/time to expire

Delete
remove() - removes the cookie and it’s data

Saturday, July 11, 2009

 Using Mojo Cookies

Create / Open
this.cookie = new Mojo.Model.Cookie(“Preferences”);

Read
var retrievedPrefs = this.cookie.get();

Update
this.cookie.put({ ...jsonKey: jsonValue ... });

Delete
this.cookie.remove();

Saturday, July 11, 2009

 UI Widgets
• User interface controls to create feature-rich
interactive applications
• Types of widgets:
• Static/dynamic lists, button controls, selectors,
text fields, menus, dialogs, pickers, viewers
• Instantiated in a scene’s assistant setup method or
when specified in an HTML template used by
another widget.
• We sadly won’t be able to go through these today ...

Saturday, July 11, 2009

 Summary
• If you have a general understanding of
HTML, CSS, and JavaScript you can start
developing for Palm’s webOS
• The MojoSDK is a solid framework that
allows us to create applications easily
• There is MUCH more to the MojoSDK and
webOS than was covered in this
presentation.

Saturday, July 11, 2009

 Questions?

Saturday, July 11, 2009