Softwareentwicklung für WebOS

Präsentation zum Thema: "Softwareentwicklung für WebOS"—  Präsentation transkript:

1 Softwareentwicklung für WebOS
Henk Jonas - Softwareentwicklung für WebOS Überblick WebOS Was braucht man? Aufbau von Mojo Aufbau einer Anwendung Beispiel Der AppCatalog

2 Überblick WebOS WebOS: HTML5, CSS, Javascript, Mojo
HTML5: Datenbank, Canvas CSS: Animationen Javascript: Prototype Framework Mojo: Widgets, Services, APIs

3 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

4 Ü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 Putty für Debuglog (localhost:5522, root ohne Pwd, tail -f /var/log/messages, Mojo.Log.error())

5 Überblick über die Tools
Kurze Präsentation von Eclipse und Komodo

6 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())

7 Aufbau einer Anwendung
Stages (Karten), Scenes (UI) Scene besteht aus Assistant (der Code) und View (die HTML-UI)

8 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?

9 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> [...]

10 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

11 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

12 Das Grundgerüst Projekt in Komodo anlegen

13 Die 1. Szene 1. Szene anschauen

14 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; }

15 Periodische Abfrage Timerhandler zum Pollen:
MainAssistant.prototype.timerHandler = function() { this.getPosition(); setTimeout(this.timerHandler.bind(this), 60 * 1000); }

16 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) {});});}); }

17 Aufruf eines Webservices
var url = " new Ajax.Request(url, { method: 'get', evalJSON: 'force', onSuccess: this.requestSuccess.bind(this), on Failure}); Ergebnis: MainAssistant.prototype.requestSuccess = function(json) { json.responseJSON['Element']; }

18 Alles zusammen Testen im Emulator

19 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");

20 Eine 2. Szene 2. Szene einfügen, Aufruf per Button

21 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(...);

22 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 } });

23 Alles zusammen Testen im Emulator

24 Der AppCatalog Infos unter Checkliste unter
Checkliste unter Submission zum Review per Alternative: Homebrew unter