Intro To webOS

An Introduction
to webOS
Josh Marinacci
Developer Relations Engineer
April 23, 2010

Overview

• webOS Architecture
• Application Architecture
• Building an App
• Emulator and Ares
• Advanced APIs
• App Catalog

About Me

• Java Programmer @ Sun
• Swing Hacks
• JavaFX
• Java Store
• Swing Windows L&F

Web Tech Then

• Slow execution
• Page refreshes
• No access to local resources
• Text Heavy documents

Web Tech Now

• AJAX
• V8 and Squirrel Fish
• Canvas, SVG, & WebGL
• HTML 5 Storage
• Web Workers

The Web Is Open

• That’s why I joined Palm

Decisions

• Built from the DNA of the web
• HTML CSS widgets
• JavaScript APIs
• Tracking HTML 5 standards

webOS Architecture
Applications

App Services
Services UI System Manager
Cloud

Window Manager Mojo Framework

Window Server Application
Manager
NPAPI

Browser
Palm Bus

Wireless Media
DocViewers
OS Services OS Middleware

Kernel/User Space
Boundary
Linux Kernel FileSystem TCP/IP
Bootie Drivers

Application Architecture

• Everything local
• Application
• Stages
• Scenes
• Widgets

Scene Lifecycle
initialize Find Scene
Push This Scene
(constructor

setup Start
Transition
ready
readytoactivate

activate End
Transition
Push New Scene
deactivate Start Pop This Scene
Transition

cleanup

Scene Framework

Widgets

• Model View Controller
• View (HTML)
• Assistant (JavaScript)
• Model (optional)

View / Markup
<div id="myActivateButton"
class="palm-button">
Activate
</div>

<div id="myDestroyButton"
class="palm-button negative">
Destroy!
</div>

JavaScript
ActivateAssistant.prototype.setup = function() {

//turn destroyPlanet function into an event handler
this.destroyPlanetHandler =
this.destroyPlanet.bindAsEventListener(this);

//attach handler to the button with tap events
this.controller.listen("myDestroyButton",
Mojo.Event.tap,
this.destroyPlanetHandler);
}

ActivateAssistant.prototype.destroyPlanet = function(event) {
console.log("destroying the planet with event " +
event);
};

Cleaning Up

• Clean up your references

APIs

• Addressbook and calendar
• Network services (upload and download)
• Hardware: Camera, GPS, and accelerometer

Send an Email
this.controller.serviceRequest(
"palm://com.palm.applicationManager", {
method: 'open',
parameters: {
id: "com.palm.app.email",
params: {
summary: "test subject",
text: "Test email text.",
recipients: [{
type:"email",
role:1,
value:"marvin@planet.org",
contactDisplay:"Marvin the Martian"
}]
}
}
}
);

Threading & Network
this.controller.serviceRequest('palm://com.palm.downloadmanager/', {
method: 'upload',
parameters: {
'fileName': filename,
'fileLabel':'media',
'url': 'http://twitpic.com/api/uploadAndPost',
'contentType': 'image/jpg',
"postParameters": [
{"key":"username" , "data": username},
{"key":"password" , "data": password},
],
"subscribe": true
},
onSuccess : function (resp){
Mojo.Log.info('Success : ' + Object.toJSON(resp));
},
onFailure : function (e){
Mojo.Log.info('Failure : ' + Object.toJSON(e));
}.bind(this)
});

Hardware Access
this.controller.stageController.pushScene(
{
appId : 'com.palm.app.camera',
name: 'capture'
},
{
sublaunch : true,
filename : '/media/internal/testpicture.jpg'
}
);

PDK: Plug-in Development Kit

• C/C++
• Posix, OpenGL, SDL, PDL
• When you need speed and low level access
• Full screen or hybrid
• Come back tomorrow!

Generate App

palm-generate -t new_app DestroyWorld

appinfo.json
{
"id": "com.palm.dts.destroyworld",
"version": "1.0.0",
"vendor": "World Destroyer, Inc.",
"type": "web",
"main": "index.html",
"title": "DestroyWorld",
"icon": "icon.png"
}

Initial HTML
<!DOCTYPE html>
<html>
<head>
<title>DestroyWorld</title>
<script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-
version="1"></script>


<link href="stylesheets/destroyworld.css" media="screen" rel="stylesheet" type="text/
css">
</head>
</html>

First Scene
palm-generate -t new_scene -p "name=Activate" DestroyWorld

StageAssistant.js
StageAssistant.prototype.setup = function() {
this.controller.pushScene("Activate");
};

Activate-scene.html
<div class="palm-body-text">

<div id="myActivateButton"
class="palm-button">Activate</div>

<div id="myDestroyButton"
class="palm-button negative">Destroy!</div>

</div>

Package & Run
palm-package DestroyWorld

palm-install com.palm.dts.destroyworld_1.0.0_all.ipk

Activate-assistant.js
ActivateAssistant.prototype.setup = function() {

//turn destroyPlanet function into an event handler
this.destroyPlanetHandler =
this.destroyPlanet.bindAsEventListener(this);

//attach handler to the button with tap events
this.controller.listen("myDestroyButton",
Mojo.Event.tap, this.destroyPlanetHandler);

};

ActivateAssistant.prototype.destroyPlanet = function(event) {
console.log("destroying the planet with event " + event);
};

The webOS Emulator

• VirtualBox (version xxx required)
• x86 build of webOS
• Most things identical
• Not all hardware features supported (camera,
multitouch)
• Simulate events

Navigating the Emulator

• Esc = back gesture
• Left / Right = ﬂip between apps
• Home = minimize / maximize card
• End = bring up launcher
• Mouse = single touch events
• F5 – F9 = accelerometer event simulation

Simulating Events

luna-send -n 1 luna://com.palm.pmradiosimulator/set_incomingcall {"number":"14086177431"}

luna-send -n 1 luna://com.palm.pmradiosimulator/set_position {"lat":"37.3","long":"-122"}

Emulator Host Mode

• Embedded web server
• Use your desktop browser
• Good for inspecting HTML
• ssh -p 5522 -L 5581:localhost:8080 root@localhost
• http://localhost:5581/Apps

Logging

palm-log -f com.palm.dts.destroyworld

Ares

• Visual IDE and GUI builder: WYSIWYG
• Runs in the browser
• Makes the same apps as the command-line SDK
• Works with local emulator, debugging, logging
• Works with real devices
• Makes most coding tasks much faster

Ares vs. Mojo

• Slightly different style of coding
• Mojo widgets contained in lightweight wrappers
• Not all widgets are supported (more coming)
• Code is more concise

Saving

• Project stored on Palm’s servers
• Export source bundle
• Export packaged app

Advanced APIs

• Overview
• Network Web Services
• Camera
• Storage
• Accelerometer

Comprehensive APIs

• Hardware
• Accelerometer, GPS, Display
• Platform Services
• Camera, Audio, Video, Power, Connection Manager
• Application Services
• Alarms, Contacts, Calendar, Photos, Storage
• Application Actions
• Email, Maps, Phone, YouTube, Browser, Document Viewers,
Messaging

Access an XML Webservice
var url = "http://myserver.com/webservice?results=all";
var request = new Ajax.Request(url, {
method: 'get',
evalJSON: 'false',
onCreate: function(){console.info('******* onCreate happened')},
onLoading: function(){console.info('******* onLoading happened')},
onLoaded: function(){console.info('******* onLoaded happened')},
onSuccess: function(){console.info('******* onComplete happened')},
onComplete: this.gotResults.bind(this),
onFailure: this.failure.bind(this)
});

Parse Response with DOM & XPath
StartAssistant.prototype.gotResults = function(event){
var xmlstring = event.responseText;

var doc = (new DOMParser()).parseFromString(xmlstring, "text/xml");
// Use xpath to parse xml object
var items = document.evaluate("/root/item", doc, null,
XPathResult.ANY_TYPE, null);
var item = nodes.iterateNext();
while (section) {
console.log("id = " + item.attributes['id'].nodeValue);
item = items.iterateNext();
}
}

Use the Camera
//launch the camera view
this.controller.stageController.pushScene(
{
appId : 'com.palm.app.camera',
name: 'capture'
},
{
sublaunch : true,
filename : '/media/internal/testpicture.jpg'
}
);

//the activate function on your scene
activate: function(event) {
if(event != undefined) {
//the camera returned
console.log("json = " + Object.toJSON(event));
console.log("filename of the photo = " + event.filename);
}
}

Use the Accelerometer (Tilt Sensor)

• Orientation events
• Shake Events
• Raw events

Orientation Events

• Pitch & roll in degrees
• Numeric codes for different orientations
• 0 = face up
• 1 = face down
• 2 = up / normal portrait
• 3 = down / reverse portrait
• 4 = left / landscape, left side down
• 5 = right / landscape, right side down

'orientationchange' property
this.controller.listen(document, 'orientationchange',
this.handleOrientation.bindAsEventListener(this));
...
StartAssistant.prototype.handleOrientation =
function(event) {
console.log("position = " + event.position
+ " pitch = " + event.pitch
+ " roll = " + event.roll);
};

Shake Events

• 'shakestart'
• 'shaking'
• 'shakeend'

'shaking' property

this.controller.listen(document, 'shaking',
this.handleShaking.bindAsEventListener(this));
...
StartAssistant.prototype.handleShaking = function(event) {
console.log("Shaking with magnitude: " + event.magnitude);
};

Raw Accelerometer Events

• Raw x/y/z acceleration values
• Default 4Hz (four times per second)
• Option for 30Hz (good for games)
• 'acceleration' property

'acceleration' property

this.controller.listen(document, 'acceleration',
this.handleAcceleration.bindAsEventListener(this));
...
StartAssistant.prototype.handleAcceleration = function(event) {
console.log("X: "+ event.accelX
+ " Y:"+ event.accelY
+ " Z:"+ event.accelZ
+ " time: "+ event.time);
};

Storage APIs

• Mojo Cookies
• Mojo Depot
• HTML 5

Mojo Cookies

• Store simple values
• 4k of storage
• Good for preferences, version numbers, etc.
• Stored as a single JSON value in the Depot

Cookies

var SCROLL_MODE_KEY = “SCROLL_MODE_KEY”;
...
//set the current mode
var scrollModeCookie = new Mojo.Model.Cookie(SCROLL_MODE_KEY);
scrollModeCookie.put(scrollMode);

//retrieve it later
var scrollModeCookie = new Mojo.Model.Cookie(SCROLL_MODE_KEY);
console.log(“mode = “ + scrollModeCookie.get());

Mojo Depot

• Simple object store for JSON
• No schemas or SQL queries
• Up to 1MB of storage
• > 1MB available in media storage
• Object -> SQL translation underneath
• Not as efficient as true HTML database
• Uses callbacks extensively

Create

var db = new Mojo.Depot(
{'name':‘DestroyWorldDB'},
function(code) {
console.log(“open db succeed”);
},
function(code) {
console.log("open db failed");
}
);
console.log("created db : " + db);

Store

{ 'name' : 'DestroyWorldDB' },
function(code) {
console.log("open db succeeded " + db);
var value = { 'target':"world", 'action':"destroy"};
db.add("object1", value,
function(){console.log("saved okay");},
function(){console.log("save failed");}
);
},
function(code) {console.log("open db failed");}
);

Retrieve
function(code) {
function(code) { 'target':"world", 'action':"destroy"};
var value = {
db.add("object1", value,
db.get("object1",
function(){console.log("saved okay");},
function(obj){
function(){console.log("save failed");}
); console.log("got object. target = " + obj.target);
}, },
function(){console.log("get failed");}
); );
},
);

HTML 5 Database

• Database object from HTML 5
spec, but not storage object
• True SQL database
• Transactional
• Databases associated with
applications
• Private, no inter-app sharing
• Up to 1MB of storage
• > 1MB available in media storage
• Work is ongoing to match the
spec

Execute SQL Statements

var myDB = openDatabase(name:"thisDB");

myDB.transaction( (function (transaction) {
transaction.executeSql('SOME SQL', []
, this.successHandler.bind(this)
, this.failureHandler.bind(this));
}).bind(this);

Debugging

• [break for Steve Lemke]

App Catalog

• App Catalog built into all devices
• 70/30 revenue split (Developer/Palm)
• Multiple Catalogs
• Multiple Countries

Catalog Options

• On Device Catalog
• Web Feed
• Beta Feed
• Open Source Apps

International Apps

• Translating is strongly encouraged, not required
• Set prices for each country
• Metadata for each language (title, description,
screenshots, etc.)
• Auto-generate prices for each currency zone

Palm Hot Apps Promotion

• Total payout: One Million Dollars
• Earn a bonus based on
• Free: downloads
• Paid: total revenue
• Feb 1 – June 30
• Still plenty of time to win!
• Leader board updated daily
• http://PalmHotApps.com/

Roadmap

Now Soon End of Summer
Mojo SDK apps Fullscreen OS update
PDK apps with new APIs

Links

developer.palm.com palmhotapps.com

Intro To webOS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Intro To webOS

Similaire à Intro To webOS (20)

Dernier

Dernier (20)

Intro To webOS

Notes de l'éditeur