WRT Widgets Masterclass - OverTheAir


Published on

WRT Widgets Masterclass slides from OverTheAir. Petro Soininen

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • WRT Widgets Masterclass - OverTheAir

    1. 1. Widgets master class <ul><li>WidSets & WRT widgets </li></ul><ul><ul><li>Concept&architecture </li></ul></ul><ul><ul><ul><li>Tools </li></ul></ul></ul><ul><ul><ul><ul><li>Documentation / community </li></ul></ul></ul></ul><ul><ul><ul><li>Development process </li></ul></ul></ul><ul><ul><ul><li>Compatibility </li></ul></ul></ul><ul><ul><li>Distribution channel </li></ul></ul><ul><li>WRT widget development hands-on tutorial </li></ul><ul><ul><li>Learn to implement, package and deploy a WRT widget </li></ul></ul><ul><li>Objectives </li></ul><ul><ul><li>Learn technology concepts and differences behind WRT and WidSets widgets </li></ul></ul><ul><ul><li>Learn where to find tools and documentation </li></ul></ul><ul><ul><li>Learn to create a WRT widget </li></ul></ul>http://groups.google.com/group/overtheair-nokia-widgets-master-class
    2. 2. Material <ul><li>Code on USB sticks (Widgets_Masterclass subfolder) and at the Google Group </li></ul><ul><li>Loan devices – NO STEALING! ;) </li></ul><ul><li>http://xdawrt001.ext.nokia.com/ </li></ul><ul><ul><ul><li>wrt / alpha.2008 </li></ul></ul></ul><ul><li>http://groups.google.com/group/overtheair-nokia-widgets-master-class </li></ul>
    3. 3. Petro Soininen WRT Widgets Dismantled
    4. 4. WRT Widgets Dismantled <ul><li>What is this WRT fuss all about? </li></ul>OK… What can I do … and How? I understand the basics. Where can I get more info? and
    5. 5. S60 WRT <ul><li>WebKit based environment enabling widgets and web applications to run on an S60 device </li></ul><ul><ul><li>Core components include XML engine, HTML parser, JavaScript engine, CSS processor, rendering engine etc. </li></ul></ul><ul><li>Standard web technologies used for rapid development </li></ul><ul><ul><li>HTML, JavaScript, AJAX, CSS, DOM </li></ul></ul><ul><li>Provides some system integration </li></ul><ul><ul><li>(Un)Installer mechanisms </li></ul></ul><ul><ul><li>JavaScript extensions for native look and feel </li></ul></ul><ul><ul><ul><li>Menus etc. </li></ul></ul></ul><ul><ul><li>Access to a subset of system properties </li></ul></ul><ul><li>Available from S60 3 rd Edition FP2 onwards </li></ul><ul><ul><li>+ selected S60 3 rd FP1 devices </li></ul></ul>
    6. 6. Symbian OS Nokia UI features S60 plug-ins, incl. Flash Lite, SVG, and audio. Symbian HTTP framework Netscape plug-in API (NPL) WebCore KHTML JavaScript Core KJS Browser Control S60 WebKit OS adaptations Memory manager S60 WRT S60 Browser UI WRT Web pages/apps Widgets SAPI Extensions via SAPI Framework Extensions via Netscape plug-in
    7. 7. Web Run-Time - Current Goal <ul><li>Widgets leverage the Web </li></ul><ul><ul><li>use internet services and Web APIs to access information </li></ul></ul><ul><ul><li>use XmlHttpRequest and AJAX techniques </li></ul></ul><ul><ul><li>low effort to port widgets from other platforms </li></ul></ul><ul><ul><li>Security Sandbox – Limited access to system resources </li></ul></ul><ul><li>Widgets integrated into S60 user experience </li></ul><ul><ul><li>Menu icon </li></ul></ul><ul><ul><li>Idle screen soft keys and shortcuts </li></ul></ul><ul><ul><li>Appear as native S60 applications </li></ul></ul><ul><ul><ul><li>Task list </li></ul></ul></ul><ul><ul><ul><li>Familiar (Un)Installer user experience </li></ul></ul></ul><ul><ul><li>Enable access to Widget specific APIs (widget, system info, menu) </li></ul></ul>S60 3 rd Edition Feature Pack 2
    8. 8. What to look for in the next phase? <ul><li>Widgets leverage the power of S60 </li></ul><ul><ul><li>combine information from Web with platform services </li></ul></ul><ul><ul><li>Location, PIM, media, Standby Screen integration… </li></ul></ul><ul><li>Widgets evolve as a development platform </li></ul><ul><ul><li>Integrated safely/securely with S60 platform services </li></ul></ul>
    9. 9. <ul><li>WRT Widget Framework </li></ul>
    10. 10. WRT Widget component structure <ul><li>Simple bundle of files </li></ul><ul><ul><li>info.plist (mandatory) </li></ul></ul><ul><ul><li>[name].html (mandatory) </li></ul></ul><ul><ul><li>icon.png </li></ul></ul><ul><ul><li>[name].css </li></ul></ul><ul><ul><li>[name].js </li></ul></ul>Widget properties + HTML backbone PNG icon + CSS layout + js logic
    11. 11. Widget Installation Package <ul><li>Widget installation file format </li></ul><ul><ul><li>Compressed with any ZIP application </li></ul></ul><ul><ul><li>ZIP file contains html, CSS, js, icons, graphics and the widget info file </li></ul></ul><ul><li>Widget installation file extension </li></ul><ul><ul><li>WidgetName.wgz </li></ul></ul><ul><li>Widget installation MIME type </li></ul><ul><ul><li>x-nokia-widgets </li></ul></ul>
    12. 12. Info.plist – widget properties <ul><li>A manifest file in XML format, containing the property and configuration information for a widget. </li></ul><ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul></ul><ul><ul><li><!DOCTYPE plist PUBLIC &quot;-//Nokia//DTD PLIST 1.0//EN&quot; &quot;http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd&quot;> </li></ul></ul><ul><ul><li><plist version=&quot;1.0&quot;> </li></ul></ul><ul><ul><li><dict> </li></ul></ul><ul><ul><li> <key> DisplayName </key> </li></ul></ul><ul><ul><li> <string>My Widget</string> </li></ul></ul><ul><ul><li> <key> Identifier </key> </li></ul></ul><ul><ul><li> <string>com.mycompany.widget.project</string </li></ul></ul><ul><ul><li> <key> MainHTML </key> </li></ul></ul><ul><ul><li> <string>Main.html</string> </li></ul></ul><ul><ul><li></dict> </li></ul></ul><ul><ul><li></plist> </li></ul></ul>
    13. 13. HTML – The Backbone <ul><li>Defines the structure of the widget. </li></ul><html> <head> .. </head> <body id=&quot;body&quot;> <div id=‘mainView’> <span class=‘title’>Front view</span> </div> <div id=‘subView1’ class=‘subView’> <p class=‘title’>Back view</p> </div> <div id=‘subView2’ class=‘subView’> <p class=‘title’>Config view</p> </div> </body> </html> Use the <div> (block-level) element to construct the widget’s views . Views can be constructed with static HTML elements or can be dynamically created by JavaScript at runtime.
    14. 14. CSS – Makeup for a Widget <ul><li>Style and layout information </li></ul><ul><ul><li>Defines how to display HTML element: position, color, background color etc. </li></ul></ul><ul><li>CSS information can be embedded in the HTML file or imported from an external styleheet </li></ul>// Class selector to define common style for similar components .title { font-size: 26px; color: blue; } .subView { display: none } // Id selector to define a unique style for a unique component #mainView { font-size: 16px; color: red; text-align: center; } // Pseudo-class selector to design a pattern style div.subview div { margin: 10px 0 0 0; padding: 20px 20px 20px 20px; . . . }
    15. 15. JavaScript – The logic <ul><li>The brain power </li></ul><ul><ul><li>Without JavaScript code, a widget is just a passive Web page </li></ul></ul><ul><li>Don’t reinvent the wheel </li></ul><ul><ul><li>Loads of JavaScript goodies available on the web </li></ul></ul>// define some global variable var globalVariable = 0; // function multiply(xValue, yValue){ return xValue * yValue; } // create a new element with DOM function var newElement = document.createElement (‘div’); newElement. setAttribute (‘id’, ‘extraView’); // show/hide views function changeView(activeViewId, hiddenViewId){ var activeView = document.getElementById ( activeViewId); activeView.style.display = ‘block’; . . . } <ul><ul><li>DOM APIs </li></ul></ul><ul><ul><li>XMLHttpRequest </li></ul></ul><ul><li>Platform services via Nokia-specific extended JavaScript API </li></ul>
    16. 16. <ul><li>No, </li></ul><ul><li>it’s not just a web page… </li></ul>Nokia widget-specific JavaScript APIs for: Widget properties Utility functions Menu handling System info and services
    17. 17. Widget Object <ul><li>widget or window.widget </li></ul><ul><li>utility functions to manipulate widget’s properties </li></ul><ul><li>Widget methods </li></ul><ul><ul><li>openURL </li></ul></ul><ul><ul><li>setPreferenceForKey </li></ul></ul><ul><ul><li>preferenceForKey </li></ul></ul><ul><ul><li>prepareForTransition </li></ul></ul><ul><ul><li>performTransition </li></ul></ul><ul><ul><li>setNavigationEnabled </li></ul></ul><ul><ul><li>openApplication </li></ul></ul><ul><ul><li>setDisplayLandscape </li></ul></ul><ul><ul><li>setDisplayPortrait </li></ul></ul><ul><li>Widget properties </li></ul><ul><ul><li>identifier </li></ul></ul><ul><ul><li>onshow </li></ul></ul><ul><ul><li>onhide </li></ul></ul><ul><ul><li>isRotationSupported </li></ul></ul>var h = window.screen.height; var w = window.screen.width; if (h < w) widget.setDisplayLanscape();
    18. 18. Menus <ul><li>menu or window.menu & MenuItem </li></ul><ul><li>Manipulate the options menu and softkeys </li></ul>function createMenu { var settings = new MenuItem ( ‘ Settings’, 10); settings.onSelect = showSettings; window.menu.append (settings); opMenu. setRightSoftKeyLabel ( ‘ Back’, toMainView); } function showSettings(id) { document.getElementById( ‘ setting’).style.display = ‘block’; }
    19. 19. System Info Service API <ul><li>System info service API is a scriptable Netscape plug-in module </li></ul><ul><ul><li>Subset of system properties accessible </li></ul></ul><ul><ul><li>Memory, network, battery status, etc. </li></ul></ul><ul><li>System info service plug-in module is loaded via an HTML <embed> element </li></ul><ul><li>System info service plug-in module is not loaded in Browser context </li></ul><embed type=&quot;application/x-systeminfo-widget&quot; hidden=&quot;yes&quot;></embed>
    20. 20. System Info Service API Properties and callback requests Charger Lights Power Network Beep tones Memory Vibra File System Charger Language
    21. 21. WRT widget development <ul><li>For implementing widget code: </li></ul><ul><ul><li>Text editor or a web IDE </li></ul></ul><ul><ul><li>Your favorite development tool  </li></ul></ul><ul><li>For testing a widget: </li></ul><ul><ul><li>S60 3 rd Edition Feature Pack 2 Beta SDK emulator </li></ul></ul><ul><ul><li>Compatible S60 device (N95 8GB) </li></ul></ul><ul><ul><ul><li>Bluetooth deployment </li></ul></ul></ul><ul><ul><li>Firefox </li></ul></ul><ul><ul><ul><li>Greasemonkey </li></ul></ul></ul><ul><ul><ul><li>WRT Desktop development test-bed </li></ul></ul></ul><ul><li>For debugging a running widget </li></ul><ul><ul><li>JavaScript loggers / ‘debugger’ </li></ul></ul><ul><ul><li>firebug </li></ul></ul>
    22. 22. Tools and documentation <ul><li>First set of tools and documentation fresh out of the oven </li></ul><ul><ul><li>Documentation </li></ul></ul><ul><ul><li>Packaging and deployment tool </li></ul></ul><ul><ul><li>Dashboard widget porting assistance </li></ul></ul><ul><ul><li>http://xdawrt001.ext.nokia.com/ </li></ul></ul><ul><ul><ul><li>wrt / alpha.2008 </li></ul></ul></ul><ul><ul><li>Feedback to Google group </li></ul></ul><ul><ul><ul><li>http://groups.google.com/group/nokia-wrt-tools-beta </li></ul></ul></ul><ul><li>More tools under development… </li></ul><ul><li>Documentation </li></ul><ul><ul><li>Forum.nokia.com/widgets </li></ul></ul><ul><ul><li>Wiki.forum.nokia.com </li></ul></ul><ul><ul><li>Web-developer’s library </li></ul></ul>
    23. 23. WRTKit <ul><li>UI toolkit for developing a web UI suitable for mobile devices </li></ul><ul><ul><li>Javascript, CSS and graphical elements </li></ul></ul><ul><ul><li>Event triggering and state monitoring </li></ul></ul><ul><ul><li>Easy to create a consistent UI experience </li></ul></ul><ul><li>Object oriented </li></ul><ul><ul><li>UIManager </li></ul></ul><ul><ul><li>Views </li></ul></ul><ul><ul><li>State-aware controls </li></ul></ul><ul><li>Observer pattern used to notify of UI events </li></ul>
    24. 24. Ok, this should be enough for now Let’s check how to do it in practice