Your SlideShare is downloading. ×
0
WebOS Programmierung Markus Leutwyler www.thinmachine.ch [email_address] @twtomcat
Über mich <ul><li>webOS Entwickler seit Oktober 2009
WebOS-Internals Mitglied
Web und Mobile Entwickler
Mehrere Apps im App Catalog
Hot Apps Gewinner mit ”Moo” </li></ul>
Programm <ul><li>Was ist WebOS?
Wie sieht eine Applikation aus?
Framework und Service APIs
Emulator und Ares
Wie entwickelt man eine Applikation?
Die erste Applikation
App Catalog </li></ul>
Kennt ihr   HTML ?
Kennt ihr   CSS ?
Kennt ihr   Javascript ?
Dann könnt ihr für   webOS   entwickeln!
Was ist webOS? <ul><li>SmartPhone Betriebssystem
(später auch für Drucker und Tablets)
Offene Basis </li><ul><li>Linux
WebKit
V8
http://opensource.palm.com </li></ul></ul>
SDK: HTML <ul><li>HTML, CSS, JS
HTML 5 Standard (Canvas,CSS3,Storage)
Mojo und Prototype Framework </li></ul>
PDK: Plugin Development Kit <ul><li>C/C++
Posix, OpenGL ES, SDL, PDL
Hybrid oder Fullscreen
Spiele: Angry Birds (iPhone Port)
Tools: wIRC (Hybrid) </li></ul>
Linux Tools <ul><li>Ipkg
Gzip
Awk
Upcoming SlideShare
Loading in...5
×

Einführung in die webOS Programmierung

3,818

Published on

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

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,818
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×