Developing Applications with Nokia WRT

Contents

Introduction – Web Browser & Web Runtime

Nokia Web Runtime (WRT)

WRT Widgets

WRT Widget Packaging and Installation

WRT JS APIs

WRT Widget Development Tools

Web Browser

Web Browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web (Internet)

Allows to browse billions of Web pages out there.

We search, chat, email and collaborate in a browser. And like all of you, in our spare time, we shop, bank, read news and keep in touch with friends - all using a browser.

A few well-known web browsers:

What does web browser do?

Downloads the resources (HTML, JS, CSS, images…)

Parses the HTML document

Layouts and renders the page

Responds to the end user events.

Interprets and processes java-script.

Web Browser for Nokia S60

Web browser for Nokia’s S60 platform is developed by Nokia.

Based on a port of Apple Inc’s Open Source - Webkit rendering engine. ( http://www.webkit.org )

Google Chrome and Safari browsers use the same WebKit engine.

Nokia Web Runtime (WRT)

Nokia WRT is the Webkit based environment enabling widgets to run on an S60 device.

It is an extension to the S60 Webkit based browser that allows instances of the browser to be run as if they are applications.

Widgets are small, focused web applications.

Allows standard web technologies (HTML, JS, CSS etc) used for rapid development.

Browser and WRT

http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Web_Runtime/

Difference b/w Web page vs WRT Widget © 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials Page loaded in Web Browser WRT Widget All web pages need browser app. Each widget is run as independent standalone application. User can enter a particular url (ex : http://www.google.com ) to browser to a page No need to input the URL. Widget is an application. (May contain programmed URLs) Web pages are constructed in Web server and transferred to client side. More data over the network. Widget’s resources located on the handset, only data which is necessarily downloaded from the server side.

27+ Nokia devices launched, announced or upcoming

S60 3 rd edition Feature pack 1 and 2 devices.

E71, E90, N95, N96 …

S60 5 th edition – Touch enabled devices.

5800 Xpress Music, N97…

S60 Web Runtime (WRT) widgets

S60 Web Runtime (WRT) widgets are stand-alone web applications that run on S60 devices.

What’s in a widget? (1/2)

Simple bundle of files

info.plist (mandatory)

[name].html (mandatory)

icon.png

[name].css

[name].js

What’s in a widget? (2/2)

Package as .zip

Rename to .wgz

Install on the device using PC Suite, Over-the-air download or Bluetooth transfer

info.plist – Widget property file

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

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials <?xml version ="1.0" encoding ="UTF-8"?> <plist version ="1.0"> <dict> <key> DisplayName </key> <string> Amazon </string> <key> Identifier </key> <string> com.Amazon.widget.project </string <key> MainHTML </key> <string> Main.html </string> </dict> </plist>

HTML – The backbone of a widget

Defines the structure of the widget.

Recommended HTML 4.01 specification.

Tips:

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 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 – A Makeup for a Widget

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

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

In practice:

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 style

div.subview div {

margin: 10px 0 0 0;

padding: 20px 20px 20px 20px;

font-size: 22px;

text-align: left;

color: blue;

}

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, AJAX API

JavaScript

// 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’;

}

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 in a zip file with .wgz extension

Transfer the .wgz file to the device via

Bluetooth,

MMC,

Download

Copy to file system, or

Installed via PC Suite

On the device, just click on the file to install

Widget APIs Introduction - Widget Object

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

Widget object is a build-in module of the widget engine

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials Usage: widget or window.widget Methods Properties 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 ) identifier [ readonly, String ] onshow [ assigned callback function ] onhide [ assigned callback function ] isRotationSupported [ readonly, Booloean ]

Menu Object

Menu object provides interfaces to manipulate the options menu and Right-SoftKey of a widget

Menu object is an extension from the widget object

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials Usage: menu / window.menu Methods Properties 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 ) onShow [ assigned callback function ]

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>

System Service APIs

Power Information Services

chargelevel [ readonly, int ]

chargerconnected [ readonly, int ]

onchargelevel [ writeonly, function ]

onchargerconnected [ writeonly, function ]

2. Network Information Services

signalbars [ readonly, int ]

networkname [ readonly, string ]

registrationstatus [ readonly, int ]

Onregistrationstatus

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

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 )

System Service APIs - Continued

4. Vibration information and control services

startvibra( Integer:duration, Integer:intensity )

stopvibra( void )

5. Beep tone control services

beep( Integer:frequency, Integer:duration )

6. Memory and file system information services

totalram [ readonly, Integer ]

freeram [ readonly, Integer ]

drivesize( String:drive )

drivefree( String:drive )

7. System language information services

language [ readonly, String ]

Platform Services API

Location

Contacts

Calendar

Media Management

Messaging

Landmarks

Application Manager

System Info

Logging

Sensors

Location

The Location Service API allows widgets to retrieve information about the physical location of a device and to perform calculations based on location information

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials var so = device.getServiceObject( "Service.Location" , "ILocation" ); GetLocation() // retrieves the current location of the device Trace() // Inform consumer if any change in the current location Calculate() // perform specific calculation on the user provided data CancelNotification() // cancel the registered listeners

Contacts

The Contacts Service API allows widgets to access and manage information about contacts. This information can reside in one or more contacts databases stored on a device or in the SIM card database

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials var so = device.getServiceObject( "Service.Contact" , "IDataSource" ); GetList() // retrieves a list of contacts, contact groups, or contacts databases Add/Delete() // Add / Deletes the contacts, contact groups Import/Export() // Import / Export the contact(s) Organize() // associate/dissociates contacts to/from the contact group(s)

Calendar

The Calendar Service API allows widgets to access, create, and manage calendars and calendar entries stored on a device

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials var so = device.getServiceObject( "Service.Calendar" , "IDataSource" ); GetList() // retrieves calendar & calendar entries on the device Add/Delete() // Add/Deletes the calendar & calendar entries Import/Export() // Import/Export calendar entries to file/buffer RequestNotification() // register for any changes in the calendar entries

MediaManagement

The MediaManagement Service API allows widgets to access information (metadata) about the media files stored in the Media Gallery of a device

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials var so = device.getServiceObject( "Service.MediaManagement“ , "IDataSource" ); GetList() // Retrieves information of the media files Cancel() // Cancel the ongoing Async operations

Messaging

The Messaging Service API allows widgets to send, retrieve, and manage messages using the Messaging Center of a device

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials var so = device.getServiceObject( "Service.Messaging" , "IMessaging" ); GetList() // retrieves/query SMS/MMS messages in the device Inbox Send() // Sends SMS/MMS message Register/CancelNotification() // Register/cancel incoming notifications Cancel() // cancel the ongoing Async request ChangeStatus() // change the status of the message(s) like Read/Unread Delete() // Delete the selected message(s)

Landmark

The Landmark Service API allows widgets to access and manage information about landmarks and landmark categories

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials var so = device.getServiceObject( "Service.Landmarks" , "IDatasource" ); New() // create a new empty landmark/category item GetList() // retrieves a list databases / landmarks / landmark categories Add/Delete() // Add / Update / Deletes the landmarks / landmark categories Import/Export() // Import / Export the landmark(s) Organize() // associate/dissociates landmark within the set of landmarks

AppManager

The MediaManagement Service API allows widgets to access and launch the application installed on the device

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials var so = device.getServiceObject( "Service.AppManager“ , "IAppManager" ); GetList() // Retrieves the list of applications and user installed packages LaunchApp() // launch the application based on given the UID LaunchDoc() // launch the application based on the given document or MIME-TYPE Cancel() // Cancel the ongoing Async request

Logging

The Logging Service API allows widgets to add, read, and delete logging events such as call logs, messaging logs

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials var so = device.getServiceObject( "Service.Logging" , "IDataSource" ); GetList() // retrieves list of log entry from call/message database Add/Delete() // Add/Deletes an event (entry) from the event log database RequestNotification() // registers the widget to receive notifications of changes to the event log Cancel() // Cancel the ongoing Async request

What You Need For Development?