Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WRT Widgets Masterclass - OverTheAir


Published on

WRT Widgets Masterclass slides from OverTheAir. Petro Soininen

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

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>
  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> </li></ul><ul><ul><ul><li>wrt / alpha.2008 </li></ul></ul></ul><ul><li> </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;;> </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); = ‘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 & MenuItem </li></ul><ul><li>Manipulate the options menu and softkeys </li></ul>function createMenu { var settings = new MenuItem ( ‘ Settings’, 10); settings.onSelect = showSettings; (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> </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> </li></ul></ul></ul><ul><li>More tools under development… </li></ul><ul><li>Documentation </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </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