Nokia S60 3rd FP2 Widgets presentation.

1. S60 Web Widgets
Petro Soininen
29th September 2007

2. Contents
• Web browser and the Web browser as a run-time
platform
• Web applications
• Widgets
• Desktop widgets
• Mobile widgets
• Web application vs. widget
• Web widget development
• Web widget APIs

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

4. Web Browser for S60
APIs supporting
Flexible for plug-ins & application interworking
extensions
S60 Browser UI Widget Runtime
Netscape
Browser Control
S60 plug-ins, incl. Flash plug-in
API
Lite, SVG, and audio. (NPL)
JavaScript
S60 WebCore
Nokia Core
WebKit KHTML
UI KJS
features
OS adaptations Memory manager
Legend
Symbian OS Symbian HTTP framework
open sourced
by Nokia
Already
open source
Design not limited
Closed source to particular OS
(S60, Nokia,
Symbian)

5. Web Browser as a Run-Time Platform
• It is the browser engine, which comprises of some core
components such as the XML engine, HTML parser,
JavaScript engine, CSS processor, rendering engine etc.
• It has web applications and widgets as client
applications
• JavaScript as an application programming language
• Scripts typically cannot directly access the file system or the
network
• It provides certain access level to the system
properties
• Traditionally, a browser mainly provides functionality to
access data on the Internet, not data on a local storage
• It is the Web Run-Time platform (WRT)
• Browser as Development Platform

6. Web Application
• Web application is an
application that is
accessed with the Web
browser over the
Internet
• Web application uses
standard Web-based
technologies such as
HTML/XHTML, CSS,
JavaScript, DOM etc.
• Typical Web
applications are
Webmail, online auction
(eBay), online booking
or blogs

7. Widgets
• Widget is a standalone Web
application
• Runs, feels & acts like a native
application
• Local on the handset & distributed like
any other application
• Not necessarily dependent on network
access Web page without a browser UI
• Updates via server logic modifications
or by redistributing the content to local
device
• Widget at its core is a Web page
designed for a specific purpose
• Widgets use standard web technologies
HTML, CSS, JavaScript, AJAX…
• Rapid development - days - not
months or years
• Development to Deployment in “clicks”

8. Desktop Widgets

9. Mobile Widget
• S60 as the 1st
mobile platform
announcing
widget support
• Empowered by the mobile
widget engine
• Fully compliant with
standard-based Internet
technologies

10. Web Run-Time - Current Goal
• Widgets leverage the Web
• use internet services and Web APIs to access
information
• use XmlHttpRequest and AJAX techniques
• low effort to port widgets from other platforms
• Widgets integrated into S60 user experience
• display the icon in the Application Menu
• can be assigned to Idle screen soft keys and shortcuts
• appear in the Active Applications list
• managed the same way as existing S60 applications
• Familiar (Un)Installer user experience
• Visible in Application manager
• Enable access to Widget specific APIs (widget, system
info, menu)

11. Web Run-Time - Future Goal
• Widgets leverage the smart phone platform
• combine information from Web with platform
services
• improves user experience
• Location, PIM & media… information
• integrate widgets into Active Idle
• additional UI enhancements and features
• Widgets evolve as a development platform
• Integrated safely/securely with S60 platform
services
• access platform services via S60 APIs
• provide security and signing model for widgets

12. Web Widget Framework

13. Widget component structure
• 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.

14. Info.plist – Property of a Widget
•A manifest file in XML format, containing the property and
configuration information of a widget.
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<!DOCTYPE plist PUBLIC quot;-//Nokia//DTD PLIST 1.0//ENquot;
quot;http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtdquot;>
<plist version=quot;1.0quot;>
<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>

15. WRT Supported Properties
Name Type Use Description
String Required Specify the actual name of the widget
DisplayName
listed on the Installed application bar
String Required Specify unique string identifier for the
Identifier
widget in reverse domain format
String Required Specify the name of the main HTML page
MainHTML
that points to the widget
AllowNetworkAccess Boolean Optional Specify access to the network based
resources from the widget
ShortVersionString String Optional Specify release version of the widget
bundle
Number Optional Specify build version of the widget bundle
Version

16. Icon.png
• PNG image to be used as application icon
• Recommended size 88x88 px
• Default S60 application icon used if icon.png is missing

17. …just to clarify (or confuse?)

18. HTML – The Backbone of a Widget
• Defines the structure of the <html>
widget. <head>
..
• Recommended HTML 4.01 </head>
specification. <body id=quot;bodyquot;>
<div id=‘mainView’>
• Use the <div> (block-level) <span class=‘title’>Front view</span>
element to construct the </div>
widget’s views. <div id=‘subView1’ class=‘subView’>
<p class=‘title’>Back view</p>
• Views can be constructed </div>
with static HTML elements or <div id=‘subView2’ class=‘subView’>
can be dynamically created <p class=‘title’>Config view</p>
by JavaScript at runtime. </div>
</body>
</html>

19. CSS – Makeup for a Widget
// Class selector to define common
• Style and layout
style for similar components
.title {
information font-size: 26px;
color: blue;
• Defines how to display }
HTML element: position, .subView {
color, background color display: none
}
etc.
// Id selector to define a unique
style for a unique component
• CSS information can be #mainView {
font-size: 16px;
embedded in the HTML file color: red;
text-align: center;
• Or imported from an external
}
stylesheet
// 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;
}

20. JS – The Brain of a Widget
• The intelligence of a widget?
• Without JavaScript code, a widget is just a passive Web
page
• JavaScript code can be embedded in the HTML file
within <script> elements
• JavaScript API, Java DOM API, AJAX API
• ECMAScript standard; Extension JavaScript objects
• Core DOM and HTML DOM APIs
• XMLHttpRequest object
• Platform services via Nokia-specific extended
JavaScript API:
• Available only from Widget JavaScript code

21. 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’;
}

22. Widget APIs Introduction

23. Widget Object
• Widget methods
• Widget object is a built-in module
of the widget engine • openURL(String:url)
• setPreferenceForKey(String:prefere
widget or window.widget nce, String:key)
• preferenceForKey(String:key)
• Widget object provides basic • prepareForTransition
utility functions to manipulate (String:transitionState)
widget’s properties • performTransition(void)
• setNavigationEnabled(Boolean:flag)
• openApplication(Uid, param)
• setDisplayLandscape(void)
• setDisplayPortrait (void)
• Widget properties
var h = window.screen.height;
var w = window.screen.width;
• identifier [readonly, String]
if (h < w)
• onshow [assigned callback function]
widget.setDisplayLanscape();
• onhide [assigned callback function]
• isRotationSupported [readonly,
Booloean]
widget.onhide = pause;
function pause()
{
clearTimeout(timer);
}

24. Menu Object
• Menu object is an extension • Menu methods
from the widget object • append(MenuItem menuItem)
menu or window.menu • remove(MenuItem menuItem)
• Menu object provides • replace (MenuItem oldMenuItem, MenuItem
interfaces to manipulate the newMenuItem)
options menu and softkeys
(right and middle keys) of a • getMenuItemById(Integer:id)
widget • getMenuItemByName(String:label)
• setRightSoftKeyLabel(String:label,
function:callbackfunction)
• showSoftkeys(void)
var opMenu = window.menu;
// ! menu is reserved
• hideSoftkeys(void)
• clear(void)
{
...
• Menu properties
opMenu.setRightSoftKeyLabel(
‘Back’, toMainView);
• onShow [assigned callback function]
}
function toMainView()
{
...
opMenu.setRightSoftkeyLabel(‘’, null);
}

25. MenuItem Object
• MenuItem provides • Menu Item methods
interfaces to create
• new MenuItem(String:label,
menu items and Integer:id)
submenus • append(MenuItem:childMenuItem)
(cascading) for the
• remove(MenuItem:childMenuItem)
options menu
• replace(MenuItem:oldMenuItem,
MenuItem:newMenuItem)
• setDimmed(Boolean:flag)
• Menu Item 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’;
}

26. System Info Service API
• System info service API is a scriptable Netscape
plug-in module
• Subset of system properties accessible
• Memory, network and battery status, etc.
• System info service plug-in module is loaded via an
HTML <embed> element
<embed type=quot;application/x-systeminfo-widgetquot;
hidden=quot;yesquot;></embed>
• System info service plug-in module is not loaded in
Browser context

27. System Info Service API
• Power properties
• chargelevel [readonly, int]
• chargerconnected [readonly, int]
• onchargelevel [writeonly, function]
• onchargerconnected [writeonly, function]
• Network properties
• signalbars [readonly, int]
• signalstrength [readonly, int]
• networkname [readonly, string]
• registrationstatus [readonly, int]
• onsignalstrength [assigned callback function]
• onregistrationstatus [assigned callback function]

28. System Info Service API
var sysInfo = null;
function init()
{
// get the handle to the system info object
sysInfo = document.embeds[0];
var battLevel = sysInfo.chargelevel;
sysInfo.onchargelevel = quot;batteryStatusCallback()quot;;
}
function batteryStatusCallback() {
var battLevel = sysInfo.chargelevel;
}

29. System Info 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]

30. System Info 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]

31. System Info Service API cont.
• File system methods
• drivesize(String:drive)
• drivefree(String:drive)
• File system properties
• drivelist [readonly, String]
• Language properties
• language [readonly, String]

32. Web Widget Development

33. What You Need?
• For implementing widget code:
• Text editor or a web IDE
• For debugging a running widget
• Firefox
• firebug
• Greasemonkey
• XmlHttpRequest Bypass Securityquot; script for free
XmlHttpRequest access from local file.
• For testing a widget:
• S60 3rd Edition FP2 SDK emulator
• Beta available soon ☺
• Compatible S60 device with custom SW

34. Widget Installation Package
•Widget installation file format
• Compressed with any ZIP application
• ZIP file contains html, CSS, js, icons, graphics and
the widget info file
•Widget installation file extension
• WidgetName.wgz
•Widget installation MIME type
• x-nokia-widgets

35. Widget Installation Process
Widget.wgz x-nokia-widgets
Symbian OS system MIME
Widget MIME
type recognizer
recognizer
S60 SW installer
Widget
framework
Installer
Installed

36. Demo (fingers crossed)

37. Support
Workshops, eLearning
and Developer training
details to be published at forum.nokia.com
Developer documentation
available at S60 3rd FP2 Beta SDK launch

38. Thank you.