Transcript Copenhagen 29_10_08 - Mobile Informatics Lab

S60 Web Runtime
Widgets
29 Oct 2008, DTU
Riku Salminen
Material
Slides / Code / Tools
On USB sticks
Todays agenda
9.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 Lunch
13.00 - 16.30
Coding session (instructor lead)
WRT 2.0 - Platform services
- Extending the widget capabilities
16.30 Closing
WHO’S THE CROWD?
students
developers?
designers?
web?
Other
mobile platforms?
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, industrychanging mobile software and services selected for funding by top-tier VC firms
Forum Nokia
Bring innovation
to Nokia devices, services & software
Create business
opportunities
for mobile developers
Tech
Tools Consultancy
Business Development
Support channels
forum.nokia.com
Marketing
Distribution channels
The Leading
Smartphone
Platform
Nokia, Samsung, LG
Over 150M devices shipped
Sold by 200+ operators
Build what you want - Use what you
know
Only on S60
Symbian C++, Open C
Open C++
Java
Web Run-Time
Python
Powerful environments offer
experienced developers ways to
expand the capabilities of mobile
devices and leverage the creativity
of open source communities
Flash
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.
Web page without
a browser UI
S60 for Web Developers (as of today )
S60 Browser and Web Runtime are based on WebKit
Native C/C++
“Web Capable”
Widgets
S60 plug-ins, incl.
Flash Lite, SVG, and
audio.
Platform Services
Integration
Web
Browser
Netscape
plug-in
API
UI
features
Web Runtime
S60 Browser UI
Browser control API
S60
WebKit
WebCore
KHTML
(LGPL+BSD)
OS adaptations
JavaScript
Core
KJS
(LGPL)
Memory manager
More information about Webkit: http://www.webkit.org
10
Web Browser for S60 delivers a
complete browsing experience…
AJAX and
Dynamic HTML
JavaScript &
SSL
Password
manager
RSS & Atom
feeds
Bookmark icons
(“favicons”)
Page Overview
WRT Compatible Devices
•
15 Nokia devices
for 2008 launched,
announced or
upcoming
•
N-series
multimedia
computers, Eseries business
phones, Several
high-end
mainstream/
volume devices
•
S60 platform
licensee devices
will support WRT
12
Distribution via Nokia channels
widgets.nokia.mobi
Download!
Channels
Description
MOSH
widgets.nokia.mobi
(Mobilize and
Share)
with your mobile
browser
service at
mosh.nokia.com
13
Embedded
Download!
client on 100+
million devices
Distributed through non Nokia channels
Your site
Operator
Portals
3rd party widget
aggregators
Channels
Put on your site and
Description allow users to
download and install
widgets, e.g.
reuters.com/tools/widge
ts
14
Operator portal, e.g.
Vodafone Betavine,
http://widgetvine.mobi/
Aggregator who
aggregate &
publish widgets,
e.g. Plusmo
(s60.plusmo.com)
Enough talk already!.
Show me
How
WRT Widget ingredients
S60 3rd Edition Feature Pack 2
xHTML
JavaScript
CSS
AJAX
We deliver the runtime extras
(Un)Installers and recognizers
Menus, Softkey handling and more…
WRT Widget Ingredients:
Simple bundle of files
Widget
properties
info.plist (mandatory)
+
HTML
[name].html (mandatory)
backbone
icon.png
[name].css
[name].js
PNG 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.css
body {
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.js
Set up the Widget when the window loads
window.onload = init;
Hide the console and make sure the button is visible
function init(){
document.getElementById("clickMe").style.display = "block";
document.getElementById("console").style.display
= "none";
Create the onClick event to the button
document.getElementById("clickMe").onclick =
function()clicked(this); }
}
Handle the OnClick
function clicked(who){
var
= document.getElementById("console");
Askconsole
for name
var YourName = prompt("Who are you?","")
Lets make it look smooooth ;o)
widget.prepareForTransition("fade");
console.innerHTML
= "Hello!<br>"+
YourName;
Hide
the button and make
console visible
console.style.display = "block";
= "none";
Andwho.style.display
now fade and oooh...
widget.performTransition();
}
Packaging and distribution
Zip the files
…rename to .wgz
MIME type
x-nokia-widget
Lunctime!
S60 Web Runtime
Widgets
Using Extended devices capabilities
29 Oct 2008, DTU
Riku Salminen
Platform services
Official version
Plugin for get/set access to ’risk-free’ properties
…and fresh out of the oven
S60 5th Edition
gives widgets
superpowers
Memory
Power File System
Lights
Network Vibra
Charger
Beep tones
Language
Messaging
PIM
Audio
System
Imaging
Location
First Set of 5th edition services
• Location
• Landmarks
• Contacts
• Application Manager
• Calendar
• System Info
• Media Management
• Logging
• Messaging
• Sensors
…and the unofficial ways
to 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 SDK
Developer documentation
Emulator test-bed
JavaScript logging
Traffic inspection
S60 5th Edition SDK
S60 Platform Services
documentation and emulator support
forum.nokia.com/S60SDK
Help & Support
forum.nokia.com/widgets
wiki.forum.nokia.com
Code eLearning
Docs Webinars
Discussion
Working with the service object
//Initiating the location object
var 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 turn
use the examples to create magic!