Meego Widget Development using Qt WRT

1. Widget Development using Qt Web Runtime July 08, 2010 – Rajesh Lal MeeGo Team, Mountain View, CA

2. Plan for next 50 minutes Widget feel free to ask in between Engine Qt Web Runtime Technology HTML 5, CSS3, AJAX Device API Contacts, GPS, Camera, Accelerometer Tools UI Framework, Nokia SDK, Resources

4. Widget Era

5. Nokia WRT Widget

6. W3C

8. http://www.konfabulator.com/cartoon/partFour.html

9. Widget Era Yahoo Widget Opera Widget Dashcode Widget Windows Gadget “Standard” Web technology: HTML, CSS, XML, and JavaScript using browser based rendering engine

10. Widget Era Timeline

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 applicationsNokia Web Runtime also used “standard” HTML, CSS and JavaScript

15. W3C* Widget 1.0 Specification 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. Examples: Clock, Sticky Notes, Weather, News Reader, photo album * World Wide Web Consortium: Organization which develop standards for Web

18. Packaging

19. Localization

20. Window Modes

23. Widget: Demo Hello World

24. Widget Engine: Web Runtime Widget Engine Qt Web Runtime Technology HTML 5, CSS3, AJAX Device API Contacts, GPS, Camera, Accelerometer Tools UI Framework, Nokia SDK, Resources

25. Widget Engine: Web Runtime WRT evolved into Common Web Runtime which is renamed as Qt WRT

26. Widget Engine: Common Web Runtime

27. Widget Engine: ‘Common’ in cWRT * Common Java Script Extension (CJSE)

28. Widget Engine: ‘Web’ in cWRT Webkit Engine

30. Interface to Device functionalityWidget Runtime Device

31. Widget Engine: Runtime in cWRT Interface to the Device APIs using Feature tag (W3C standard)

32. Widget Engine: Runtime in cWRT Interface to the Device functionality

33. Widget: Demo Web Runtime

34. Technology behind WRT Widget Engine Qt Web Runtime Technology HTML 5, CSS3, AJAX Device API Contacts, GPS, Camera, Accelerometer Tools UI Framework, Nokia SDK, Resources

36. CSS 3

37. JavaScript 1.5 (some features of 1.6)

38. Cross Domain Ajax

40. Widget: Demo Animation RGBA Colors Gradients CSS3 @Font-Face Rounded Corners Box Shadow Borders with images Opacity Text Shadow Multiple Background Images

41. Device APIs Widget Engine Qt Web Runtime Technology HTML 5, CSS3, AJAX Device API Contacts, GPS, Camera, Accelerometer Tools UI Framework, Nokia SDK, Resources

43. Method, Properties supported by each API

44. How to Use these APIs in a Widget

46. Data APIs in MeeGo

47. 1. Data APIs in MeeGo methods Object -properties

48. 1. Data APIs in MeeGo

49. 3. Use Device APIs in Web Widget File System API filesystemObject = nokia.device.load("filesystem", null); vardataArray = filesystemObject .getDirContents("file://" + prefix + uri, "*"); for (index in dataArray) { if (dataArray[index].type == 0) { filetype = "[File]"; } else if (dataArray[index].type == 1) { filetype = "[Directory]"; } else { filetype = "[Link]"; } listing.innerHTML+="<b>" + filetype + " : </b>" + dataArray[index].uri;

50. Use Data APIs in Web Widget Battery Level API sysobject = nokia.device.load("sysinfo", null); btr = sysobject.getChannel("BatteryLevel"); chr = sysobject.getChannel("Charging"); lastLevel = btr.batteryLevel; System Information temp = sysobject.getChannel("Network"); element ="<tr><td>"+"Network"+"</td><td>"+ "("+"networkName:"+ temp.networkName+")"+ "("+"networkStatus:"+ temp.networkStatus+")"+ "("+"networkMode:"+ temp.networkMode+")"+ "("+"mobileCountryCode:"+ temp.mobileCountryCode+")"+ "("+"locationStatus:"+ temp.locationStatus+")"+ "("+"areaCode:"+ temp.areaCode+")"+ "("+"cellID:"+ temp.cellID+")"+ "</td></tr>"; element = sync_table.innerHTML + element;

51. Media APIs in MeeGo

52. 2. Media APIs in MeeGo methods Object -properties

53. Use Media APIs in Web Widget Audio Player API so = nokia.device.load("audioplayer"); so.open(successCBopen, url, errorCB); so.play(successCB, 0, errorCB); so.stop(); so.pause(); so.resume(); so.setVolume(so.getVolume()+10);

54. Utility APIs in MeeGo

55. 3. Utility APIs in MeeGo methods Object -properties

56. 3. Utility APIs in MeeGo

57. 3. Use Utlity APIs in Web Widget Location GPS this.so = nokia.device.load("geolocation", null); this.so.getCurrentPosition( function(position) { this.lat = position.coords.latitude; this.lon = position.coords.longitude; } )

58. Widget: Demo Device APIs Demo

59. Tools, UI Frameworks and Resources Widget Engine Qt Web Runtime Technology HTML 5, CSS3, AJAX Device API Contacts, GPS, Camera, Accelerometer Tools UI Framework, Nokia SDK, Resources

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