Meego Widget Development using Qt WRT @iRajLal
Upcoming SlideShare
Loading in...5
×
 

Meego Widget Development using Qt WRT @iRajLal

on

  • 352 views

Meego Widget Development using Qt WRT

Meego Widget Development using Qt WRT

Statistics

Views

Total Views
352
Views on SlideShare
352
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