S60 Web Runtime Widgets
description
Transcript of S60 Web Runtime Widgets
S60 Web Runtime Widgets
29 Oct 2008, DTURiku Salminen
MaterialSlides / Code / ToolsOn USB sticks
Todays agenda9.30 - 12.00 What is Forum Nokia What are widgets WRT Widgets dissected Coding session (instructor lead (if we have time ;o)12.00 - 13.00 Lunch13.00 - 16.30 Coding session (instructor lead) WRT 2.0 - Platform services - Extending the widget capabilities 16.30 Closing
WHO’S THE CROWD?
developers?
Othermobile platforms?
designers?
web?
students
Forum Nokia Developer Programs- Forum Nokia – Public information database, trainings, development tools
& more;
- Forum Nokia Champion – Recognition and reward program for the top
mobile developers contributing to the success of the Forum Nokia
Community;
- Forum Nokia Launchpad – Premium membership service that gives
developers early and exclusive access to Forum Nokia resources and
support ;
- Forum Nokia PRO – Invitation-only program for leading-edge companies
doing business in the mobile world;
- Forum Nokia PRO Accelerator - Targets developers of innovative,
industry-changing mobile software and services selected for funding by
top-tier VC firms
Forum Nokia
Bring innovation
Create business opportunitiesfor mobile developers
ToolsSupport channels
Consultancy
TechBusiness Development
MarketingDistribution channels
to Nokia devices, services & software
forum.nokia.com
The LeadingSmartphone Platform
Nokia, Samsung, LGOver 150M devices shipped
Sold by 200+ operators
Build what you want - Use what you know
Only on S60Symbian C++, Open C
Java
Flash
Web Run-TimePython
Open C++
Powerful environments offer experienced developers ways to expand the capabilities of mobile devices and leverage the creativity of open source communities
Easy, creative environments express your design vision and let you create innovative experiences and deliver Internet services
What’s a widget?http://en.wikipedia.org/wiki/Web_widget#Widgets
In 1924 in George S. Kaufman’s play Beggar on Horseback a young composer is engaged to Gladys Cady, the daughter of a wealthy industrialist whose company manufactures widgets. This composer wants to write great music but is forced to crank out jazz tunes to pay the rent.
Mr Cady offers McRae an executive position in his widget factory... providing he gives up all this nonsense about composing music.
The dilemma is obviously tearing the young fragile artist apart and is reflected in surreal and violent dreams…
Web page without a browser UI
10
Native C/C++“Web
Capable”
WebBrowserWidgets
UI features
S60 plug-ins, incl. Flash Lite, SVG, and audio.
Netscapeplug-in
API
WebCore
KHTML
(LGPL+BSD)
JavaScriptCore
KJS
(LGPL)
Browser control API
S60 WebKit
OS adaptations Memory manager
S60 Browser and Web Runtime are based on WebKit
Platform Services Integration
S60 for Web Developers (as of today )
S60 Browser UI Web Runtime
More information about Webkit: http://www.webkit.org
Web Browser for S60 delivers a complete browsing experience…
Page Overview
JavaScript & SSL
RSS & Atom feeds
AJAX and Dynamic
HTML
Bookmark icons
(“favicons”)
Password manager
12
WRT Compatible Devices• 15 Nokia devices
for 2008 launched, announced or upcoming
• N-series multimedia computers, E-series business phones, Several high-end mainstream/ volume devices
• S60 platform licensee devices will support WRT (Samsung, LG)
13
Distribution via Nokia channels
Description
Download! widgets.nokia.mobi
Channels
widgets.nokia.mobi
with your mobile browser
Embedded Download! client on 100+ million devices
MOSH
(Mobilize and Share)
service at mosh.nokia.com
14
Distributed through non Nokia channels
Description
3rd party widget aggregators
Operator Portals
Channels
Operator portal, e.g. Vodafone Betavine, http://widgetvine.mobi/
Aggregator who aggregate & publish widgets, e.g. Plusmo (s60.plusmo.com)
Put on your site and allow users to download and install widgets, e.g. reuters.com/tools/widgets
Your site
Enough talk already!.
Show me How
WRT Widget ingredientsS60 3rd Edition Feature Pack 2
xHTML
CSS JavaScript
AJAX
We deliver the runtime extras(Un)Installers and recognizers
Menus, Softkey handling and more…
WRT Widget Ingredients:
Simple bundle of filesinfo.plist (mandatory)
[name].html (mandatory)
icon.png
[name].css
[name].js
Widget propertie
s+
HTML backbon
ePNG icon
+ CSS
layout+
js logic
Root folder!
Folder structure (recommended)
Info.plist<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd">
<plist version="1.0"><dict><key>DisplayName</key>
<string>Hello DTU!</string><key>Identifier</key>
<string>com.example.myfirstwidget</string><key>Version</key>
<string>1.0</string><key>MainHTML</key>
<string>index.html</string><key>AllowNetworkAccess</key>
<true/></dict></plist>
Index.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“…><html><head><title>Sample Widget</title><meta http-equiv="Content-Type" … ><link href="css/styles.css"/><script … src="javascript/basic.js"></script>
</head><body><!--The playground--><div id="container">
<div id="clickMe" href="#">Click me</div></div><!--The other playground--><div id="console"></div>
</body></html>
Highlights from styles.cssbody {background-color:black;/* The way to make debugging in browser easier */
}#container{width: 240px;height: 320px;…overflow:hidden;
}#clickMe{background-image: url('../img/Button.png');background-repeat: no-repeat;…
#console{background-color:black;…
basic.jswindow.onload = init;
function init(){document.getElementById("clickMe").style.display = "block";document.getElementById("console").style.display = "none";document.getElementById("clickMe").onclick = function()clicked(this); }
}
function clicked(who){var console = document.getElementById("console");var YourName = prompt("Who are you?","")
widget.prepareForTransition("fade");console.innerHTML = "Hello!<br>"+ YourName;console.style.display = "block";who.style.display = "none";
widget.performTransition();}
Set up the Widget when the window loads
Hide the console and make sure the button is visible
Create the onClick event to the button
Handle the OnClick
Lets make it look smooooth ;o)
Ask for name
Hide the button and make console visible
And now fade and oooh...
Packaging and distribution
Zip the files
…rename to .wgz
MIME typex-nokia-widget
Lunctime!
S60 Web Runtime Widgets
29 Oct 2008, DTURiku Salminen
Using Extended devices capabilities
Platform servicesOfficial version
Plugin for get/set access to ’risk-free’ properties
Lights
Power
Network Beep tones
Memory
Vibra
File System
Charger
Language…and fresh out of the oven
S60 5th Edition
gives widgets
superpowers
Messaging
PIM
Audio
System
Imaging
Location
First Set of 5th edition services
• Location
• Contacts
• Calendar
• Media Management
• Messaging
• Landmarks
• Application Manager
• System Info
• Logging
• Sensors
…and the unofficial waysto drill deep into system
resources
Localhost connection•C / C++ / Java / Python server
•Mobile Web Server / PAMP
•PHP or ModPython
http://wiki.forum.nokia.com/index.php/TSS001070_-_Modifying_Web_content_using_a_HTTP_filter
http://wiki.forum.nokia.com/index.php/How_to_utilize_device_resources_from_a_WRT_widget
http://wiki.forum.nokia.com/index.php/How_to_access_S60_resources_from_WRT_or_FlashLite_using_PyS60
SDK support
S60 3rd FP2 SDKDeveloper documentation
Emulator test-bedJavaScript logging
Traffic inspection
S60 5th Edition SDKS60 Platform Services
documentation and emulator support
forum.nokia.com/S60SDK
Help & Support
forum.nokia.com/widgetswiki.forum.nokia.com
CodeDocs
eLearning
DiscussionWebinars
Working with the service object//Initiating the location objectvar serviceObject =device.getServiceObject("Service.Location", "ILocation");
//Synchonyous call example:var criteria = new Object();var result = serviceObject.ILocation.GetLocation(criteria);var latitude = result.ReturnValue.Latitude;var longitude = result.ReturnValue.Longitude;
//Asynchronyous call example:var result = serviceObject.ILocation.GetLocation(criteria, callBack);
function callBack(transId, eventCode, result){//This is executed when the result object is ready}
Now it’s your turnuse the examples to create magic!
Q&A