Softwareentwicklung für WebOS

● Überblick WebOS

● Was braucht man?● Aufbau von Mojo● Aufbau einer Anwendung● Beispiel● Der AppCatalog

Henk Jonas - www.metaviewsoft.de 14.11.09

Überblick WebOS

● WebOS: HTML5, CSS, Javascript, Mojo

● HTML5: Datenbank, Canvashttp://www.w3.org/TR/2009/WD-webdatabase-20091029/http://www.whatwg.org/specs/web-apps/current-work/

multipage/the-canvas-element.html#the-canvas-element

● CSS: Animationenhttp://www.webos101.com/-webkit-transition-property

● Javascript: Prototype Frameworkhttp://www.prototypejs.org/

● Mojo: Widgets, Services, APIs

Was braucht man?

● WebOS SDK: http://developer.palm.com/

● Java, Sun VirtualBox● SDK enthält Emulator und Putty● IDE: Eclipse oder Komodo Edit● Dokumentation: nur Online verfügbar

Überblick über die Tools

● Emulator in VirtualBox● Komandozeilen Tools von Palm:

Palm-generate – Erzeuge ein Anwendungsgerüst Palm-package – Erzeuge ein .ipk Palm-install – Installation auf Emulator oder Gerät Palm-launch – Starte eine Anwendung auf Emulator oder Gerät

● Eclipse mit Plug-Ins von Palm

● Komodo Edit mit WebOS Erweiterung von http://webos.templarian.com/

● Putty für Debuglog (localhost:5522, root ohne Pwd, tail -f /var/log/messages, Mojo.Log.error())

Überblick über die Tools

Kurze Präsentation von Eclipse und Komodo

Aufbau von Mojo

● 3 Teile: Widgets, Services, APIs

● Widgets: alle HTML-Element von WebOS HTML: <div x-mojo-element=”...”></div> JS: this.controller.setupWidget(...)

● Services: GPS, Sound, Camera, Maps etc.● APIs: Hilfsfunktionen (z.B.

Mojo.Controller.stageController.pushScene())

Aufbau einer Anwendung

● Stages (Karten), Scenes (UI)● Scene besteht aus Assistant (der Code) und

View (die HTML-UI)

Der Assistent

function MainAssistant() {}● Constructor

MainAssistant.prototype.setup = function() {...}● Hier die Widgets initialisieren: evt. Eventhandler einrichten

MainAssistant.prototype.activate = function(event) {}● Szene wird aktiviert, evt: Eventhandler einrichten

MainAssistant.prototype.deactivate = function(event) {}● Szene wird deaktiviert: evt. Eventhandler deaktivieren

MainAssistant.prototype.cleanup = function(event) {}● Szene wird beendet: aufräumen?

Die Szene

<div id="header" class="palm-page-header"><div class="palm-page-header-wrapper">

<div id="appIcon" class="img_icon"></div><div id="title" class="title">

PUM 2009</div>

</div></div><div x-mojo-element="Button" id="target"></div>[...]

Beispiel

● Periodische Abfrage unserer aktuellen Position● Anzeige von Position, Höhe, Geschwindigkeit, Richtung

etc.● Logging unserer Position in DB● Ermittlung der genauen Oberflächenhöhe durch

Webservice● Zielposition anzeigen (Richtung, Entfernung)● Aufruf von geocaching.com mit aktueller Position

Das Grundgerüst

● Verzeichnis-layout:

appinfo.json – ID, Name, Version etc.

sources.json – verbindet UI mit Code

index.html – Lädt Mojo, Stylesheet etc.

icon.png – das Icon

assistants/stage-assistant.js – Start der Anwendung,

ruft 1. Scene auf

assistants/main-assistant.js – Code für unsere Scene

views/main/main-scene.html – HTML UI

stylesheets/main.css – Stylesheet für UI

Das Grundgerüst

Projekt in Komodo anlegen

Die 1. Szene

1. Szene anschauen

Die aktuelle Position

Aufruf über Service-API:this.controller.serviceRequest("pal m://com.palm.location",

{ method: "getCurrentPosition", parameters: {},

onSuccess: this.positionSuccess.bind(this),onFailure: ...

});

Ergebnis:MainAssistant.prototype.positionSuccess = function(event) {

this.lng = event.longitude;this.lat = event.latitude;

}

Periodische Abfrage

● Timerhandler zum Pollen:

MainAssistant.prototype.timerHandler = function() {this.getPosition();setTimeout(this.timerHandler.bind(this), 60 *

1000);}

Die HTML5 Datenbank

gblDB = openDatabase(Name, Version, Display Name, Est. Size);

Führt SQL-Anweisungen aus:gblDB.transaction(function (tx) {tx.executeSql("...”, [], succ, fail);}

Datenbankcheck zum Start:var locthis = this;gblDB.transaction(function(tx) {

tx.executeSql("SELECT COUNT(*) FROM...", [],function(tx, result) {locthis.start();},function(tx, error) {

tx.executeSql("CREATE TABLE...", [],function(result) {locthis.start();}, function(tx, error) {});});});

}

Aufruf eines Webservices

Aufruf:var url = "http://...”;new Ajax.Request(url, {

method: 'get',evalJSON: 'force',onSuccess: this.requestSuccess.bind(this), on Failure});

Ergebnis:MainAssistant.prototype.requestSuccess = function(json) {

json.responseJSON['Element'];}

Alles zusammen

Testen im Emulator

Eine 2. Szene

assistants/target-assistant.js – Code für unsere 2. Scene views/target/target-scene.html – HTML UI

Eintragung in source.json nicht vergessen!

Aufruf:Mojo.Controller.stageController.pushScene("target");

Eine 2. Szene

2. Szene einfügen, Aufruf per Button

Das HTML5 Canvaselement

● Zum Zeichnen beliebiger Formen auf den Bildschirm

● Definition in HTML-Datei:

<canvas id="myCanvas" width="320" height="320">

● Benutzung in JS-Datei:var canvas = this.controller.get("myCanvas");var ctx = canvas.getContext('2d');ctx.clearRect(...);ctx.drawImage(...);

Aufruf einer Webseite

Aufruf über Service-API:

this.controller.serviceRequest("palm://com.palm.applicationManager", {method: "open",

parameters: { id: 'com.palm.app.browser', params: { target: url } }});

Alles zusammen

Testen im Emulator

Der AppCatalog

● Infos unterhttp://developer.palm.com/index.php?

option=com_content&view=article&id=1796

● Checkliste unterhttp://developer.palm.com/index.php?

option=com_content&view=article&id=1527

● Submission zum Review per Email● Alternative: Homebrew unter

http://www.precentral.net/