S60 Web Runtime

neversinkhurriedMobile - Wireless

Nov 12, 2013 (3 years and 9 months ago)

151 views

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?

developers?

Other

mobile

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 opportunities


for mobile developers

Tools

Support channels

Consultancy

Tech

Business Development

Marketing

Distribution channels

to Nokia devices, services & software

forum.nokia.com

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

Java

Flash

Web Run
-
Time

Python

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”

Web

Browser

Widgets

UI

features

S60 plug
-
ins, incl.
Flash Lite, SVG, and
audio.

Netscape

plug
-
in

API

WebCore


KHTML


(LGPL+BSD)

JavaScript

Core

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/widge
ts



Your site

Enough talk already!.

Show me
How


WRT Widget ingredients

S60 3
rd

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 files

info.plist (mandatory)

[name].html (mandatory)

icon.png

[name].css

[name].js


Widget

properties

+

HTML

backbone

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

window.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

type

x
-
nokia
-
widget

Lunctime!

S60 Web Runtime
Widgets

29 Oct 2008, DTU

Riku Salminen

Using Extended devices capabilities

Platform services

Official 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 5
th

edition services



Location



Contacts



Calendar



Media Management



Messaging



Landmarks



Application Manager



System Info



Logging



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

Docs

eLearning

Discussion

Webinars

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!