WRT Widgets Masterclass - OverTheAir
Upcoming SlideShare
Loading in...5

WRT Widgets Masterclass - OverTheAir



WRT Widgets Masterclass slides from OverTheAir. Petro Soininen

WRT Widgets Masterclass slides from OverTheAir. Petro Soininen



Total Views
Views on SlideShare
Embed Views



8 Embeds 399

http://overtheair.org 294
http://npossibilidades.blog.br 54
http://www.slideshare.net 25
http://npossibilidades.com.br 16
http://translate.googleusercontent.com 4
http://webruntimeblog.blogspot.com 3
http://web.archive.org 2 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

WRT Widgets Masterclass - OverTheAir WRT Widgets Masterclass - OverTheAir Presentation Transcript

  • Widgets master class
    • WidSets & WRT widgets
      • Concept&architecture
        • Tools
          • Documentation / community
        • Development process
        • Compatibility
      • Distribution channel
    • WRT widget development hands-on tutorial
      • Learn to implement, package and deploy a WRT widget
    • Objectives
      • Learn technology concepts and differences behind WRT and WidSets widgets
      • Learn where to find tools and documentation
      • Learn to create a WRT widget
  • Material
    • Code on USB sticks (Widgets_Masterclass subfolder) and at the Google Group
    • Loan devices – NO STEALING! ;)
    • http://xdawrt001.ext.nokia.com/
        • wrt / alpha.2008
    • http://groups.google.com/group/overtheair-nokia-widgets-master-class
  • Petro Soininen WRT Widgets Dismantled
  • WRT Widgets Dismantled
    • What is this WRT fuss all about?
    OK… What can I do … and How? I understand the basics. Where can I get more info? and
  • S60 WRT
    • WebKit based environment enabling widgets and web applications to run on an S60 device
      • Core components include XML engine, HTML parser, JavaScript engine, CSS processor, rendering engine etc.
    • Standard web technologies used for rapid development
      • HTML, JavaScript, AJAX, CSS, DOM
    • Provides some system integration
      • (Un)Installer mechanisms
      • JavaScript extensions for native look and feel
        • Menus etc.
      • Access to a subset of system properties
    • Available from S60 3 rd Edition FP2 onwards
      • + selected S60 3 rd FP1 devices
  • 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
  • Web Run-Time - Current Goal
    • Widgets leverage the Web
      • use internet services and Web APIs to access information
      • use XmlHttpRequest and AJAX techniques
      • low effort to port widgets from other platforms
      • Security Sandbox – Limited access to system resources
    • Widgets integrated into S60 user experience
      • Menu icon
      • Idle screen soft keys and shortcuts
      • Appear as native S60 applications
        • Task list
        • Familiar (Un)Installer user experience
      • Enable access to Widget specific APIs (widget, system info, menu)
    S60 3 rd Edition Feature Pack 2
  • What to look for in the next phase?
    • Widgets leverage the power of S60
      • combine information from Web with platform services
      • Location, PIM, media, Standby Screen integration…
    • Widgets evolve as a development platform
      • Integrated safely/securely with S60 platform services
    • WRT Widget Framework
  • WRT Widget component structure
    • Simple bundle of files
      • info.plist (mandatory)
      • [name].html (mandatory)
      • icon.png
      • [name].css
      • [name].js
    Widget properties + HTML backbone PNG icon + CSS layout + js logic
  • Widget Installation Package
    • Widget installation file format
      • Compressed with any ZIP application
      • ZIP file contains html, CSS, js, icons, graphics and the widget info file
    • Widget installation file extension
      • WidgetName.wgz
    • Widget installation MIME type
      • x-nokia-widgets
  • Info.plist – widget properties
    • A manifest file in XML format, containing the property and configuration information for a widget.
      • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
      • <!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;>
      • <plist version=&quot;1.0&quot;>
      • <dict>
      • <key> DisplayName </key>
      • <string>My Widget</string>
      • <key> Identifier </key>
      • <string>com.mycompany.widget.project</string
      • <key> MainHTML </key>
      • <string>Main.html</string>
      • </dict>
      • </plist>
  • HTML – The Backbone
    • Defines the structure of the widget.
    <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.
  • CSS – Makeup for a Widget
    • Style and layout information
      • Defines how to display HTML element: position, color, background color etc.
    • CSS information can be embedded in the HTML file or imported from an external styleheet
    // 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; . . . }
  • JavaScript – The logic
    • The brain power
      • Without JavaScript code, a widget is just a passive Web page
    • Don’t reinvent the wheel
      • Loads of JavaScript goodies available on the web
    // 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’; . . . }
      • DOM APIs
      • XMLHttpRequest
    • Platform services via Nokia-specific extended JavaScript API
    • No,
    • it’s not just a web page…
    Nokia widget-specific JavaScript APIs for: Widget properties Utility functions Menu handling System info and services
  • Widget Object
    • widget or window.widget
    • utility functions to manipulate widget’s properties
    • Widget methods
      • openURL
      • setPreferenceForKey
      • preferenceForKey
      • prepareForTransition
      • performTransition
      • setNavigationEnabled
      • openApplication
      • setDisplayLandscape
      • setDisplayPortrait
    • Widget properties
      • identifier
      • onshow
      • onhide
      • isRotationSupported
    var h = window.screen.height; var w = window.screen.width; if (h < w) widget.setDisplayLanscape();
  • Menus
    • menu or window.menu & MenuItem
    • Manipulate the options menu and softkeys
    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’; }
  • System Info Service API
    • System info service API is a scriptable Netscape plug-in module
      • Subset of system properties accessible
      • Memory, network, battery status, etc.
    • System info service plug-in module is loaded via an HTML <embed> element
    • System info service plug-in module is not loaded in Browser context
    <embed type=&quot;application/x-systeminfo-widget&quot; hidden=&quot;yes&quot;></embed>
  • System Info Service API Properties and callback requests Charger Lights Power Network Beep tones Memory Vibra File System Charger Language
  • WRT widget development
    • For implementing widget code:
      • Text editor or a web IDE
      • Your favorite development tool 
    • For testing a widget:
      • S60 3 rd Edition Feature Pack 2 Beta SDK emulator
      • Compatible S60 device (N95 8GB)
        • Bluetooth deployment
      • Firefox
        • Greasemonkey
        • WRT Desktop development test-bed
    • For debugging a running widget
      • JavaScript loggers / ‘debugger’
      • firebug
  • Tools and documentation
    • First set of tools and documentation fresh out of the oven
      • Documentation
      • Packaging and deployment tool
      • Dashboard widget porting assistance
      • http://xdawrt001.ext.nokia.com/
        • wrt / alpha.2008
      • Feedback to Google group
        • http://groups.google.com/group/nokia-wrt-tools-beta
    • More tools under development…
    • Documentation
      • Forum.nokia.com/widgets
      • Wiki.forum.nokia.com
      • Web-developer’s library
  • WRTKit
    • UI toolkit for developing a web UI suitable for mobile devices
      • Javascript, CSS and graphical elements
      • Event triggering and state monitoring
      • Easy to create a consistent UI experience
    • Object oriented
      • UIManager
      • Views
      • State-aware controls
    • Observer pattern used to notify of UI events
  • Ok, this should be enough for now Let’s check how to do it in practice