1 / 33

S60 Web Runtime Widgets

S60 Web Runtime Widgets. 29 Oct 2008, DTU Riku Salminen. Material. Slides / Code / Tools On USB sticks. Todays agenda. 9.30 - 12.00 What is Forum Nokia What are widgets WRT Widgets dissected Coding session (instructor lead (if we have time ;o) 12.00 - 13.00 Lunch

natan
Download Presentation

S60 Web Runtime Widgets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. S60 Web Runtime Widgets 29 Oct 2008, DTU Riku Salminen

  2. Material Slides / Code / ToolsOn USB sticks

  3. Todays agenda 9.30 - 12.00 What is Forum Nokia What are widgets WRT Widgets dissected Coding session (instructor lead (if we have time ;o) 12.00 - 13.00 Lunch 13.00 - 16.30 Coding session (instructor lead) WRT 2.0 - Platform services - Extending the widget capabilities 16.30 Closing

  4. WHO’S THE CROWD? students developers? designers? web? Othermobile platforms?

  5. Forum Nokia Developer Programs Forum Nokia – Public information database, trainings, development tools & more; Forum Nokia Champion – Recognition and reward program for the top mobile developers contributing to the success of the Forum Nokia Community; Forum Nokia Launchpad – Premium membership service that gives developers early and exclusive access to Forum Nokia resources and support ; Forum Nokia PRO – Invitation-only program for leading-edge companies doing business in the mobile world; Forum Nokia PRO Accelerator - Targets developers of innovative, industry-changing mobile software and services selected for funding by top-tier VC firms

  6. Forum Nokia Bring innovation to Nokia devices, services & software Createbusiness opportunities for mobile developers Tech Business Development Tools Consultancy Marketing Support channels Distribution channels forum.nokia.com

  7. The LeadingSmartphone Platform Nokia, Samsung, LG Over 150M devices shipped Sold by 200+ operators

  8. Build what you want - Use what you knowOnly on S60 Powerful environments offer experienced developers ways to expand the capabilities of mobile devices and leverage the creativity of open source communities Easy, creative environments express your design vision and let you create innovative experiences and deliver Internet services Symbian C++, Open C Open C++ Java Web Run-Time Python Flash

  9. What’s a widget?http://en.wikipedia.org/wiki/Web_widget#Widgets In 1924 in George S. Kaufman’s play Beggar on Horseback a young composer is engaged to Gladys Cady, the daughter of a wealthy industrialist whose company manufactures widgets.This composer wants to write great music but is forced to crank out jazz tunes to pay the rent. Mr Cady offers McRae an executive position in his widget factory... providing he gives up all this nonsense about composing music. The dilemma is obviously tearing the young fragile artist apart and is reflected in surreal and violent dreams… Web page without a browser UI

  10. S60 for Web Developers (as of today ) S60 Browser and Web Runtime are based on WebKit Native C/C++“Web Capable” Widgets WebBrowser Web Runtime S60 Browser UI Netscapeplug-in API S60 plug-ins, incl. Flash Lite, SVG, and audio. Browser control API S60 WebKit WebCore KHTML (LGPL+BSD) JavaScript Core KJS (LGPL) UI features Platform Services Integration OS adaptations Memory manager More information about Webkit: http://www.webkit.org 10

  11. Web Browser for S60 delivers a complete browsing experience… AJAX and Dynamic HTML JavaScript & SSL Password manager RSS & Atom feeds Bookmark icons (“favicons”) Page Overview

  12. WRT Compatible Devices • 15 Nokia devices for 2008 launched, announced or upcoming • N-series multimedia computers, E-series business phones, Several high-end mainstream/ volume devices • S60 platform licensee devices will support WRT (Samsung, LG) 12

  13. Distribution via Nokia channels widgets.nokia.mobi Download! Channels • widgets.nokia.mobi • with your mobile browser • MOSH • (Mobilize and Share) • service at mosh.nokia.com Embedded Download! client on 100+ million devices Description 13

  14. Distributed through non Nokia channels 3rd party widget aggregators Operator Portals Your site Channels Aggregator who aggregate & publish widgets, e.g. Plusmo (s60.plusmo.com) • Operator portal, e.g. Vodafone Betavine, • http://widgetvine.mobi/ • Put on your site and allow users to download and install widgets, e.g. reuters.com/tools/widgets Description 14

  15. Enough talk already!. Show me How

  16. WRT Widget ingredients S60 3rd Edition Feature Pack 2 xHTML JavaScript CSS AJAX We deliver the runtime extras (Un)Installers and recognizers Menus, Softkey handling and more…

  17. Widgetproperties+ HTMLbackbone PNGicon+ CSSlayout+jslogic WRT Widget Ingredients: Simple bundle of files info.plist (mandatory) [name].html (mandatory) icon.png [name].css [name].js Root folder!

  18. Folder structure (recommended)

  19. Info.plist <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd"> <plist version="1.0"> <dict> <key>DisplayName</key> <string>Hello DTU!</string> <key>Identifier</key> <string>com.example.myfirstwidget</string> <key>Version</key> <string>1.0</string> <key>MainHTML</key> <string>index.html</string> <key>AllowNetworkAccess</key> <true/> </dict> </plist>

  20. Index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“…> <html> <head> <title>Sample Widget</title> <meta http-equiv="Content-Type" … > <link href="css/styles.css"/> <script … src="javascript/basic.js"></script> </head> <body> <!--The playground--> <div id="container"> <div id="clickMe" href="#">Click me</div> </div> <!--The other playground--> <div id="console"></div> </body> </html>

  21. Highlights from styles.css body { background-color:black; /* The way to make debugging in browser easier */ } #container{ width: 240px; height: 320px; … overflow:hidden; } #clickMe{ background-image: url('../img/Button.png'); background-repeat: no-repeat; … #console{ background-color:black; …

  22. basic.js Set up the Widget when the window loads window.onload = init; function init(){ document.getElementById("clickMe").style.display = "block"; document.getElementById("console").style.display = "none"; document.getElementById("clickMe").onclick = function()clicked(this); } } function clicked(who){ var console = document.getElementById("console"); var YourName = prompt("Who are you?","") widget.prepareForTransition("fade"); console.innerHTML = "Hello!<br>"+ YourName; console.style.display = "block"; who.style.display = "none"; widget.performTransition(); } Hide the console and make sure the button is visible Create the onClick event to the button Handle the OnClick Ask for name Lets make it look smooooth ;o) Hide the button and make console visible And now fade and oooh...

  23. Packaging and distribution Zip the files …rename to .wgz MIME type x-nokia-widget

  24. Lunctime!

  25. S60 Web Runtime Widgets 29 Oct 2008, DTU Riku Salminen Using Extended devices capabilities

  26. Platform services Official version Plugin for get/set access to ’risk-free’ properties Memory Power Messaging File System Lights PIM Vibra Network Charger Language Audio Beep tones System …and fresh out of the oven Imaging S60 5th Edition gives widgets superpowers Location

  27. First Set of 5th edition services • Landmarks • Application Manager • System Info • Logging • Sensors • Location • Contacts • Calendar • Media Management • Messaging

  28. …and the unofficial ways to drill deep into system resources • Localhost connection • C / C++ / Java / Python server • Mobile Web Server / PAMP • PHP or ModPython http://wiki.forum.nokia.com/index.php/TSS001070_-_Modifying_Web_content_using_a_HTTP_filter http://wiki.forum.nokia.com/index.php/How_to_utilize_device_resources_from_a_WRT_widget http://wiki.forum.nokia.com/index.php/How_to_access_S60_resources_from_WRT_or_FlashLite_using_PyS60

  29. SDK support S60 3rd FP2 SDK Developer documentation Emulator test-bed JavaScript logging Traffic inspection S60 5th Edition SDK S60 Platform Services documentation and emulator support forum.nokia.com/S60SDK

  30. Help & Support eLearning Code Docs Webinars Discussion forum.nokia.com/widgets wiki.forum.nokia.com

  31. Working with the service object //Initiating the location object var serviceObject = device.getServiceObject("Service.Location", "ILocation"); //Synchonyous call example: var criteria = new Object(); var result = serviceObject.ILocation.GetLocation(criteria); var latitude = result.ReturnValue.Latitude; var longitude = result.ReturnValue.Longitude; //Asynchronyous call example: var result = serviceObject.ILocation.GetLocation(criteria, callBack); function callBack(transId, eventCode, result){ //This is executed when the result object is ready }

  32. Now it’s your turn use the examples to create magic!

  33. Q&A

More Related