4. Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials4
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
5. What does web browser do?
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials5
⢠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.
6. 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.
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials6
8. 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.
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials8
10. 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.
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials10
11. WRT Compatible handsets
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials11
⢠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âŚ
14. S60 Web Runtime (WRT) widgets
S60 Web Runtime (WRT) widgets are stand-alone web applications
that run on S60 devices.
Š 2009 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials14
15. Whatâs in a widget? (1/2)
⢠Simple bundle of files
⢠info.plist (mandatory)
⢠[name].html (mandatory)
⢠icon.png
⢠[name].css
⢠[name].js
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials15
Widget
properties
+
HTML
backbonePNG icon
+
CSS
layout
+
+js logic
16. Whatâs in a widget? (2/2)
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials16
⢠Package as .zip
⢠Rename to .wgz
⢠Install on the device using PC Suite, Over-the-air download or
Bluetooth transfer
17. 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 / Initials17
<?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>
18. 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.
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials18
20. 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
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials20
21. 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;
}
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials21
22. CSS and HTML Code
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials22
23. 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
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials23
24. 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â;
}
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials24
26. 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
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials26
27. 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
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials27
29. 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 / Initials29
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]
30. 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 / Initials30
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]
32. <embed type="application/x-systeminfo-widgetâ
hidden="yes"> </embed>
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
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials32
33. 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)
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials33
34. 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]
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials34
36. Platform Services API
⢠Location
⢠Contacts
⢠Calendar
⢠Media Management
⢠Messaging
⢠Landmarks
⢠Application Manager
⢠System Info
⢠Logging
⢠Sensors
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials36
37. Location
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials37
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. 38 Š 2005 Nokia V1-Filename.ppt / yyyy-mm-dd / Initials
Local Search â powered with Google Data API +
Yahoo! Maps API
39. Contacts
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials39
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)
40. Calendar
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials40
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
42. MediaManagement
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials42
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
43. Messaging
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials43
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)
44. Landmark
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials44
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
45. AppManager
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials45
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
46. Logging
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials46
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
48. 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
Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials48
49. 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
50. 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
51. Š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
52. Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials52
Register / Login
Go To discussion.forum.nokia.com
53. Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials53
Once logged in,
Scroll down
54. Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials54
Post all your questions in VTU EDUSAT section
Or can directly go to discussion.forum.nokia.com/VTUEDUSAT
55. Š 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials55
Q & A
Web browsers communicate with web servers primarily using HTTP (hyper-text transfer protocol) to fetch webpages.
HTTP allows web browsers to submit information to web servers as well as fetch web pages from them.
Web Pages are located by means of a URL (uniform resource locator), which is treated as an address, beginning with http: for HTTP access.
Whatâs S60 platform?
The S60 Platform (formerly Series 60 User Interface) is a software platform for mobile phones that runs on Symbian OS. S60 is currently amongst the leading smartphone platforms in the world. It is owned by Nokia.
WRT is based on Webkit framework.
Extends S60 browser.
Enables widgets to run on S60 handsets.
Widgets - Similar to any other app installed on a handset.
Only diff is widgets are made of HTML & JS where as other apps or usually implemented using C++ or Java.
Web technology is always relatively simpler!
AJAX â Asyncronous Javascript and XML
Javascript â Client side scripting. Client side computations. DOM can also be manipulated client side.
2 independent widgets performing their specific activities.
Nokia has the broadest product portfolio in the industry, offering products in all major markets, segments and price points and serving different consumer needs with optimized devices. The portfolio is the base of our competitiveness.