Softwareentwicklung f

1
Softwareentwicklung für WebOS
Henk Jonas - www.metaviewsoft.de
14.11.09

• Ü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
• http//www.w3.org/TR/2009/WD-webdatabase-20091029/
  
• http//www.whatwg.org/specs/web-apps/current-work/
  multipage/the-canvas-element.htmlthe-canvas-eleme
  nt
• CSS Animationen
• http//www.webos101.com/-webkit-transition-propert
  y
• Javascript Prototype Framework
• http//www.prototypejs.org/
• 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
  http//webos.templarian.com/
• Putty für Debuglog (localhost5522, 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 ltdiv x-mojo-element...gtlt/divgt
• JS this.controller.setupWidget(...)
• Services GPS, Sound, Camera, Maps etc.
• APIs Hilfsfunktionen (z.B. Mojo.Controller.stageC
  ontroller.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

• ltdiv id"header" class"palm-page-header"gt
• ltdiv class"palm-page-header-wrapper"gt
• ltdiv id"appIcon" class"img_icon"gt
• lt/divgt
• ltdiv id"title" class"title"gt
• PUM 2009
• lt/divgt
• lt/divgt
• lt/divgt
• ltdiv x-mojo-element"Button" id"target"gtlt/divgt
• ...

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("pal m//com.palm.l
  ocation",
• 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
• ltcanvas id"myCanvas" width"320" height"320"gt
• 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.ap
  plicationManager", method "open",
• parameters
• id 'com.palm.app.browser',
• params
• target url
• )

23
Alles zusammen

• Testen im Emulator

24
Der AppCatalog

• Infos unter
• http//developer.palm.com/index.php?optioncom_con
  tentviewarticleid1796
• Checkliste unter
• http//developer.palm.com/index.php?optioncom_con
  tentviewarticleid1527
• Submission zum Review per Email
• Alternative Homebrew unter
• http//www.precentral.net/