Post on 05-Apr-2015
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/