Softwareentwicklung für WebOS Henk Jonas - www.metaviewsoft.de 14.11.09 Softwareentwicklung für WebOS Überblick WebOS Was braucht man? Aufbau von Mojo Aufbau einer Anwendung Beispiel Der AppCatalog

Überblick WebOS WebOS: HTML5, CSS, Javascript, Mojo HTML5: Datenbank, Canvas http://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: Animationen http://www.webos101.com/-webkit-transition-property Javascript: Prototype Framework http://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 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: Ergebnis: 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 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 unter Checkliste unter http://developer.palm.com/index.php?option=com_content&view=article&id=1796 Checkliste unter http://developer.palm.com/index.php?option=com_content&view=article&id=1527 Submission zum Review per Email Alternative: Homebrew unter http://www.precentral.net/