Developing Applications with Nokia WRT

Developing
applications with
Nokia WRT
Prashanth Narayanaswamy, Raghava
Chinnapa
Nokia 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
properties
+
HTML
backbonePNG 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 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
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 location
Calculate()// perform specific calculation on the user provided data
CancelNotification() // 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 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
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

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

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

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

Developing Applications with Nokia WRT

More Related Content

What's hot (9)

Similar to Developing Applications with Nokia WRT (20)

Recently uploaded (20)

Developing Applications with Nokia WRT

Editor's Notes