Meego Widget Development using Qt WRT @iRajLal
-
Upload
raj-lal -
Category
Technology
-
view
240 -
download
3
description
Transcript of Meego Widget Development using Qt WRT @iRajLal
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: [email protected]">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