Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "Softwareentwicklung für WebOS Überblick WebOS Was braucht man? Aufbau von Mojo Aufbau einer Anwendung Beispiel Der AppCatalog Henk Jonas - www.metaviewsoft.de14.11.09."—  Präsentation transkript:

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

2 Überblick WebOS WebOS: HTML5, CSS, Javascript, Mojo HTML5: Datenbank, Canvas work/multipage/the-canvas-element.html#the-canvas- element CSS: Animationen Javascript: Prototype Framework Mojo: Widgets, Services, APIs

3 Was braucht man? WebOS SDK: 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: 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 PUM 2009 [...]

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: this.controller.serviceRequest("palm://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 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']; }

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: 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.applicationMana ger", {method: "open", parameters: { id: 'com.palm.app.browser', params: { target: url } });

23 Alles zusammen Testen im Emulator

24 Der AppCatalog Infos unter =article&id=1796 Checkliste unter =article&id=1527 Submission zum Review per Alternative: Homebrew unter


Herunterladen ppt "Softwareentwicklung für WebOS Überblick WebOS Was braucht man? Aufbau von Mojo Aufbau einer Anwendung Beispiel Der AppCatalog Henk Jonas - www.metaviewsoft.de14.11.09."

Ähnliche Präsentationen


Google-Anzeigen