s60 widget introduction
DESCRIPTION
TRANSCRIPT
![Page 1: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/1.jpg)
Wang Zhi Ming
Sept 11, 2007
S60 Widget Introduction
![Page 2: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/2.jpg)
Contents
•S60 browser briefing
•S60 widget overview
•S60 widget framework
•S60 widget development
•S60 widget API introduction
![Page 3: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/3.jpg)
S60 browser briefing
![Page 4: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/4.jpg)
S60 browser history
Prior S60 3.0
WAP browser
S60 3.1
2nd half 2006
S60 3.0
1st half 2006
Nokia WAP
browser +Nokia
Web Browser for
S60
Nokia Web
Browser for S60
(WML+HTML)
Nokia Web Browser
for S60 + Web RunTime
S60 3.2
Now
Nokia WAP
browser (WML)
Time
![Page 5: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/5.jpg)
S60 browser history (cont.)
![Page 6: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/6.jpg)
S60 browser architecture
Symbian OS
NokiaUI
features
S60 plug-ins, incl. Flash Lite, SVG, and audio.
Symbian HTTP framework
Netscapeplug-inAPI(NPL)
WebCoreKHTML
JavaScriptCoreKJS
Browser Control
S60 WebKit
OS adaptations Memory manager
Closed source(S60, Nokia,Symbian)
Already open source
Legend
open sourcedby Nokia
Flexible for plug-ins & extensions
S60 Browser UI Widget Runtime
APIs supportingapplication interworking
![Page 7: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/7.jpg)
S60 browser functionality
• All web browsers perform the same tasks. The order and
how the process is performed is what differentiate
browsers.
• The tasks are:
• Fetchmarkup
• Parsemarkup
• 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
![Page 8: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/8.jpg)
S60 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
![Page 9: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/9.jpg)
S60 browser features
• Full HTML desktop-like browsing experience
• Page overview
• Visual History, an easy-to-use back function, showing
miniature views of previous pages
• Dynamic HTML and scripted behavior such as AJAX
applications;
• Extensive support of industry standards including
W3C's HTML, XHTML 1.0, DOM, CSS and SVG-Tiny; and
Netscape style plug-ins such as Flash Lite and audio.
![Page 10: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/10.jpg)
S60 widget overview
![Page 11: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/11.jpg)
Web application
• an application accessed with
the Web browser over the
Internet
• uses standard Web-based
technologies such as
HTML/XHTML, CSS, JavaScript,
DOM etc.
• Typical Web applications are
Webmail, online auction
(eBay), online booking or
Webblogs
![Page 12: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/12.jpg)
S60 widget
•Widget is a standalone Web application
• Runs, feels & acts like a native application
• Local on the handset & distributed like any other application
•Widget at its core is a Web page designed for a specific purpose
• Widgets use same technologies, HTML, CSS, JavaScript, AJAX, as Web pages &
• Developed in days - not months or years
• Development to Deployment in “clicks”
• Types of Widget
• Accessory widgets (clock, calendar …)
• Application widgets (games, address book …)
• Information widgets (weather, stocks …)
![Page 13: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/13.jpg)
Compare with PC widget
• Apple introduced Widgets as part of Mac OS X
• Currently, 2500+ widgets are available for Mac
• Yahoo! has recently entered widget space
• 3600+ widgets available
•Microsoft introduced Gadgets in Vista
• Google Gadgets
• OS & Desktop Independent
• Opera widgets
• Currently, 1160+ widgets are available for Opera
browser 9.x
![Page 14: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/14.jpg)
Compare with PC widget - examples
![Page 15: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/15.jpg)
S60 widget examples
• S60 as the 1st mobile
platform announcing widget
support
• Empowered by the mobile widget engine
• Fully compliant with standard-based Internet technologies
![Page 16: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/16.jpg)
S60 widget advantages
• Bring mobility to internet exerience:
• quick, instant, easy access to information
• Contaxt-aware, location-aware aspects
• Take advantage of mobile device capabilities
• Vast connectivity
• Easy to deploy and share
• managed the same as existing S60 applications
• download and install like applications
• Personalized services and contents
• Easy to get information
• Reduced data flow
![Page 17: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/17.jpg)
Web run-time
• A web application development environment
• 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)
![Page 18: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/18.jpg)
Web run-time (cont.)
• Widgets leverage the smart phone platform
• combine information from Web with platform services
• improves user experience
• Location, PIM & media… information
• additional UI enhancements and features
![Page 19: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/19.jpg)
S60 widget framework
![Page 20: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/20.jpg)
S60 widget structure
• A Widget is constructed of following files
• HTML (mandatory)
• CSS
• Javascript
• Info.plist (mandatory)
• Resource, e.g. icon
• 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.
![Page 21: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/21.jpg)
info.plist
•A manifest file in XML format, containing the property and configuration information of a widget.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd">
<plist version="1.0">
<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>
![Page 22: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/22.jpg)
info.plist (cont.)
![Page 23: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/23.jpg)
info.plist (cont.)
Specify release version of the widget
bundle
OptionalStringVersion
Specify access to the network based resources from the widget
OptionalBooleanAllowNetworkAcc
ess
Specify the name of the main HTML page that points to the widget
RequiredStringMainHTML
Specify unique string identifier for the
widget in reverse domain format
RequiredStringIdentifier
Specify the actual name of the widget listed on the Installed application bar
RequiredStringDisplayName
DescriptionUseTypeName
WRT Supported Properties
![Page 24: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/24.jpg)
icon.png
• PNG image to be used as application icon
• Recommended size 88x88 px
• Default S60 application icon used if icon.png is
missing
![Page 25: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/25.jpg)
HTML, Backbone of a widget
• Defines the structure of
the widget.
• Recommended HTML 4.01
specification.
• 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>
<head>
..
</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>
![Page 26: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/26.jpg)
CSS, Makeup for a widget
• Style and layout
information
• Defines how to display
HTML element: position,
color, background color
etc.
• CSS information can be
embedded in the HTML file
• Or imported from an
external stylesheet
// 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;
}
// 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;}
![Page 27: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/27.jpg)
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
![Page 28: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/28.jpg)
JS (cont.)
// 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’;
}
![Page 29: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/29.jpg)
S60 widget development
![Page 30: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/30.jpg)
Some concepts
• RSS (Really Simple Syndication)
• a XML format used to describe and
synchronize contents between web
sites.
• AJAX
(Asynchronous JavaScript and XML)
• XMLHttpRequest
• JavaScript
• XML parsing
• DOM
• Interactive UI
• Bandwidth efficiency
![Page 31: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/31.jpg)
What you need?
• For implementing widget code:
• Text editor or a web IDE
• For debugging a running widget
• Firefox
• firebug
• Greasemonkey
• XmlHttpRequest Bypass Security" script for free
XmlHttpRequest access from local file.
• For testing a widget:
• S60 3rd Edition FP2 SDK emulator
• Beta on Forum Nokia website ☺
• Compatible S60 device with custom SW
• We have a couple with us here…
![Page 32: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/32.jpg)
S60 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
![Page 33: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/33.jpg)
S60 widget installation process
Widget....wgzwgzwgzwgz
Widget MIMErecognizer
Symbian OS system MIMEtype recognizer
WidgetInstaller
S60 SW installerframework
Installed
x-nokia-widgets
![Page 34: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/34.jpg)
Other development issues
• Porting
•Port from web application
•Yahoo widget, Apple
widget, etc.
• Sever side development
• Current status
•Web Run-time Will be
officially available in S60 3rd
Edition, Feature Pack 2
![Page 35: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/35.jpg)
S60 widget API Introduction
![Page 36: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/36.jpg)
Widget object
• Widget object is a built-in
module of the widget engine
• widget or window.widget
• Widget object provides basic
utility functions to
manipulate widget’s
properties
var h = window.screen.height;var w = window.screen.width;if (h < w)widget.setDisplayLanscape();
widget.onhide = pause;function pause(){clearTimeout(timer);
}
• Widget methods• 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)
•Widget properties
• identifier [readonly, String]
• onshow [assigned callback function]
• onhide [assigned callback function]
• isRotationSupported [readonly, Booloean]
![Page 37: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/37.jpg)
Menu object
• Menu object is an extension from
the widget object
• menu or window.menu
• Menu object provides interfaces to
manipulate the options menu and
softkeys (right and middle keys) of
a widget
var opMenu = window.menu; // ! menu is reserved
{...opMenu.setRightSoftKeyLabel(
‘Back’, toMainView);}
function toMainView(){...opMenu.setRightSoftkeyLabel(‘’, null);}
• Menu methods
• 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)
• Menu properties
• onShow [assigned callback function]
![Page 38: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/38.jpg)
MenuItem object
• MenuItem provides interfaces to create menu items and submenus (cascading) for the options menu
function createMenu{var settings = new MenuItem(
‘Settings’, 10);settings.onSelect = showSettings;window.menu.append(settings);}
function showSettings(id){document.getElementById(
‘setting’).style.display = ‘block’;}
• Menu Item methods• new MenuItem(String:label, Integer:id)• append(MenuItem:childMenuItem)• remove(MenuItem:childMenuItem)• replace(MenuItem:oldMenuItem,
MenuItem:newMenuItem)• setDimmed(Boolean:flag)
• Menu Item properties
• onSelect [assigned callback function]
![Page 39: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/39.jpg)
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="application/x-systeminfo-
widget" hidden="yes"></embed>
• System info service plug-in module is not loaded in
Browser context
![Page 40: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/40.jpg)
System Info Service API (cont.)
• 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]
![Page 41: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/41.jpg)
System Info Service API (cont.)
var sysInfo = null;
function init()
{
// get the handle to the system info object
sysInfo = document.embeds[0];
var battLevel = sysInfo.chargelevel;
sysInfo.onchargelevel = "batteryStatusCallback()";
}
function batteryStatusCallback() {
var battLevel = sysInfo.chargelevel;
}
![Page 42: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/42.jpg)
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]
![Page 43: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/43.jpg)
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]
![Page 44: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/44.jpg)
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]
![Page 45: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/45.jpg)
references
S60 widget
• S60 widgets
• S60 Web_Run-time
• Getting Started with Nokia Web Widget Development
• Porting Apple Dashboard Widgets to S60
•Web Run-Time API Reference
S60 browsing
• S60 Browser design guide
• http://www.forum.nokia.com/browser
Mobile Web Developers Guide
• http://www.blueflavor.com/blog/mobile/dotmobi_m
obile_web_developers_guide.php
![Page 46: S60 Widget Introduction](https://reader034.vdocuments.net/reader034/viewer/2022050808/54b615694a79599c038b4661/html5/thumbnails/46.jpg)
Thank you.