Developing Applications for WebOS

Developing Applications for webOS: A Preview

Presented by:

Mitch Allen

Software CTO, Palm

Will …

Talk about Palm webOS

Review the Mojo Framework

Develop a Simple Application

Q & A

Won’t …

When…. ?

Where… ?

How much… ?

Palm webOS

Introduction

Palm webOS

Features

Palm’s next generation operating system

Fast, beautiful, multi-tasking user experience

Integrates a card-based OS with a web browser

Applications are built with JavaScript, HTML & CSS using common web development tools

Architecture

User Experience Quick Launch Bar Launcher Status Bar

Cards Activity Card View Card

Notifications & Dashboard Notification Bar Banner Notification Dashboard Dashboard Panel

Application Model

Anatomy of a webOS Application App Catalog Launcher Foreground Headless Background Dashboard Notifications App Removed Card View Dashboard View Close Launch Notifications Push Stage Remove Install or Update Install or Update Remove Notifications Push Stage Close Deactivate Activate

Mojo

Developing webOS Applications

Mojo

A JavaScript framework

Bundled with webOS

Included as source in the SDK for reference

Provides UI APIs, Widgets and Services

Uses Prototype 1.6.3, which is also bundled with webOS

To Get Started

It’s the web!

All you need is a text editor and a web browser 

It helps to know JavaScript, but you don’t need to be an expert

Palm’s SDK includes:

Mojo Framework & Documentation

Emulator with DOM Inspector and JavaScript Debugger

Tool bundles (project generator, app package tools)

Sample Application

Build a Simple App

Create a New Project

Add a Scene

Add a Widget

Store local data

Generate a Notification

Use a Service

In this example

Macintosh

TextMate & Safari

With SDK

Tool Bundles

Emulator with Debugger

Stages & Scenes

Stage

HTML structure similar to a browser window

A Card or Dashboard panel

Scene

Mutually exclusive views

Can have many but must have one

SceneStack

Push and pop scenes

Stages Activity Card Dashboard Panel

Scenes Push Pop

Widgets

HTML

this.controller.setupWidget('my-toggle', this.toggle = { property : 'value' }, this.toggleModel = { value : true, disabled : false }); this.controller.listen('my-toggle', Mojo.Event.propertyChange, this.togglePressed.bindAsEventListener(this)); <div x-mojo-element="ToggleButton" id="my-toggle"></div>

JavaScript:

CSS:

#my-toggle { float:left; }

Local Storage

Three types:

HTML5 database API

Depot

Cookies

Create/Open Depot

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

Save

db.simpleAdd(”myData", myDataContents, this.savedListOK, this.savedListFailed);

Get

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

Notifications

Banner Notification

var msg = “Hello World!”; Mojo.Controller.getAppController().showBanner({icon: “Img.png” “messageText: msg}, msg); Banner Notification

Services

Service Call

this.controller.serviceRequest('palm://com.palm.location', { method:"getFix", parameters:{ mode: “auto” }, onSuccess: this.gotFix, onFailure: this.error } });

Callback

this.gotFix= function(response){ Mojo.Log.info(“Fix received:”, response.longitude, response.latitude); } this.error= function(response){ Mojo.Log.info(response.errorText); }

Recap