• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Meego Widget Development using Qt WRT @iRajLal
 

Meego Widget Development using Qt WRT @iRajLal

on

  • 301 views

Meego Widget Development using Qt WRT

Meego Widget Development using Qt WRT

Statistics

Views

Total Views
301
Views on SlideShare
301
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

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

    Meego Widget Development using Qt WRT @iRajLal Meego Widget Development using Qt WRT @iRajLal Presentation Transcript

    • Widget Development
      using Qt Web Runtime
      July 08, 2010 – Rajesh Lal
      MeeGo Team, Mountain View, CA
    • 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
    • Widget
      • Widget History
      • Widget Era
      • Nokia WRT Widget
      • W3C
      • Demo
    • Widget: History
      Konfabulator
      Feb 10, 2003
      Tagline - “Whatever you want it to be“
      For Macintosh
      It ran files called Widgets
      Developers:
       Arlo Rose, Perry Clarke, and Ed Voas (Windows Version)
    • http://www.konfabulator.com/cartoon/partFour.html
    • Widget Era
      Yahoo Widget
      Opera Widget
      Dashcode Widget
      Windows Gadget
      “Standard” Web technology: HTML, CSS, XML, and JavaScript using browser based rendering engine
    • Widget Era Timeline
    • Web Runtime Widget
      Nokia Developed Web Runtime in 2005
      • Web Runtime was a Portable application framework
      •   Allows the creation of widgets on  S60 Platform (3rd Edition)
      • Extension to S60 Webkit based browser
      • Allows instances of the browser to be run as applications
      Nokia Web Runtime also used “standard” HTML, CSS and JavaScript
    • 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
    • Widget: W3C standardization
      • Widget APIs
      • Packaging
      • Localization
      • Window Modes
      • Manifest Configuration file
    • Widget: How cWRT widget conforms to W3C
      • Widget APIs - ‘widget’ object Interface
      widget.author
      widget.version
      widget.id
      widget.name
      widget.description
      • Packaging -
      All files Zipped (inside root folder)
      and extension .ZIP changed to .WGT
      • Localization
      Folder structure for HelloWorld.WGT
      -> locales/en/helloworld/
      -> locales/en-US/helloworld/
      -> locales/en-GB/helloworld/
    • Widget: Hello World Demo
      • Manifest file
      config.xml
      • Window Modes
      - windowed
      - fullscreen
      - minimized (312x82)
      - floating (No support)
      - maximized (No support)
    • Widget: Demo
      Hello World
    • 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
    • Widget Engine: Web Runtime
      WRT evolved into Common Web Runtime which is renamed as Qt WRT
    • Widget Engine: Common Web Runtime
    • Widget Engine: ‘Common’ in cWRT
      * Common Java Script Extension (CJSE) 
    • Widget Engine: ‘Web’ in cWRT
      Webkit Engine
    • Widget Engine: Runtime in cWRT
      The Runtime allows the Widget to interface to the device
      • Interface to Device APIs
      • Interface to Device functionality
      Widget
      Runtime
      Device
    • Widget Engine: Runtime in cWRT
      Interface to the Device APIs using Feature tag (W3C standard)
    • Widget Engine: Runtime in cWRT
      Interface to the Device functionality
    • Widget: Demo
      Web Runtime
    • 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
    • Technology behind WRT
      • HTML5
      • CSS 3
      • JavaScript 1.5 (some features of 1.6)
      • Cross Domain Ajax
      • Flash 10 (!)
    • Widget: Demo
      Geolocation
      Video/Audio
      Canvas
      HTML5
      contenteditable 
      @font-face
      Web Workers(Hyper threading)
      Form controls
      Local Storage
      Ability to describe content
    • Widget: Demo
      Animation
      RGBA Colors
      Gradients
      CSS3
      @Font-Face
      Rounded Corners
      Box Shadow
      Borders with images
      Opacity
      Text Shadow
      Multiple Background Images
    • Device APIs
      Widget
      Engine
      Qt Web Runtime
      Technology
      HTML 5, CSS3, AJAX
      Device API
      Contacts, GPS, Camera, Accelerometer
      Tools
      UI Framework, Nokia SDK, Resources
    • Device APIs
      • List of APIs currently supported
      • Method, Properties supported by each API
      • How to Use these APIs in a Widget
      • Demo
    • Supported Device APIs in MeeGo
    • Data APIs in MeeGo
    • 1. Data APIs in MeeGo
      methods
      Object -properties
    • 1. Data APIs in MeeGo
    • 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;
    • 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;
    • Media APIs in MeeGo
    • 2. Media APIs in MeeGo
      methods
      Object -properties
    • 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);
    • Utility APIs in MeeGo
    • 3. Utility APIs in MeeGo
      methods
      Object -properties
    • 3. Utility APIs in MeeGo
    • 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;
      }
      )
    • Widget: Demo
      Device APIs Demo
    • 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
    • Tools, UI Frameworks and Resources
      • Nokia WRT wiki
      http://wikis.in.nokia.com/CommonWebRuntime/CWRTForFremantleDeveloperGuidelines
      http://wikis.in.nokia.com/CommonWebRuntime/MaemoProducts
      • Nokia SDK - http://wikis.in.nokia.com/WRTToolsWiki/WebHome
      • Web SDK
      • Web SDK Simulator
      • Extensions for Dream Weaver / Visual Studio
      • W3C Widget http://www.w3.org/TR/widgets-reqs/
      • UI Framework - OVI.JS http://wikis.in.nokia.com/OEF/OviAppUi
      • Design Guidelines
      • Device APIs https://cwiki.nokia.com/OSRuntimesTeamWiki/WRTDAWProject
      • HTML5https://cwiki.nokia.com/OSRuntimesTeamWiki/Html5CanvasAndOfflineStudy
    • Thank You
      May the Force be With You !
      Questions/ Comments
      Email rajesh.lal@nokia.com