Wang Zhi Ming

Sept 11, 2007

S60 Widget Introduction

Contents

•S60 browser briefing

•S60 widget overview

•S60 widget framework

•S60 widget development

•S60 widget API introduction

S60 browser briefing

S60 browser history

Prior S60 3.0

WAP browser

S60 3.1

2nd half 2006

S60 3.0

1st half 2006

Nokia WAP

browser +Nokia

Web Browser for

S60

Nokia Web

Browser for S60

(WML+HTML)

Nokia Web Browser

for S60 + Web RunTime

S60 3.2

Now

Nokia WAP

browser (WML)

Time

S60 browser history (cont.)

S60 browser architecture

Symbian OS

NokiaUI

features

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

Symbian HTTP framework

Netscapeplug-inAPI(NPL)

WebCoreKHTML

JavaScriptCoreKJS

Browser Control

S60 WebKit

OS adaptations Memory manager

Closed source(S60, Nokia,Symbian)

Already open source

Legend

open sourcedby Nokia

Flexible for plug-ins & extensions

S60 Browser UI Widget Runtime

APIs supportingapplication interworking

S60 browser functionality

• All web browsers perform the same tasks. The order and

how the process is performed is what differentiate

browsers.

• The tasks are:

• Fetchmarkup

• Parsemarkup

• Construct a document tree (nowadays a DOM tree)

• Find external references (images, CSS, javascript) and issue load

requests for them.

• Construct boxes of content to render

• Apply style information to boxes

• Layout the boxes

• Render boxes

• Process user events

S60 browser as a run-time platform

• It is the browser engine, which comprises of some core components such as the XML engine, HTML parser, JavaScript engine, CSS processor, rendering engine etc.

• It has web applications and widgets as client applications

• JavaScript as an application programming language• Scripts typically cannot directly access the file system or the network

• It provides certain access level to the system properties• Traditionally, a browser mainly provides functionality to access data on the Internet, not data on a local storage

• It is the Web Run-Time platform (WRT)• Browser as Development Platform

S60 browser features

• Full HTML desktop-like browsing experience

• Page overview

• Visual History, an easy-to-use back function, showing

miniature views of previous pages

• Dynamic HTML and scripted behavior such as AJAX

applications;

• Extensive support of industry standards including

W3C's HTML, XHTML 1.0, DOM, CSS and SVG-Tiny; and

Netscape style plug-ins such as Flash Lite and audio.

S60 widget overview

Web application

• an application accessed with

the Web browser over the

Internet

• uses standard Web-based

technologies such as

HTML/XHTML, CSS, JavaScript,

DOM etc.

• Typical Web applications are

Webmail, online auction

(eBay), online booking or

Webblogs

S60 widget

•Widget is a standalone Web application

• Runs, feels & acts like a native application

• Local on the handset & distributed like any other application

•Widget at its core is a Web page designed for a specific purpose

• Widgets use same technologies, HTML, CSS, JavaScript, AJAX, as Web pages &

• Developed in days - not months or years

• Development to Deployment in “clicks”

• Types of Widget

• Accessory widgets (clock, calendar …)

• Application widgets (games, address book …)

• Information widgets (weather, stocks …)

Compare with PC widget

• Apple introduced Widgets as part of Mac OS X

• Currently, 2500+ widgets are available for Mac

• Yahoo! has recently entered widget space

• 3600+ widgets available

•Microsoft introduced Gadgets in Vista

• Google Gadgets

• OS & Desktop Independent

• Opera widgets

• Currently, 1160+ widgets are available for Opera

browser 9.x

Compare with PC widget - examples

S60 widget examples

• S60 as the 1st mobile

platform announcing widget

support

• Empowered by the mobile widget engine

• Fully compliant with standard-based Internet technologies

S60 widget advantages

• Bring mobility to internet exerience:

• quick, instant, easy access to information

• Contaxt-aware, location-aware aspects

• Take advantage of mobile device capabilities

• Vast connectivity

• Easy to deploy and share

• managed the same as existing S60 applications

• download and install like applications

• Personalized services and contents

• Easy to get information

• Reduced data flow

Web run-time

• A web application development environment

• Widgets leverage the Web

• use internet services and Web APIs to access information

• use XmlHttpRequest and AJAX techniques

• low effort to port widgets from other platforms

• Widgets integrated into S60 user experience

• display the icon in the Application Menu

• can be assigned to Idle screen soft keys and shortcuts

• appear in the Active Applications list

• managed the same way as existing S60 applications

• Familiar (Un)Installer user experience

• Visible in Application manager

• Enable access to Widget specific APIs (widget, system info, menu)

Web run-time (cont.)

• Widgets leverage the smart phone platform

• combine information from Web with platform services

• improves user experience

• Location, PIM & media… information

• additional UI enhancements and features

S60 widget framework

S60 widget structure

• A Widget is constructed of following files

• HTML (mandatory)

• CSS

• Javascript

• Info.plist (mandatory)

• Resource, e.g. icon

• A widget project is a file-system directory, in

which widget’s component files are stored.

• Widget’s mandatory files and the icon.png (if

included) MUST be located at the root directory

of a widget project.

info.plist

•A manifest file in XML format, containing the property and configuration information of a widget.

<?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>WidgetName</string>

<key>Identifier</key>

<string>com.company.widget.project</string

<key>MainHTML</key>

<string>Main.html</string>

</dict>

</plist>

info.plist (cont.)

info.plist (cont.)

Specify release version of the widget

bundle

OptionalStringVersion

Specify access to the network based resources from the widget

OptionalBooleanAllowNetworkAcc

ess

Specify the name of the main HTML page that points to the widget

RequiredStringMainHTML

Specify unique string identifier for the

widget in reverse domain format

RequiredStringIdentifier

Specify the actual name of the widget listed on the Installed application bar

RequiredStringDisplayName

DescriptionUseTypeName

WRT Supported Properties

icon.png

• PNG image to be used as application icon

• Recommended size 88x88 px

• Default S60 application icon used if icon.png is

missing

HTML, Backbone of a widget

• Defines the structure of

the widget.

• Recommended HTML 4.01

specification.

• Use the <div> (block-

level) element to

construct the widget’s

views.

• Views can be constructed

with static HTML

elements or can be

dynamically created by

JavaScript at runtime.

<html>

<head>

..

</head>

<body id="body">

<div id=‘mainView’>

<span class=‘title’>Front view</span>

</div>

<div id=‘subView1’ class=‘subView’>

<p class=‘title’>Back view</p>

</div>

<div id=‘subView2’ class=‘subView’>

<p class=‘title’>Config view</p>

</div>

</body>

</html>

CSS, Makeup for a widget

• Style and layout

information

• Defines how to display

HTML element: position,

color, background color

etc.

• CSS information can be

embedded in the HTML file

• Or imported from an

external stylesheet

// Class selector to define common style for similar components

.title {

font-size: 26px;

color: blue;}

.subView {display: none

}

// Id selector to define a unique style for a unique component

#mainView {font-size: 16px;

color: red;text-align: center;

}

// class selector to design a pattern style

div.subview div {margin: 10px 0 0 0;

padding: 20px 20px 20px 20px;font-size: 22px;

text-align: left;

color: blue;}

JS, The brain of a widget

• The intelligence of a widget?

• Without JavaScript code, a widget is just a passive Web

page

• JavaScript code can be embedded in the HTML file

within <script> elements

• JavaScript API, Java DOM API, AJAX API

• ECMAScript standard; Extension JavaScript objects

• Core DOM and HTML DOM APIs

• XMLHttpRequest object

• Platform services via Nokia-specific extended

JavaScript API:

• Available only from Widget JavaScript code

JS (cont.)

// define some global variable

var globalVariable = 0;

//

function multiply(xValue, yValue){

return xValue * yValue;

}

// create a new element with DOM function

var newElement = document.createElement(‘div’);

newElement.setAttribute(‘id’, ‘extraView’);

newElement.setAttribute(‘class’, ‘subView’);

// show/hide views

function changeView(activeViewId, hiddenViewId){

var activeView = document.getElementById(activeViewId);

var hiddenView = document.getElementById(hiddenViewId);

activeView.style.display = ‘block’;

hiddenView.style.display = ‘none’;

}

S60 widget development

Some concepts

• RSS (Really Simple Syndication)

• a XML format used to describe and

synchronize contents between web

sites.

• AJAX

(Asynchronous JavaScript and XML)

• XMLHttpRequest

• JavaScript

• XML parsing

• DOM

• Interactive UI

• Bandwidth efficiency

What you need?

• For implementing widget code:

• Text editor or a web IDE

• For debugging a running widget

• Firefox

• firebug

• Greasemonkey

• XmlHttpRequest Bypass Security" script for free

XmlHttpRequest access from local file.

• For testing a widget:

• S60 3rd Edition FP2 SDK emulator

• Beta on Forum Nokia website ☺

• Compatible S60 device with custom SW

• We have a couple with us here…

S60 widget installation package

• Widget installation file format

• Compressed with any ZIP application

• ZIP file contains html, CSS, js, icons, graphics and

the widget info file

• Widget installation file extension

• WidgetName.wgz

• Widget installation MIME type

• x-nokia-widgets

S60 widget installation process

Widget....wgzwgzwgzwgz

Widget MIMErecognizer

Symbian OS system MIMEtype recognizer

WidgetInstaller

S60 SW installerframework

Installed

x-nokia-widgets

Other development issues

• Porting

•Port from web application

•Yahoo widget, Apple

widget, etc.

• Sever side development

• Current status

•Web Run-time Will be

officially available in S60 3rd

Edition, Feature Pack 2

S60 widget API Introduction

Widget object

• Widget object is a built-in

module of the widget engine

• widget or window.widget

• Widget object provides basic

utility functions to

manipulate widget’s

properties

var h = window.screen.height;var w = window.screen.width;if (h < w)widget.setDisplayLanscape();

widget.onhide = pause;function pause(){clearTimeout(timer);

}

• Widget methods• openURL(String:url)

• setPreferenceForKey(String:preference, String:key)

• preferenceForKey(String:key)

• prepareForTransition(String:transitionState)

• performTransition(void)

• setNavigationEnabled(Boolean:flag)

• openApplication(Uid, param)

• setDisplayLandscape(void)

• setDisplayPortrait (void)

•Widget properties

• identifier [readonly, String]

• onshow [assigned callback function]

• onhide [assigned callback function]

• isRotationSupported [readonly, Booloean]

Menu object

• Menu object is an extension from

the widget object

• menu or window.menu

• Menu object provides interfaces to

manipulate the options menu and

softkeys (right and middle keys) of

a widget

var opMenu = window.menu; // ! menu is reserved

{...opMenu.setRightSoftKeyLabel(

‘Back’, toMainView);}

function toMainView(){...opMenu.setRightSoftkeyLabel(‘’, null);}

• Menu methods

• append(MenuItem menuItem)

• remove(MenuItem menuItem)

• replace (MenuItem oldMenuItem,

MenuItem newMenuItem)

• getMenuItemById(Integer:id)

• getMenuItemByName(String:label)

• setRightSoftKeyLabel(String:label,

function:callbackfunction)

• showSoftkeys(void)

• hideSoftkeys(void)

• clear(void)

• Menu properties

• onShow [assigned callback function]

MenuItem object

• MenuItem provides interfaces to create menu items and submenus (cascading) for the options menu

function createMenu{var settings = new MenuItem(

‘Settings’, 10);settings.onSelect = showSettings;window.menu.append(settings);}

function showSettings(id){document.getElementById(

‘setting’).style.display = ‘block’;}

• Menu Item methods• new MenuItem(String:label, Integer:id)• append(MenuItem:childMenuItem)• remove(MenuItem:childMenuItem)• replace(MenuItem:oldMenuItem,

MenuItem:newMenuItem)• setDimmed(Boolean:flag)

• Menu Item properties

• onSelect [assigned callback function]

System Info Service API

• System info service API is a scriptable Netscape

plug-in module

• Subset of system properties accessible

• Memory, network and battery status, etc.

• System info service plug-in module is loaded via an

HTML <embed> element

• <embed type="application/x-systeminfo-

widget" hidden="yes"></embed>

• System info service plug-in module is not loaded in

Browser context

System Info Service API (cont.)

• Power properties

• chargelevel [readonly, int]

• chargerconnected [readonly, int]

• onchargelevel [writeonly, function]

• onchargerconnected [writeonly, function]

• Network properties

• signalbars [readonly, int]

• signalstrength [readonly, int]

• networkname [readonly, string]

• registrationstatus [readonly, int]

• onsignalstrength [assigned callback function]

• onregistrationstatus [assigned callback function]

System Info Service API (cont.)

var sysInfo = null;

function init()

{

// get the handle to the system info object

sysInfo = document.embeds[0];

var battLevel = sysInfo.chargelevel;

sysInfo.onchargelevel = "batteryStatusCallback()";

}

function batteryStatusCallback() {

var battLevel = sysInfo.chargelevel;

}

System Info Service API (cont.)

• Light methods

• lighton(Int:lighttarget, Int:duration, Int:intensity, Int:fadein)

• lightblink(Int:lighttarget, Int:duration, Int:onduration, Int:offduration, Int:intensity)

• lightoff(Int:lighttarget, Int:duration, Int:fadeout)

• Light properties

• lightminintensity [readonly, Int]

• lightmaxintensity [readonly, Int]

• lightdefaultintensity [readonly, Int]

• lightinfiniteduration [readonly, Int]

• lightmaxduration [readonly, Int]

• lightdefaultcycletime [readonly, Int]

• lighttargetprimarydisplayandkeyboard [readonly, Int]

• lighttargetsystem [readonly, Int]

System Info Service API (cont.)

• Vibra methods

• startvibra(Integer:duration, Integer:intensity)

• stopvibra(void)

• Vibra properties

• vibraminintensity [readonly, Integer]

• vibramaxintensity [readonly, Integer]

• vibramaxintensity [readonly, Integer]

• vibrasettings [readonly, Integer]

• Beep methods

• beep(Integer:frequency, Integer:duration)

• Memory properties

• totalram [readonly, Integer]

• freeram [readonly, Integer]

System Info Service API (cont.)

• File system methods

• drivesize(String:drive)

• drivefree(String:drive)

• File system properties

• drivelist [readonly, String]

• Language properties

• language [readonly, String]

references

S60 widget

• S60 widgets

• S60 Web_Run-time

• Getting Started with Nokia Web Widget Development

• Porting Apple Dashboard Widgets to S60

•Web Run-Time API Reference

S60 browsing

• S60 Browser design guide

• http://www.forum.nokia.com/browser

Mobile Web Developers Guide

• http://www.blueflavor.com/blog/mobile/dotmobi_m

obile_web_developers_guide.php

Thank you.