Company Confidential

Nicholas FooForum Nokia APACNicholas.foo@nokia.com

Widget Development on the S60 Web Runtime

Contents

• Introduction

• WRT Technology and Architecture

• Widget Framework

• Widget Packaging and Distribution

• WRT APIs

• Platform Services API

• Widget Development

• Other Useful Info/Libraries

• Examples & Hands-on Exercise(s)

Introduction

Web Browser• All web browsers perform the same tasks. The

order and how the process is performed is what differentiate browsers.

• The tasks are:• Fetch markup

• Parse markup

• 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

5

Native C/C++“Web Capable”

WebBrowserWidgets

UI features

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

Netscapeplug-in

API

WebCoreKHTML

(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 Widget Runtime

More information about Webkit: http://www.webkit.org

S60 Web Browser delivers a complete browsing experience…

Page Overview

JavaScript & SSL

RSS & Atom feeds

AJAX and Dynamic HTML

Bookmark icons (“favicons”)

Password manager

What are Widgets?

Widgets are mini-applications, which enables new ways to use internet services• Unique user experience by integrating phone applications and Internet services• Mobile optimized user interface (bring only relevant content and information)• Easily developed and distributed • Enable new business models

Web App vs. Widget

Web App• Running directly under the browser UI -

> each running web app requires one instance of the browser

• Web pages are constructed in Web server and transferred to client side -> More data over the network

• Not suitable to design for working offline

• No distribution channel

• Delivering as a continually updated service

Widget• Running independently from the

browser UI -> light weight in using resource

• Widget’s resources located on the client side, only data is necessarily downloaded from the server side -> Network effects

• Possible to design for working offline

• Can be distributed via numbers of channels

• Delivering as downloadable and installable package

From Web Developer to Mobile Application Developer

WRT WidgetsCustom web-app front-ends

Innovative mashups

…but not just .mobi sites,screen scrapesor snippet views

Full fledged mobile apps

Really simple & quick to develop but a very handy tool

News

Translator

Widgets range from the simple, handy …

Expanding & collapsing lines

Cool transitions & fading effects

… to the rich and collaborative

Rich with graphics, images & effects Rich transition effects

in slideshow mode

Loads photos in the background using AJAX for quick, fast browsing of the album

Search photos with tags

WeatherBug

Photo Album

The wind speed & direction change in real-time. That’s AJAX

12

Widgets Compatible Devices

• Over 25 Nokia devices 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)

WRT Technology and Architecture

Web Run-Time Technology

• Nokia Web Run-Time empowered by the Web Browser for S60 (OSS browser)

• HTML 4.01, XHTML 1.0/1.1

• CSS2, CSS3

• JavaScript 1.3 (standard ECMA-262)

• XMLHttpRequest (AJAX)

• DOM Levels 2 and 3

• Nokia Web Run-Time supports• Widget specific APIs (widget, system info, menu …)

S60 -MC

Weather Bug Yahoo! finance

Widgets Architecture

S60 Widgets

Separate applications on the device (Widgets) accessing

directly online services

Starting with S60 3.2 devices (plus

some 3.1 devices)

UI to access Widgets same as for other S60

applications

Widgets discovery & installation via mobile Web browser

Widgets installation

Starting an installed widget

Step by step screenshots

• Widgets discovery and installation via browser is same as for other applications. Once download is completed, the install process will automatically start

• Once installed, widgets show up as icons in the “Applications” folder

• Click on the icon to start the widget

Widgets discovery & installation via PC Web browser• Widgets can be downloaded using PC web browser from sites distributing them. Once

downloaded the file should have the extension “.wgz” ( e.g. weatherwidget.wgz)• To install the widget on the MC, users should

1. Transfer the .wgz file to phone memory with file transfer utility2. On the mobile, locate the .wgz file and click on it to install3. Installation continue as in previous cases (D! and web browser)

Widgets installation

Starting an installed widget

Continue as in previous cases

Note! if you download a widget from a website using MS IE browser, the browser might change the widget file extension from .wgz to .zip. Solution: rename the file extension to be “.wgz” or use another browser.

Messaging

Location

Audio

ImagingVideo

SystemInfo

PIM • Consumers experience personalized &

context-aware Internet services

• Widgets can now access numerous S60 platform’s applications and services

• Web community, operators, licensees can develop exciting new services & mash-ups

Web Run-Time (Latest Release)

Based on current location, shows weather & mashes partner data

NOTES

Widgets accessing Platform Services

Connects to GPS to find the current location

Shows partner data –movie booking – based on current location

Invite your friend for the movie by sharing details of the movie over SMS

Fetches itinerary, saves to phone’s calendar, and checks flight status online

NOTES

Widgets accessing Platform Services

Fetches itinerary from online

Saves the itinerary to Phone’s Calendar using JavaScript

Users are prompted for granting access to phone’s services & apps

Widget Security (Latest Release)

• Widgets embrace the security model of the browser

• Widgets extend the security model further by giving users the control to allow access to different platform services

• Access granted by users are as per the phone’s policy set by device manufacturer / operators

Web Widget Framework

Widget Component File

• A widget is constructed by a bundle of files.• info.plist (mandatory)• icon.png• [name].html (mandatory)• [name].css• [name].js

• 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 – Property of a Widget

•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>

Mobile Widget – info.plist

Icon.png

• The icon of a widget is an image saved in Portable Network Graphics (.png) format

• The recommended size of the icon is 88x88 pixels

• If the icon.png is omitted from the widget installation package, the widget will appear with a default S60 application icon.

HTML – The 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.

• Useful element’s attributes: “id” and “class”.

HTML Code<html><head>

<style type=‘text/css’>@import ‘widget.css’;</style><script type=‘text/javascript’ src=‘widget.js’ charset=‘utf-8’></script>

</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 – Widget UI/Presentation

• Contains information for controlling the style and layout a widget’s contents

• Defines how to display HTML element: position, color, background color etc.

• CSS information can be embedded in the HTML file

• Use class selector to define common style for widget’s elements

• Use id selector to define style for a particular widget’s element

• Use pseudo-class selector to define style for pattern elements

CSS Code// 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;

}

// Pseudo-class selector to design a pattern stylediv.subview div {margin: 10px 0 0 0;padding: 20px 20px 20px 20px;font-size: 22px;text-align: left;color: blue;

}

CSS and HTML Code

// Id selector to define a unique// style for a unique component#mainView {

color: yellow;font-size: 24px;

}

// Class selector to define common// style for similar components.title {

font-size: 16px;color: red;

}.subView {

display: none}

// Pseudo-class selector to design // a pattern stylediv.subview div {

margin: 10px 0 0 0;padding: 0 0px 0 0px;font-size: 22px;text-align: left;color: red;

}

<html><head><style type=‘text/css’>@import ‘widget.css’;</style>

</head><body id="body" onload="startFunction();"><div id=‘mainView’>

<span class=‘title’>Front view</span></div><div id=‘subView1’ class=‘subView’>

<p class=‘title’>Back view</p><div>Extra information</div>

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

<p class=‘title’>Config view</p><div>Setting information</div></div>

</body></html>

Javascript – The Brain of a Widget

• The intelligence of a widget?• Without JavaScript codes, a widget is just a passive Web page

• JavaScript code can be embedded in the HTML file within <script>elements

• Require some programming skills• Object oriented designs

• JavaScript API, Java DOM API, AJAX API• ECMAScript standard; Extension JavaScript objects

• Core DOM and HTML DOM APIs

• XMLHttpRequest object

JavaScript

// define some global variablevar globalVariable = 0;

function multiply(xValue, yValue){return xValue * yValue;

}

// create a new element with DOM functionvar newElement = document.createElement(‘div’);newElement.setAttribute(‘id’, ‘extraView’);newElement.setAttribute(‘class’, ‘subView’);

// show/hide viewsfunction changeView(activeViewId, hiddenViewId){var activeView = document.getElementById(activeViewId);var hiddenView = document.getElementById(hiddenViewId);activeView.style.display = ‘block’;hiddenView.style.display = ‘none’;

}

Web Widget Packaging

Widget Installation Package

•Widget installation file format• Compressed with any ZIP application

•Widget installation file extension• WidgetName.wgz

•Widget installation MIME type• x-nokia-widgets

Widget Installation

• Package the widget (entire widget directory) into a zip file with .wgz extension

• Transfer the .wgz file to the test device via• Bluetooth,

• MMC,

• OTA download, or

• Copy to file system (via PC Suite)

• On the device, just click on the .wgz file to install

Widget APIs Introduction

Widget Object

• 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)

• properties• identifier [readonly, String]• onshow [assigned callback function]• onhide [assigned callback function]• isRotationSupported [readonly, Booloean]

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

widget.setDisplayLandscape();

widget.onhide = pause;function pause(){

clearTimeout(timer);}

• Widget object is a build-in module of the widget enginewidget or window.widget

• Widget object provides basic utility functions to manipulate widget’s properties

Menu Object

• 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)

• properties• onShow [assigned callback function]

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

{...opMenu.setRightSoftKeyLabel(‘Back’, toMainView);

}

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

}

• Menu object is an extension from the widget objectmenu or window.menu

• Menu object provides interfaces to manipulate the options menu and softkeys(right and middle keys) of a widget

MenuItem Object

• methods• new MenuItem(String:label, Integer:id)• append(MenuItem:childMenuItem)• remove(MenuItem:childMenuItem)• replace(MenuItem:oldMenuItem, MenuItem:newMenuItem)• setDimmed(Boolean:flag)

• properties• onSelect [assigned callback function]

function createMenu{var settings = new MenuItem(‘Settings’, 10);settings.onSelect = showSettings;window.menu.append(settings);

}

function showSettings(id){document.getElementById(‘setting’).style.display =

‘block’;}

• MenuItem is a build-in object of the widget engine

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

Menu and MenuItem

SystemInfo Service API• SystemInfo service API is provided thru a scriptable NetScape plug-in module.

• SystemInfo service object provides interfaces to access to limited system properties such as memory, network strength etc.

• SystemInfo service plug-in module is loaded via an HTML <embed> element<embed type="application/x-systeminfo-widget" hidden="yes"></embed>

• SystemInfo service plug-in module is not loaded in Browser context

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

<script type="text/javascript" src="api.js" /> <body onload="testapi()"> <embed type="application/x-systeminfo-widget"

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

</html>

SystemInfo Service API

• Divided into 7 main categories:1. Power Information Services

2. Network Information Services

3. Device’s display light and keypad illumination information and control services

4. Vibration information and control services

5. Beep tone control services

6. Memory and file system information services

7. System language information services

SystemInfo Service API

• Power properties• chargelevel [readonly, int]• chargerconnected [readonly, int]• onchargelevel [writeonly, function]• onchargerconnected [writeonly, function]

var sysInfo = null;

function init(){// get the handle to the system info objectsysInfo = document.embeds[0];var battLevel = sysInfo.chargelevel;sysInfo.onchargelevel = "batteryStatusCallback()";

}

function batteryStatusCallback() {var battLevel = sysInfo.chargelevel;

}

• Network properties• signalbars [readonly, int]• networkname [readonly, string]• registrationstatus [readonly, int]• onregistrationstatus [assigned callback function]

SystemInfo 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]

SystemInfo 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]

• File system methods• drivesize(String:drive) • drivefree(String:drive)

• File system properties• drivelist [readonly, String]

• Language properties• language [readonly, String]

Platform Services API

First Set of S60 Platform Services

• Location

• Contacts

• Calendar

• Media Management

• Messaging

• Landmarks

• Application Manager

• System Info

• Logging

• Sensors

S60 Platform Services

• Framework for abstracting access to a set of services• Runtime specific bindings and security management

Widgets

Webkit

Platform Binding with

Security

SAPIsJavaScriptCore

JS Binding

For SAPI

Other runtimes

Messaging

Location

Phonebook

MediaManager

WRT

• Device: Entry point to access platform services, can be referenced directly.

JavaScript Extensions for S60 Platform Services support

• ServiceObject: Service object to access platform services, may contain interfaces.

var so = device.getServiceObject("Service.Location", "ILocation");

Key JavaScript Extensions:

•Interface: Interface object to access service API interfaces and keep a list of results.

Var locationInterface = so.ILocation;

•Result: Wrapper for return result for SAPI calls, may contain error code, error message and DeviceLiwIterable.

var result = locationInterface.GetLocation(criteria);

•Iterable: Wrapper for SAPI iterator which iterates list of result data, maps, etc. var iterable = result.ReturnValue;

•Map : Wrapper for SAPI map which encapsulates certain data, may contain nested maps as well.

var map = iterable .getNext();

Several new object types have been added to JavaScript to bind S60 Platform Services to WRT. These extensions are available in WRT but not the S60 Web Browser.

Location

• GetLocation: Retrieve the current location of the user.

• Trace: Inform the consumer of any change in current location.

• CancelNotification: Cancel the registered listeners with the service provider.

• Calculate: Perform specific calculations on user provided data.

var so = device.getServiceObject("Service.Location", "ILocation");

var updateOptions = new Object();updateOptions.PartialUpdates = true;

var criteria = new Object();criteria.LocationInformationClass = “GenericLocationInfo”;criteria.Updateoptions = updateOptions;

var result = so.ILocation.GetLocation(criteria);

Operations for Location service using iLocation interface:

Sample code:

Contacts

• Get List: Query contacts based on the given criteria

• Add/Delete: Add/delete a contact/group

• Import/Export: Import/Export contact(s)

• Organize: Associate/Disassociate contacts to/from a group

var so = device.getServiceObject("Service.Contact", "IDataSource");

var contactdata = {LastName:{Label:last,Value:Smith},FirstName:{Label:first, Value:John}};

var criteria = { Type:"Contact“,Data: contactdata };

var result = so.IDataSource.Add(criteria);

Operations for Contact service with iDataSource interface:

Sample code:

Calendar

• GetList: Retrieve calendars or calendar entries on device

• Add/Delete: Adds/delete a calendar or calendar entry

• Import/Export: Import/export calendar entries from/to a file/buffer

• RequestNotification: Register for notification for changes in calendar

var so = device.getServiceObject("Service.Calendar", "IDataSource");

var startDate = new Date("January 6, 2008 19:05:00");

var endDate = new Date("January 7, 2008 20:05:00");

var criteria = {Type:"CalendarEntry“, Item:{Type:”Meeting”,StartTime:startDate.EndTime:endDate}}

var result = so.IDataSource.Add(criteria);

Sample code:

Operations for Calendar service using IDataSource interface:

Media Management

• GetList: Retrieve information for media files (such as filename, media type, artist, album, etc)

• Cancel: Cancel an ongoing Async request.

var so = device.getServiceObject("Service.MediaManagement", "IDataSource");

var criteria = {Type: 'FileInfo‘,Filter:{FileType:’Sound’},Sort:{key:’FileSize’}};

var result = so.IDataSource.GetList(criteria, callback);

Operations for MediaManagement Service using IDataSource interface:

Sample code:

Messaging

• GetList: Retrieve/query SMS/MMS Messages in device inbox

• Send: Send SMS/MMS Message

• Register/Cancel Notification: Register/cancel incoming msg notifications

• Cancel: Cancel an ongoing Async request

• Change Status: Change status of a message

• Delete: Delete a message

var so = device.getServiceObject("Service.Messaging", "IMessaging"); var criteria = {Type: ‘inbox‘, Filter: {MessageTypeList: {‘SMS‘,’MMS’}}};

var result = so.IDataSource.GetList(criteria, callback);

Sample code:

Operations for Messaging service using IMessaging interface:

Landmarks

• New: Create an empty landmark/category item.

• GetList: Query landmark databases, landmarks or landmark categories

• Add/Delete: Add/Update a landmark, landmark category

• Import/Export: Import/export landmark(s)

•Organise: Associate/Disassociate a landmark category with a set of landmarks

var so = device.getServiceObject("Service.Landmarks", "IDataSource");

var criteria = {Type:'Landmark‘,Sort:{Key:'LandmarkName‘,Order:’Descending’}};

var resultList = so.IDataSource.GetList(criteria);

Sample code:

Operations for Landmarks service using IDataSource interface:

Application Manager

• GetList: Get the list of Applications and User Installed Packages

• LaunchApp: Launch a given application based on UID

• LaunchDoc: Launches the application based on the given document or mime

• Cancel: Cancel an ongoing Async request.

var so = device.getServiceObject("Service.AppManager", "IAppManager");

var criteria = { ApplicationID:"s60uid://0x101f4cce", // uid for contactsOption:{Mode:"Standalone"}};

var result = so.IAppManager.LaunchApp(criteria);

Operations for AppManager Service using IAppManager interface:

Sample code:

System Info

• GetInfo/SetInfo: Read/modify System Attribute Values

• GetNotification: Register a callback function for listening to notifications

• Cancel: Cancel an ongoing Async request.

var so = device.getServiceObject("Service.SysInfo", "ISysInfo");

var criteria = {entity:”General”, key:”VibraActive”};

var result = so.ISysInfo.GetInfo(criteria);

Operations for SysInfo service using iSysInfo interface:

Sample code:

Battery: BatteryStrength, ChargeStatus

Network: SignalStrength, CurrentNetwork, etc.

General: InputLanguage, VibraActive, etc.

Features: BlueTooth, CAMERA, Pen, etc.

Display: Brightness, ScreenSaverTimeout, etc.

Connectivity: BlueTooth, ActiveConnections, etc.

Memory: DriveInfo, CriticalMemory, etc.

Device: PlatformVersion, PhoneModel, IMEI, etc.

Supported features:

Logging

• Add/Delete: Add/delete a log event to/from Event log

• GetList: Get a Log Event or all the log entries from event log

• RequestNotification: Request for changes occurring to Event log

• Cancel: Cancel an ongoing Async request.

var so = device.getServiceObject("Service.Logging", "IDataSource");

var itemMap = new Object();

itemMap.EventType = 3; // ShortMessage event

itemMap.RemoteParty = '16172333568';

itemMap.PhoneNumber = '17819933882';

itemMap.Direction = 1; // outgoing

itemMap.Subject = 'Test txt msg';

itemMap.Description = 'Hi, this is a text message to you';

itemMap.DeliveryStatus = 1; // Sent

var criteria = {Type:'Log‘, Item:itemMap};

var result = so.IDataSource.Add(criteria);

Sample code:

Operations for Logging service using IDataSource service:

•The runtime security manager is policy based, governed by a pair of security policies namely Security Access Policy and Runtime Trust Policy.

•The access policy contains "domain" and "trust" information. Each protection domain defines set of capabilities that are allowed by default (without user being prompted) and granted by user.

•Runtime trust policy defines trust information like origin, certificate chain information etc. In the first implementation, only untrusted domain is supported and all scripts are default to untrusted.

• WRT Security capabilities are effectively mapped to S60 / Symbiansecurity capabilities

Security Management

Security Management -- capabilitiesDomain Capabilities

Application Manager ReadUserData

Calendar WriteUserData

ReadUserData

Location Location

Logging ReadUserData

WriteUserData

SysInfo ReadUserData

Location

Contacts WriteUserData

ReadUserData

Landmarks ReadUserData

WriteUserData

Media Management None

Messaging ReadUserData

WriteUserData

NetworkServices

Security prompts

User being prompted for accessing certain capabilities :

Figure 1. access Positioning data capability for Location service.

S60 Platform Services: JavaScript Implementation Notes

• Lists and Maps used as service arguments and returnvalues

• JavaScript objects

• Object attributes defined in API documentation

• Multiple interfaces can be used at the same time

var so1 = device.getServiceObject(”Service.AppManager”, ”IAppManager”);

var so2 = device.getServiceObject(”Service.SysInfo”, ”ISysInfo”);

S60 Platform Services – JavaScript Implementation Notes

• close() method provided for JS extensionsServiceObject, Interface, Result, Iterator and Map

• Improves memory performance

• Only releases the specific Platform Service middlewareresources not JS resources

var map = result.ReturnValue.getNext();

map.close();

Result objects

• Synchronous calls• ErrorCode• ErrorValue• ReturnValue // iterator for list of service specific response objects

• Asynchronous calls• ErrorCode• ErrorValue• TransactionID // passed by framework to callback function to

identify the request

Asynchronous calls

var result = so.IDataSource.Add(criteria, callback_fn);

…

function callback_fn(transId, eventCode, result)

{

// result object corresponds to synchronous call object

// eventCode specifies the status of the request

// transId is the same as returned in async call result

}

Other Useful Information/Libraries

WRTKit

• UI toolkit for developing a web UI suitable for mobile devices

• Javascript, CSS and graphical elements

• Event triggering and state monitoring

• Easy to create a consistent UI experience

• UI Controls

• Views & UI Manager

• Monitoring Events

• Comes with the Forum Nokia WRT Aptana Plugin (also included in the thumbdrive)

<script type="text/javascript“ src="WRTKit/WRTKit.js"></script>

URI Schemes

• WTAI• Enables call initiation <a href="wtai://wp/mc;+123456789">Call me</a>

• Contacts editor launching. <a href="wtai://wp/ap;+987654321;John Doe">John Doe</a>

• TEL

• Call initiation<a href="wtai://wp/mc;+123456789">Call me</a>

Localization

• Widgets can be localized to a language that is supported on the handset

• http://wiki.forum.nokia.com/index.php/How_to_localise_a_WRT_widget

• Note: Not yet supported on emulator

• Widget Development Kit• Famous cross-web-browser javascript library• Supports popular web browsers:

• Firefox• Safari• IE• Opera• AppleWebKit (from 1.6.0 onwards)

• Nokia S60 Web Browser built on S60WebKit (port of the AppleWebKit)

• Provides utility functions for the following operations:-• Basic Operations (utility functions etc)• String Manipulations• Object Creation• Prototype UI• Form and AJAX (JSON)

Others: Prototype Javascript Library

Backward Compatibility

• To ensure backward compatibility, check that the device object exists before calling the getServiceObject method:

if (device != "undefined")

device.getServiceObject("Service.MediaManagement", “IDataSource");

Web Widget Development

What You Need For Development?

• For implementing widget’s code:• Aptana with Forum Nokia’s Aptana Plugin

Plugin Instructions: http://release.aptana.com/install/nokia1.0/index.html

OR

• Any text editor/IDE that allows you to save the text in ANSI

• For testing a widget:• S60 3.2 SDK emulator (WRT v1.0), OR

• S60 5th Edition SDK emulator (WRT v1.1), OR

• a supporting device

Documentation/Tutorials

• WRT Developer’s Library

(provided on thumbdrive under WRT\Tools\extras\documentation)

S60 3rd Edition Feature Pack 2

Supporting Nokia Devices (WRT v1.0)…

First S60 3rd Ed FP1 devices (specific firmware):

sw 20.0.062.sw 21.0.016 sw 15.0.015

Newer S60 3rd Ed FP1

S60 5th Edition Devices

Supporting Nokia Devices (WRT v1.1)…

Hands On

Tools Installation

• Refer to “WRT Tools Installation” in the WRT folder for instructions on the tools installation

• Tools to install (in the following order):• From folder “WRT\Tools\S60 5th Edition Platform SDK”

1. Java Runtime

2. Perl

3. S60 5th Edition SDK

• From folder “WRT\Tools\Aptana”

4. Aptana Studio, and

5. Forum Nokia’s WRT Plugin for Aptana

(Note: See installation instructions for integration)

Hands-on Exercise(s)• Before we start:

• Copy the entire “WRT\Exercise Files” folder to your local drive (e.g. “C:\Exercise Files”)

• Navigate to the “Exercise Files” folder to check that you have all the following 3 folders:

• gallery

• GalleryWidget

• HelloWorld

Exercise 1: Package, Install & Run a Widget

• Objective: Package, install and run a WRT widget

• Refer to “Widgets Exercise 1 –Packaging and Installing a Widget” for instructions

Exercise 2: Creating a Gallery Widget• Objective: use the

service API to access the device’s gallery and display all the images in the gallery

• Refer to “Widgets Exercise 2 –Gallery Widget”for instructions

Mini Challenge : Extend the Gallery Widget

Some Project Ideas:

1. Resize images before display

2. Add MMS capability

3. Randomize image displayed

BEST 3 (VOTING) WINS PRIZES!! ☺Voting after lunch!!

• S60 5th Edition SDK - emulatorForum Nokia Website (www.forum.nokia.com)> Devices, Docs & Tools

> Tools> Platforms

> S60 Platform> Download All-In-One S60 SDKs

> Download version for: 5th Edition v0.09

• Documents/E-Learning on Forum Nokia WebsiteForum Nokia Website (www.forum.nokia.com)> Devices, Docs and Tools

> Documentation> Web Technologies

• Web Run-Time Code ExamplesForum Nokia Wiki (wiki.forum.nokia.com)

> Code Examples> WRT Widgets (Web Runtime)

Resources