Successfully reported this slideshow.

Einführung in die webOS Programmierung

4,614 views

Published on

Kurze Einführung in die webOS Programmierung: Was ist webOS,SDK,PDK,Ares,App Catalog

Published in: Education
  • Danke für das SlideShare und die wirklich interessanten Informationen.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Einführung in die webOS Programmierung

  1. 1. WebOS Programmierung Markus Leutwyler www.thinmachine.ch [email_address] @twtomcat
  2. 2. Über mich <ul><li>webOS Entwickler seit Oktober 2009
  3. 3. WebOS-Internals Mitglied
  4. 4. Web und Mobile Entwickler
  5. 5. Mehrere Apps im App Catalog
  6. 6. Hot Apps Gewinner mit ”Moo” </li></ul>
  7. 7. Programm <ul><li>Was ist WebOS?
  8. 8. Wie sieht eine Applikation aus?
  9. 9. Framework und Service APIs
  10. 10. Emulator und Ares
  11. 11. Wie entwickelt man eine Applikation?
  12. 12. Die erste Applikation
  13. 13. App Catalog </li></ul>
  14. 14. Kennt ihr HTML ?
  15. 15. Kennt ihr CSS ?
  16. 16. Kennt ihr Javascript ?
  17. 17. Dann könnt ihr für webOS entwickeln!
  18. 18. Was ist webOS? <ul><li>SmartPhone Betriebssystem
  19. 19. (später auch für Drucker und Tablets)
  20. 20. Offene Basis </li><ul><li>Linux
  21. 21. WebKit
  22. 22. V8
  23. 23. http://opensource.palm.com </li></ul></ul>
  24. 24. SDK: HTML <ul><li>HTML, CSS, JS
  25. 25. HTML 5 Standard (Canvas,CSS3,Storage)
  26. 26. Mojo und Prototype Framework </li></ul>
  27. 27. PDK: Plugin Development Kit <ul><li>C/C++
  28. 28. Posix, OpenGL ES, SDL, PDL
  29. 29. Hybrid oder Fullscreen
  30. 30. Spiele: Angry Birds (iPhone Port)
  31. 31. Tools: wIRC (Hybrid) </li></ul>
  32. 32. Linux Tools <ul><li>Ipkg
  33. 33. Gzip
  34. 34. Awk
  35. 35. Grep
  36. 36. Strace
  37. 37. Gdb
  38. 38. oprofile </li></ul><ul><li>Vmstat
  39. 39. Iostat
  40. 40. Top </li></ul>
  41. 41. Optware <ul><li>Apache
  42. 42. Php
  43. 43. Gcc
  44. 44. Ctorrent
  45. 45. >1300 Pakete erhältlich </li></ul>
  46. 46. Wie sieht eine Applikation aus <ul><li>Stage (Bühne, Tab im Browser) </li><ul><li>Scene (Szene, Seite im Browser) </li><ul><li>Widgets (GUI Elemente)
  47. 47. Assistants (setup,activate,deactivate,cleanup) </li></ul></ul><li>Mojo Framework
  48. 48. Prototype Framework </li></ul>
  49. 49. Mojo Framework <ul><li>GUI Elemente
  50. 50. Javascript APIs
  51. 51. Folgt dem MVC – Muster </li><ul><li>View: HTML
  52. 52. Model/Controller: Javascript </li></ul></ul>
  53. 53. Beispiel (HTML) <div id=”text-field” x-mojo-element =”TextField”></div>
  54. 54. Beispiel (Javascript) var attributes= { modelProperty: 'original', focusMode: Mojo.Widget.focusSelectMode, maxLength: 30 }; this.model = { original: 'Bitte etwas eingeben', disabled: false };
  55. 55. Service API <ul><li>Asynchrone dbus Kommunikation
  56. 56. JSON Parameter
  57. 57. Abonnement (Subscription)
  58. 58. Java/C Services
  59. 59. node.js in webOS 2.0 </li></ul>
  60. 60. Service API <ul><li>Hardware </li><ul><li>Beschleunigungsmesser, GPS, Bildschirm, Kamera </li></ul><li>Applikationsservices </li><ul><li>Alarme, Kontakte, Kalender, Fotos, Up/Download </li></ul><li>Applikationsaktionen </li><ul><li>E-Mail, Karten, Telefon, Browser </li></ul></ul>
  61. 61. Beispiel this.controller.serviceRequest(' palm://com.palm.connectiomanager ', { method: 'getstatus', parameters: { subscribe:true}, onSuccess: this.handleOKResponse, onFailure: this.handleErrResponse });
  62. 62. Wie entwickelt man? <ul><li>Ihr bevorzugter Editor
  63. 63. Kommandozeilen SDK-Tools
  64. 64. Optionales Eclipse Plugin
  65. 65. Optionales Komodo Edit Plugin
  66. 66. OS X, Linux (.deb), Windows wird unterstützt </li></ul>
  67. 67. webOS Emulator <ul><li>Basierend auf VirtualBox
  68. 68. x86-Version von webOS
  69. 69. Nicht alle Hardware unterstützt (Kamera,GPS)
  70. 70. Fehlende Hardware kann simuliert werden </li></ul>
  71. 71. Jailbreak, Rooting? <ul><li>upupdowndownleftrightleftrightbastart oder webos20090606
  72. 72. Novacom -t open tty://
  73. 73. [email_address]
  74. 74. ssh localhost -p 5522 -l root
  75. 75. Luna-send -n 1 palm://com.palm.pmradiosimulator/set_incomingcall </li></ul>
  76. 76. Palm Ares <ul><li>Ares: WYSIWYG Programmierumgebung
  77. 77. Ares Log-Viewer
  78. 78. Ares Debugger </li></ul>
  79. 79. Ares Demo
  80. 80. palm-generate helloWorld <app> <assistants> <views> <images> <stylesheets> appinfo.json index.html sources.json icon.png Die erste Applikation
  81. 81. index.html <!DOCTYPE html> <html> <head> <title>Hello World</title> <script src = &quot;/usr/palm/frameworks/mojo/ mojo.js &quot; x-mojo-version=&quot;1&quot;></script> <link href=&quot;/stylesheets/helloworld.css&quot; media=&quot;screen&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> </head> </html>
  82. 82. Applikation installieren - palm-package helloWorld - palm-install com.yourdomain.helloworld_1.0.0_all.ipk
  83. 83. Szenen hinzufügen palm-generate -t new_scene -p &quot;name=first&quot; helloWorld palm-generate -t new_scene -p &quot;name=second&quot; helloWorld app/views/first/first-scene.html app/assistants/first-assistant.js
  84. 84. Szenen-HTML <div id=&quot;main&quot; class=&quot;palm-hasheader&quot;> <div class=&quot;palm-header&quot;>First Scene</div> <div class=&quot;palm-text&quot;>Welcome to my World</div> <div x-mojo-element=&quot;Button&quot; id=&quot;button1&quot;></div> </div>
  85. 85. Javascript - Setup stage-assistant.js: Mojo.Controller.stageController.pushScene(&quot;first&quot;); first-assistant.js: this.controller.setupWidget(&quot;button1&quot;, this.attributes = {}, this.model = { label : &quot;OK&quot;, disabled: false } );
  86. 86. Javascript - Handler this.handleButton1=this.handleButtonPress1.bindAsEventListener(this); Mojo.Event.listen(this.controller.get(&quot;button1&quot;), Mojo.Event.tap, this.handleButton1); FirstAssistant.prototype.handleButtonPress1 = function(event){ Mojo.Controller.stageController.pushScene(&quot;second&quot;); }
  87. 87. App Catalog <ul><li>Ist auf jedem Gerät installiert
  88. 88. Noch nicht international (DE/UK/IR/FR)
  89. 89. 70/30 Split
  90. 90. Developer Account: gratis
  91. 91. Einstellgebühr: keine
  92. 92. Web- und Beta-Feed (kein Review) </li></ul>
  93. 93. Ressourcen <ul><li>developer.palm.com
  94. 94. Mobiletuts 3-teiliges Tutorial (mobile.tutsplus.com)
  95. 95. IRC: #webos (freenode)
  96. 96. www.webos-internals.org
  97. 97. mich fragen :) </li></ul>
  98. 98. Fragen?

×