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