Developing Applications with Nokia WRT

Developing applications with Nokia WRTPrashanth Narayanaswamy, Raghava ChinnapaNokia Web Runtime

© 2009 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials1

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

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:

Internet Explorer Mozilla Firefox Safari Opera Google Chrome

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

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.


WRT Compatible handsets


•27+ Nokia devices launched, announced or upcoming

•S60 3rd edition Feature pack 1 and 2 devices.

•E71, E90, N95, N96 …

•S60 5th edition – Touch enabled devices.

• 5800 Xpress Music, N97…

Widget Architecture


Nokia WRT Widgets


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


Widget propertie

s+

HTML backbon

ePNG icon

+ CSS

layout+

+js logic

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.


<?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;

}


CSS and HTML Code


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 Packaging & Installation


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


Nokia WRT JS APIs


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


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


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 API


WRT 1.0

System Service APIs

1. Power Information Serviceschargelevel [readonly, int]

chargerconnected [readonly, int]

onchargelevel [writeonly, function]

onchargerconnected [writeonly, function]

2. Network Information Servicessignalbars [readonly, int]

networkname [readonly, string]

registrationstatus [readonly, int]

Onregistrationstatus

3. Device’s display light and keypad illumination information and control serviceslighton(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 servicesstartvibra(Integer:duration, Integer:intensity)

stopvibra(void)

5. Beep tone control servicesbeep(Integer:frequency, Integer:duration)

6. Memory and file system information servicestotalram [readonly, Integer]

freeram [readonly, Integer]

drivesize(String:drive)

drivefree(String:drive)

7. System language information serviceslanguage [readonly, String]


Platform Services API


WRT 1.1

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

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

GetLocation() // retrieves the current location of the device

Trace() // Inform consumer if any change in the current locationCalculate()// perform specific calculation on the user provided dataCancelNotification() // cancel the registered listeners

GetLocation() // retrieves the current location of the device

Trace() // Inform consumer if any change in the current locationCalculate()// perform specific calculation on the user provided dataCancelNotification() // cancel the registered listeners

38 © 2005 Nokia V1-Filename.ppt / yyyy-mm-dd / Initials

Local Search – powered with Google Data API + Yahoo! Maps API

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

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 groupsImport/Export()// Import / Export the contact(s)Organize() // associate/dissociates contacts to/from the contact group(s)

GetList() // retrieves a list of contacts, contact groups, or contacts databases

Add/Delete() // Add / Deletes the contacts, contact groupsImport/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

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/bufferRequestNotification() // register for any changes in the calendar entries

GetList() // retrieves calendar & calendar entries on the device

Add/Delete() // Add/Deletes the calendar & calendar entries Import/Export()// Import/Export calendar entries to file/bufferRequestNotification() // register for any changes in the calendar entries

Flight Tracker widget


MediaManagement


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

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

GetList() // Retrieves information of the media files

Cancel() // Cancel the ongoing Async operations

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

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 notificationsCancel() // cancel the ongoing Async request

ChangeStatus() // change the status of the message(s) like Read/UnreadDelete() // Delete the selected message(s)

GetList() // retrieves/query SMS/MMS messages in the device Inbox

Send() // Sends SMS/MMS message Register/CancelNotification()// Register/cancel incoming notificationsCancel() // cancel the ongoing Async request

ChangeStatus() // change the status of the message(s) like Read/UnreadDelete() // Delete the selected message(s)

Landmark


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

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

New() // create a new empty landmark/category itemGetList() // retrieves a list databases / landmarks / landmark categories

Add/Delete() // Add / Update / Deletes the landmarks / landmark categoriesImport/Export()// Import / Export the landmark(s)Organize() // associate/dissociates landmark within the set of landmarks

New() // create a new empty landmark/category itemGetList() // retrieves a list databases / landmarks / landmark categories

Add/Delete() // Add / Update / Deletes the landmarks / landmark categoriesImport/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

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 UIDLaunchDoc() // launch the application based on the given document or MIME-TYPECancel() // Cancel the ongoing Async request

GetList() // Retrieves the list of applications and user installed packages

LaunchApp() // launch the application based on given the UIDLaunchDoc() // launch the application based on the given document or MIME-TYPECancel() // 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

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

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


WRT Tools

What You Need For Development?

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

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

• For testing a widget:• S60 3.2 SDK emulator (WRT v1), or

• S60 5th Edition SDK emulator (WRT v2),

Or

• a supporting device


WRT plug-ins turn web designers into widget developers

• Allow developers to use popular and existing web IDE to develop widgets

• Developers can create, develop, test, preview and deploy WRT widgets to millions of Nokia devices

NOKIA WRT Plug-in Offerings

• Features offered in 1.0: • Supports WRT 1.0 API• Provides Sample templates with WRTKit JavaScript UI Library• Quick Preview, Debug, Validate, Package and Deploy to

Device/emulator• Multiple platform compatible : Windows, Mac

• Features offered in 2.0:• Supports WRT 1.1 API ( SAPI Support )• Home Screen Integration• Code Migration from 1.0 to 2.0• Code Completion for WRT 1.1 API• Console window support for Debugging• Event Triggering for API’s like Messaging, Battery, Memory

©2009 Nokia5151

Useful links

WRT plug-in / Extension info page on Forum.Nokia.com WRT plug-in 2 for Aptana Studio:

www.forum.nokia.com/aptana WRT plug-in for Microsoft Visual Studio:

www.forum.nokia.com/visualstudio WRT Extension for Adobe Dreamweaver:

www.forum.nokia.com/dreamweaver

WRT widgets technology page at Forum.Nokia.com www.forum.nokia.com/widgets


Register / Login

Go To discussion.forum.nokia.com


Once logged in, Scroll down


Post all your questions in VTU EDUSAT section

Or can directly go to discussion.forum.nokia.com/VTUEDUSAT


Q & A

Thank you

Developing Applications with Nokia WRT

Technology

Transcript of Developing Applications with Nokia WRT