using Qt Web Runtime

July 08, 2010 – Rajesh Lal

MeeGo Team, Mountain View, CA

Widget Development

Plan for next 50 minutes

Widget

Qt Web Runtime

Engine

HTML 5, CSS3, AJAX

TechnologyUI Framework, Nokia SDK, Resources

Tools D

evice AP

I

Contacts, GPS, Camera, Accelerometer

feel free to askin between

Widget

• Widget History

• Widget Era

• Nokia WRT Widget

• W3C

• Demo

Widget: History

Tagline - “Whatever you want it to be“

For MacintoshIt ran files called Widgets

Developers: Arlo Rose, Perry Clarke, and Ed Voas (Windows Version)

Konfabulator Feb 10, 2003

http://www.konfabulator.com/cartoon/partFour.html

Widget Era

Dashcode Widget Yahoo WidgetWindows Gadget

Opera Widget

“Standard” Web technology: HTML, CSS, XML, and JavaScript using browser based rendering engine

2003

2005

2006

2007

2009

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

* World Wide Web Consortium: Organization which develop standards for Web

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

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

Qt Web Runtime

Engine

HTML 5, CSS3, AJAX

TechnologyUI Framework, Nokia SDK, Resources

ToolsD

evice AP

I

Contacts, GPS, Camera, Accelerometer

Widget Engine: Web Runtime

WRT evolved into Common Web Runtime which is renamed as Qt WRT

WRT2005

cWRT2008

Qt WRT2010

Widget Engine: Common Web Runtime

cWRTCommon

Web

Runtime

Widget Engine: ‘Common’ in cWRT

• Widget object• menu object• MenuItem object• Device object

Nokia Device APIs

• Calendar• Camera• Contacts• Filesystem• Etc.

Platform Services APIs (CJSE*)

* Common Java Script Extension (CJSE) 

Widget Engine: ‘Web’ in cWRT

HTML5

CSS 3

JavaScript• Device APIs

Ajax/JSON

Flash

Audio / Video

SVG

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)

API Widget’s Config.xml entry

Contacts API <feature name="nokia://device/contact" />

File System API <feature name="nokia://device/filesystem" />

Media Mgmt API <feature name="nokia://device/media" />

Geolocation API <feature name="nokia://device/geolocation" />

Calendar API <feature name="nokia://device/calendar" />

Messaging(SMS) API <feature name="nokia://device/message" />

Camera API <feature name="nokia://device/camera" />

System Information API <feature name="nokia://device/devicestatus" />

Widget Engine: Runtime in cWRT

Interface to the Device functionality

Functionality URI scheme

Widget’s Config.xml entry

Browser http: <a href=http://testpage.com>test </a>

Messaging sms: <a href="sms:1-555-555-1234“>SMS </a>

Email mailto: <a href="mailto: john@nokia.com">Email</a>

Phone tel: <a href="tel:1-555-555-1234">Call</a>

Widget: Demo

Web Runtime

Technology behind WRT

Widget

Qt Web Runtime

Engine

HTML 5, CSS3, AJAX

TechnologyUI Framework, Nokia SDK, Resources

ToolsD

evice AP

I

Contacts, GPS, Camera, Accelerometer

Technology behind WRT

• HTML5 • CSS 3• JavaScript 1.5 (some features of 1.6)• Cross Domain Ajax• Flash 10 (!)

Widget: Demo

HTML5Web Workers(Hyper threading)

Video/AudioCanvas

Local Storage

Geolocation

@font-face

Form controls

Ability to describe content

contenteditable 

Widget: Demo

CSS3Rounded Corners

Borders with images

Box Shadow

Multiple Background ImagesText Shadow

@Font-Face

Gradients

Opacity

RGBA ColorsAnimation

Device APIs

Widget

Qt Web Runtime

Engine

HTML 5, CSS3, AJAX

TechnologyUI Framework, Nokia SDK, Resources

ToolsD

evice AP

I

Contacts, GPS, Camera, Accelerometer

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

1. Data•Calendar•Contacts•Commlog•Filesystem•System Information

2. Media•Audio Player (new in M6)•Media•Video Player (new in M6)

3. Utility•Camera•Landmarks (new in M6)•Location•Messaging•Sensor•Telephony

Data APIs in MeeGo

Data

1. Data APIs in MeeGo

Calendar Y/NgetList (async) YgetList (sync) YaddEntry YupdateEntry YdeleteEntry YstartEditor Ycancel YsubscribeNotification YcancelNotification YMeeting YTodo YAnniversary YReminder YDayEvent Y

Contacts Y/NgetContactsAsync YgetContactIdsAsync YgetContactIds YgetContactInfo YaddContact YupdateContact YdeleteContacts YaddGroup YdeleteGroups YupdateGroup YaddContactsToGroup YremoveContactsFromGroup YgetGroupsAsync YgetGroupIdsAsync YgetGroupIds YgetGroupInfo Ycancel YstartNotification YstopNotification YstartEditor Y

Commlog Y/NgetList (async) YgetList (sync) Ycancel YdeleteEntry YsetNotification YcancelNotification YMatchCriteria:type Yflag YnofLogs YphoneNumber YcontactName YstartTime YendTime YLogData:logId Ytype Ytime Yduration YphoneNumber Yflag YcontactName Ysummary YLogIterator:next() YhasNext() Yclose() Y

methods

Object -properties

1. Data APIs in MeeGo

Filesystem Y/NcreateDir Yremove Yrename YgetDirContents Ycopy Ymove Ysearch YgetMountPoints YgetDefaultPath YnotifyMountEvents YcancelNofity YopenFile Yclose Yread YreadLine YreadBase64 Ywrite YwriteLine YwriteBase64 Yflush Yseek Ycancel YgetElementInfo YsearchMatchObject Y

System Information Y/NgetChannelList YgetChannel YstartChannel YstopChannel YsetChannel Ycancel YCharging YBatteryLevel YNetwork YSignal NSignalStrength YPhoneLanguage YBluetoothOn YProductType YFirnwareVersion YHomeNetwork YIMEI YDisplayOrientation YCellularNetworkStatus YDeviceInputMethod YCountryName YIMSI YIMEI Y

System Information Y/NSupportedVideoDecoders YWirelessConnSupport YActiveDataConnections NVibrate YDisplayWallpaper YFlipOpen YListDriveInfo YCriticalMemory NClipBoard YPhoneManufacturer YPhoneModel YPlatformName YPhoneColorDepth YDisplayResolution YBacklightState YKeypadLightState NActiveProfile YPublicId YProcessorUtilication YWebRunTimeInfo Y

3. Use Device APIs in Web Widget

filesystemObject = nokia.device.load("filesystem", null); var dataArray = 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;

File System API

Use Data APIs in Web Widget

sysobject = nokia.device.load("sysinfo", null);

Battery Level API

btr = sysobject.getChannel("BatteryLevel");chr = sysobject.getChannel("Charging");

lastLevel = btr.batteryLevel;

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;

System Information

Media APIs in MeeGo

Media

2. Media APIs in MeeGo Media Y/NgetList YaddStreamUri YgetThumbnail YdeleteStreamUri YrefreshMediaDb Ycancel YaddMusicToCollection Yresizeimage Ysize Ydate Ytype Yuri Ytitle Ygenre Ytrack Ycomposer Yalbum Yartist Ysummary Ycopyright Ycomment Yrelease date Ywidth Yheight Ymake N

Media Y/Nmodel YISO speed Yfocal number Yfocal length Yorientation Yx pixel dimention Yy pixel dimention Ybits per pixel Yframe count Ymetering mode Ycolor depth Yoriginal date Ydigitized date Ywhite balance Yflash Yexposure time Yhorizontal resolution Yvertical resolution Yaltitude Ylongitude Ylatitude YCell Id NLocation are code NMobile network code Nheading Ytilt angle Yduration Y

AudioPlayer Y/Nopen Yplay Ypause Yresume Ystop Ygetvolume Ysetvolume Y

Video Player Y/Nopen Yplay Ypause Yresume Ystop Ygetvolume Ysetvolume Y

methods

Object -properties

Use Media APIs in Web Widget

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);

Audio Player API

Utility APIs in MeeGo

Utility

3. Utility APIs in MeeGo

Camera Y/NstartCamera YsupportedSizes Y

Landmarks Y/NaddCategory YupdateCategory YdeleteCategory YgetCategories YaddLandmark YupdateLandmark YdeleteLandmark YgetLandmarks YorganizeLandmarks YimportLandmarks YexportLandmarks Ycancel YstartEditor N

Sensor Y/NgetChannels YgetChannelEvent YstartChannel YstopChannel YsetDesiredUpdateFrequency YgetScaleFactor YAccelerometerAxis YOrientation YRotation YAccelerometerDoubleTapping YProximity YIllumination YMagnetometer YMagneticNorth Y

Telephony Y/NinitiateVoiceCall Y

methods

Object -properties

Location Y/NgetCurrentPosition YwatchPosition YclearWatch YgetLocationUsingMethodName Y

positionOptions:enableHighAccuracy Ytimeout YmaximumAge Y

3. Utility APIs in MeeGo Messaging Y/NstartEditor YgetList Ysend YsetNotifier YcancelNotifier YdeleteMessage YgetEmailAccounts Y

getCurrentEmailAccount Y

setCurrentEmailAccount Ycancel YgetMessage YsetStatus Y

Match Pattern datatype Ysenders Ysubject Ystart time Yend time Yfolder Yid Y

Messaging Y/Nto Ycc Ybody Yunread Ypriority Yvalidity Nattachments Ysortkey Ysort order Y

MessageData:type Yto Ybody Ysubject Ycc Yattachments Ypriority Yvalidity Nbcc YdeliveryReport Y

Messaging Y/NMessageInfo:message Ysender Ytime Yunread Yid Yfolder YcontactID Y

Attachment data:uri YmimeType Ysize Y

Account data:accountId Yaccount Name Y

deleteMessage data:id Ytype Yfolder Y

Iterator:next() YhasNext() Yclose() Yreset() Y

3. Use Utlity APIs in Web Widget

this.so = nokia.device.load("geolocation", null);

Location GPS

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

Qt Web Runtime

Engine

HTML 5, CSS3, AJAX

TechnologyUI Framework, Nokia SDK, Resources

ToolsD

evice AP

I

Contacts, GPS, Camera, Accelerometer

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

• HTML5 https://cwiki.nokia.com/OSRuntimesTeamWiki/Html5CanvasAndOfflineStudy

Thank You

May the Force be With You !

Questions/ CommentsEmail rajesh.lal@nokia.com