Your SlideShare is downloading. ×
0
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Meego Widget Development using Qt WRT @iRajLal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Meego Widget Development using Qt WRT @iRajLal

246

Published on

Meego Widget Development using Qt WRT

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
246
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Widget Development<br />using Qt Web Runtime<br />July 08, 2010 – Rajesh Lal<br /> MeeGo Team, Mountain View, CA<br />
  • 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. Widget<br /><ul><li> Widget History
  • 4. Widget Era
  • 5. Nokia WRT Widget
  • 6. W3C
  • 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. http://www.konfabulator.com/cartoon/partFour.html<br />
  • 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. Widget Era Timeline<br />
  • 11. Web Runtime Widget <br />Nokia Developed Web Runtime in 2005<br /><ul><li> Web Runtime was a Portable application framework
  • 12.   Allows the creation of widgets on  S60 Platform (3rd Edition)
  • 13. Extension to S60 Webkit based browser
  • 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. 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.
  • 17. Widget: W3C standardization<br /><ul><li> Widget APIs
  • 18. Packaging
  • 19. Localization
  • 20. Window Modes
  • 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. 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. Widget: Demo<br />Hello World<br />
  • 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. Widget Engine: Web Runtime<br />WRT evolved into Common Web Runtime which is renamed as Qt WRT<br />
  • 26. Widget Engine: Common Web Runtime<br />
  • 27. Widget Engine: ‘Common’ in cWRT<br />* Common Java Script Extension (CJSE) <br />
  • 28. Widget Engine: ‘Web’ in cWRT<br /> Webkit Engine<br />
  • 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. Interface to Device functionality</li></ul>Widget <br />Runtime<br />Device<br />
  • 31. Widget Engine: Runtime in cWRT<br />Interface to the Device APIs using Feature tag (W3C standard)<br />
  • 32. Widget Engine: Runtime in cWRT<br />Interface to the Device functionality<br />
  • 33. Widget: Demo<br />Web Runtime<br />
  • 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. Technology behind WRT<br /><ul><li> HTML5
  • 36. CSS 3
  • 37. JavaScript 1.5 (some features of 1.6)
  • 38. Cross Domain Ajax
  • 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. 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. 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. Device APIs <br /><ul><li>List of APIs currently supported
  • 43. Method, Properties supported by each API
  • 44. How to Use these APIs in a Widget
  • 45. Demo</li></li></ul><li> Supported Device APIs in MeeGo <br />
  • 46. Data APIs in MeeGo <br />
  • 47. 1. Data APIs in MeeGo <br />methods<br />Object -properties<br />
  • 48. 1. Data APIs in MeeGo <br />
  • 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. 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. Media APIs in MeeGo <br />
  • 52. 2. Media APIs in MeeGo <br />methods<br />Object -properties<br />
  • 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. Utility APIs in MeeGo <br />
  • 55. 3. Utility APIs in MeeGo <br />methods<br />Object -properties<br />
  • 56. 3. Utility APIs in MeeGo <br />
  • 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. Widget: Demo<br />Device APIs Demo<br />
  • 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. 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. Web SDK
  • 62. Web SDK Simulator
  • 63. Extensions for Dream Weaver / Visual Studio
  • 64. W3C Widget http://www.w3.org/TR/widgets-reqs/
  • 65. UI Framework - OVI.JS http://wikis.in.nokia.com/OEF/OviAppUi
  • 66. Design Guidelines
  • 67. Device APIs https://cwiki.nokia.com/OSRuntimesTeamWiki/WRTDAWProject
  • 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 />

×