Widget Development<br />using Qt Web Runtime<br />July 08, 2010 – Rajesh Lal<br /> MeeGo Team, Mountain View, CA<br />
   Plan for next 50 minutes<br />Widget<br />feel free to ask<br />in between<br />Engine<br />Qt Web Runtime<br />Technol...
   Widget<br /><ul><li>  Widget History
  Widget Era
  Nokia WRT Widget
  W3C
  Demo</li></li></ul><li>Widget: History<br />Konfabulator<br />Feb 10, 2003 <br />Tagline - “Whatever you want it to be“<...
http://www.konfabulator.com/cartoon/partFour.html<br />
Widget Era<br />Yahoo Widget<br />Opera Widget<br />Dashcode Widget<br />Windows Gadget<br />“Standard” Web technology: HT...
Widget Era Timeline<br />
Web Runtime Widget  <br />Nokia Developed Web Runtime in 2005<br /><ul><li> Web Runtime was a Portable application framework
  Allows the creation of widgets on  S60 Platform (3rd Edition)
  Extension to S60 Webkit based browser
  Allows instances of the browser to be run as applications</li></ul>Nokia Web Runtime also used “standard” HTML, CSS and ...
  W3C* Widget 1.0 Specification<br />A Widget is an interactive single purpose application for displaying and/or updating ...
Widget: W3C standardization<br /><ul><li>  Widget APIs
  Packaging
  Localization
  Window Modes
  Manifest Configuration file</li></li></ul><li>Widget: How cWRT widget conforms to W3C<br /><ul><li>  Widget APIs - ‘widg...
Widget: Hello World Demo<br /><ul><li>  Manifest file</li></ul>config.xml<br /><ul><li>  Window Modes</li></ul>- windowed<...
Widget: Demo<br />Hello World<br />
   Widget Engine: Web Runtime<br />Widget<br />Engine<br />Qt Web Runtime<br />Technology<br />HTML 5, CSS3, AJAX<br />Dev...
   Widget Engine: Web Runtime<br />WRT evolved into Common Web Runtime which is renamed as Qt WRT<br />
   Widget Engine: Common Web Runtime<br />
   Widget Engine: ‘Common’ in cWRT<br />* Common Java Script Extension (CJSE) <br />
   Widget Engine: ‘Web’ in cWRT<br /> Webkit Engine<br />
   Widget Engine: Runtime in cWRT<br />The Runtime allows the Widget to interface to the device<br /><ul><li>Interface to ...
Interface to Device functionality</li></ul>Widget <br />Runtime<br />Device<br />
   Widget Engine: Runtime in cWRT<br />Interface to the Device APIs using Feature tag (W3C standard)<br />
   Widget Engine: Runtime in cWRT<br />Interface to the Device functionality<br />
Widget: Demo<br />Web Runtime<br />
   Technology behind WRT<br />Widget<br />Engine<br />Qt Web Runtime<br />Technology<br />HTML 5, CSS3, AJAX<br />Device A...
   Technology behind WRT<br /><ul><li>    HTML5
    CSS 3
    JavaScript 1.5 (some features of 1.6)
    Cross Domain Ajax
    Flash 10 (!)</li></li></ul><li>Widget: Demo<br />Geolocation<br />Video/Audio<br />Canvas<br />HTML5<br />contentedita...
Widget: Demo<br />Animation<br />RGBA Colors<br />Gradients<br />CSS3<br />@Font-Face<br />Rounded Corners<br />Box Shadow...
Device APIs<br />Widget<br />Engine<br />Qt Web Runtime<br />Technology<br />HTML 5, CSS3, AJAX<br />Device API<br />Conta...
Device APIs <br /><ul><li>List of APIs currently supported
  Method, Properties supported by each API
  How to Use these APIs in a Widget
  Demo</li></li></ul><li>   Supported Device APIs in MeeGo <br />
Data APIs in MeeGo <br />
Upcoming SlideShare
Loading in...5
×

Meego Widget Development using Qt WRT @iRajLal

268

Published on

Meego Widget Development using Qt WRT

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
268
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Meego Widget Development using Qt WRT @iRajLal

  1. 1. Widget Development<br />using Qt Web Runtime<br />July 08, 2010 – Rajesh Lal<br /> MeeGo Team, Mountain View, CA<br />
  2. 2. Plan for next 50 minutes<br />Widget<br />feel free to ask<br />in between<br />Engine<br />Qt Web Runtime<br />Technology<br />HTML 5, CSS3, AJAX<br />Device API<br />Contacts, GPS, Camera, Accelerometer<br />Tools <br />UI Framework, Nokia SDK, Resources<br />
  3. 3. Widget<br /><ul><li> Widget History
  4. 4. Widget Era
  5. 5. Nokia WRT Widget
  6. 6. W3C
  7. 7. Demo</li></li></ul><li>Widget: History<br />Konfabulator<br />Feb 10, 2003 <br />Tagline - “Whatever you want it to be“<br />For Macintosh<br />It ran files called Widgets<br />Developers:<br /> Arlo Rose, Perry Clarke, and Ed Voas (Windows Version)<br />
  8. 8. http://www.konfabulator.com/cartoon/partFour.html<br />
  9. 9. Widget Era<br />Yahoo Widget<br />Opera Widget<br />Dashcode Widget<br />Windows Gadget<br />“Standard” Web technology: HTML, CSS, XML, and JavaScript using browser based rendering engine<br />
  10. 10. Widget Era Timeline<br />
  11. 11. Web Runtime Widget <br />Nokia Developed Web Runtime in 2005<br /><ul><li> Web Runtime was a Portable application framework
  12. 12.   Allows the creation of widgets on  S60 Platform (3rd Edition)
  13. 13. Extension to S60 Webkit based browser
  14. 14. Allows instances of the browser to be run as applications</li></ul>Nokia Web Runtime also used “standard” HTML, CSS and JavaScript<br />
  15. 15. W3C* Widget 1.0 Specification<br />A Widget is an interactive single purpose application for displaying and/or updating local data or data on the Web, packaged in a way to allow a single download and installation on a user's machine or mobile device. <br />Examples:<br />Clock, Sticky Notes, Weather, News Reader, photo album<br />* World Wide Web Consortium: Organization which develop standards for Web<br />
  16. 16.
  17. 17. Widget: W3C standardization<br /><ul><li> Widget APIs
  18. 18. Packaging
  19. 19. Localization
  20. 20. Window Modes
  21. 21. Manifest Configuration file</li></li></ul><li>Widget: How cWRT widget conforms to W3C<br /><ul><li> Widget APIs - ‘widget’ object Interface</li></ul> widget.author<br /> widget.version<br /> widget.id<br /> widget.name<br /> widget.description<br /><ul><li> Packaging - </li></ul> All files Zipped (inside root folder) <br /> and extension .ZIP changed to .WGT<br /><ul><li> Localization </li></ul>Folder structure for HelloWorld.WGT<br />-> locales/en/helloworld/<br />-> locales/en-US/helloworld/<br />-> locales/en-GB/helloworld/<br />
  22. 22. Widget: Hello World Demo<br /><ul><li> Manifest file</li></ul>config.xml<br /><ul><li> Window Modes</li></ul>- windowed<br /> - fullscreen<br /> - minimized (312x82)<br /> - floating (No support)<br /> - maximized (No support)<br />
  23. 23. Widget: Demo<br />Hello World<br />
  24. 24. Widget Engine: Web Runtime<br />Widget<br />Engine<br />Qt Web Runtime<br />Technology<br />HTML 5, CSS3, AJAX<br />Device API<br />Contacts, GPS, Camera, Accelerometer<br />Tools<br />UI Framework, Nokia SDK, Resources<br />
  25. 25. Widget Engine: Web Runtime<br />WRT evolved into Common Web Runtime which is renamed as Qt WRT<br />
  26. 26. Widget Engine: Common Web Runtime<br />
  27. 27. Widget Engine: ‘Common’ in cWRT<br />* Common Java Script Extension (CJSE) <br />
  28. 28. Widget Engine: ‘Web’ in cWRT<br /> Webkit Engine<br />
  29. 29. Widget Engine: Runtime in cWRT<br />The Runtime allows the Widget to interface to the device<br /><ul><li>Interface to Device APIs
  30. 30. Interface to Device functionality</li></ul>Widget <br />Runtime<br />Device<br />
  31. 31. Widget Engine: Runtime in cWRT<br />Interface to the Device APIs using Feature tag (W3C standard)<br />
  32. 32. Widget Engine: Runtime in cWRT<br />Interface to the Device functionality<br />
  33. 33. Widget: Demo<br />Web Runtime<br />
  34. 34. Technology behind WRT<br />Widget<br />Engine<br />Qt Web Runtime<br />Technology<br />HTML 5, CSS3, AJAX<br />Device API<br />Contacts, GPS, Camera, Accelerometer<br />Tools<br />UI Framework, Nokia SDK, Resources<br />
  35. 35. Technology behind WRT<br /><ul><li> HTML5
  36. 36. CSS 3
  37. 37. JavaScript 1.5 (some features of 1.6)
  38. 38. Cross Domain Ajax
  39. 39. Flash 10 (!)</li></li></ul><li>Widget: Demo<br />Geolocation<br />Video/Audio<br />Canvas<br />HTML5<br />contenteditable <br />@font-face<br />Web Workers(Hyper threading)<br />Form controls<br />Local Storage<br />Ability to describe content<br />
  40. 40. Widget: Demo<br />Animation<br />RGBA Colors<br />Gradients<br />CSS3<br />@Font-Face<br />Rounded Corners<br />Box Shadow<br />Borders with images<br />Opacity<br />Text Shadow<br />Multiple Background Images<br />
  41. 41. Device APIs<br />Widget<br />Engine<br />Qt Web Runtime<br />Technology<br />HTML 5, CSS3, AJAX<br />Device API<br />Contacts, GPS, Camera, Accelerometer<br />Tools<br />UI Framework, Nokia SDK, Resources<br />
  42. 42. Device APIs <br /><ul><li>List of APIs currently supported
  43. 43. Method, Properties supported by each API
  44. 44. How to Use these APIs in a Widget
  45. 45. Demo</li></li></ul><li> Supported Device APIs in MeeGo <br />
  46. 46. Data APIs in MeeGo <br />
  47. 47. 1. Data APIs in MeeGo <br />methods<br />Object -properties<br />
  48. 48. 1. Data APIs in MeeGo <br />
  49. 49. 3. Use Device APIs in Web Widget<br />File System API<br />filesystemObject = nokia.device.load("filesystem", null);<br />vardataArray = filesystemObject .getDirContents("file://" + prefix + uri, "*");<br /> for (index in dataArray) {<br /> if (dataArray[index].type == 0) {<br />filetype = "[File]";<br /> } else if (dataArray[index].type == 1) {<br />filetype = "[Directory]";<br /> } else {<br />filetype = "[Link]";<br /> }<br />listing.innerHTML+="<b>" + filetype + " : </b>" + dataArray[index].uri;<br />
  50. 50. Use Data APIs in Web Widget<br />Battery Level API<br />sysobject = nokia.device.load("sysinfo", null);<br />btr = sysobject.getChannel("BatteryLevel");<br />chr = sysobject.getChannel("Charging");<br />lastLevel = btr.batteryLevel;<br />System Information<br />temp = sysobject.getChannel("Network");<br />element ="<tr><td>"+"Network"+"</td><td>"+<br />"("+"networkName:"+ temp.networkName+")"+<br />"("+"networkStatus:"+ temp.networkStatus+")"+<br />"("+"networkMode:"+ temp.networkMode+")"+<br />"("+"mobileCountryCode:"+ temp.mobileCountryCode+")"+<br />"("+"locationStatus:"+ temp.locationStatus+")"+<br />"("+"areaCode:"+ temp.areaCode+")"+<br />"("+"cellID:"+ temp.cellID+")"+ "</td></tr>";<br />element = sync_table.innerHTML + element;<br />
  51. 51. Media APIs in MeeGo <br />
  52. 52. 2. Media APIs in MeeGo <br />methods<br />Object -properties<br />
  53. 53. Use Media APIs in Web Widget<br />Audio Player API<br />so = nokia.device.load("audioplayer");<br />so.open(successCBopen, url, errorCB);<br />so.play(successCB, 0, errorCB);<br />so.stop();<br />so.pause();<br />so.resume();<br />so.setVolume(so.getVolume()+10);<br />
  54. 54. Utility APIs in MeeGo <br />
  55. 55. 3. Utility APIs in MeeGo <br />methods<br />Object -properties<br />
  56. 56. 3. Utility APIs in MeeGo <br />
  57. 57. 3. Use Utlity APIs in Web Widget<br />Location GPS <br />this.so = nokia.device.load("geolocation", null);<br />this.so.getCurrentPosition(<br /> function(position) <br /> {<br /> this.lat = position.coords.latitude;<br /> this.lon = position.coords.longitude;<br /> }<br /> )<br />
  58. 58. Widget: Demo<br />Device APIs Demo<br />
  59. 59. Tools, UI Frameworks and Resources<br />Widget<br />Engine<br />Qt Web Runtime<br />Technology<br />HTML 5, CSS3, AJAX<br />Device API<br />Contacts, GPS, Camera, Accelerometer<br />Tools<br />UI Framework, Nokia SDK, Resources<br />
  60. 60. Tools, UI Frameworks and Resources<br /><ul><li>Nokia WRT wiki </li></ul>http://wikis.in.nokia.com/CommonWebRuntime/CWRTForFremantleDeveloperGuidelines<br />http://wikis.in.nokia.com/CommonWebRuntime/MaemoProducts<br /><ul><li>Nokia SDK - http://wikis.in.nokia.com/WRTToolsWiki/WebHome
  61. 61. Web SDK
  62. 62. Web SDK Simulator
  63. 63. Extensions for Dream Weaver / Visual Studio
  64. 64. W3C Widget http://www.w3.org/TR/widgets-reqs/
  65. 65. UI Framework - OVI.JS http://wikis.in.nokia.com/OEF/OviAppUi
  66. 66. Design Guidelines
  67. 67. Device APIs https://cwiki.nokia.com/OSRuntimesTeamWiki/WRTDAWProject
  68. 68. HTML5https://cwiki.nokia.com/OSRuntimesTeamWiki/Html5CanvasAndOfflineStudy</li></li></ul><li> Thank You<br />May the Force be With You !<br />Questions/ Comments<br />Email rajesh.lal@nokia.com<br />
  1. A particular slide catching your eye?

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

×