Wang Zhi MingMay. 21, 2008

Web Widget on S60

Contents

• S60 browser introduction• History• Architecture• Functionalities

• Web Widget overview• Introduction• Features• Web-Run-time (WRT)

• How to develop widget• Widget project• Development tools• Other issue..

• references

S60 Browser Introduction

S60 browser history

Prior S60 3.0

WAP browser

S60 3.1

2nd half 2006S60 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.2Now

Nokia WAP browser (WML)

Time

S60 browser history (cont.)

S60 browser architecture

Symbian OS

NokiaUI

features

S60 plug-ins, incl. Flash Lite, SVG, and audio.

Symbian HTTP framework

Netscapeplug-in

API(NPL)

WebCoreKHTML

JavaScriptCore

KJS

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

More information about webkit: http://www.webkit.org

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

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

S60 browser features

• Full HTML desktop-like browsing experience• Page overview and zooming• Visual History, an easy-to-use back function, showing

miniature views of previous pages • Support for DHTML and javascript, e.g. AJAX

application

Web Widget Overview

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

Web widget

• Widget is a standalone Web application• Typically front-end a Web 2.0 service or other

Internet content• 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 …)

Web widget examples

• S60 as the 1st mobile platform announcing widget support

• Empowered by the mobile widget engine

• Fully compliant with standard-based Internet technologies

Web App vs. Widget

Web App• Running directly under the browser

UI -> each running web app requires one instance of the browser

• Web pages are constructed in Web server and transferred to client side -> More data over the network

• Not suitable to design for working offline

• No distribution channel

• Delivering as a continually updated service

Widget• Running independently from the

browser UI -> light weight in using resource

• Widget’s resources located on the client side, only data is necessarily downloaded from the server side -> Network effects

• Possible to design for working offline

• Can be distributed via numbers of channels

• Delivering as downloadable and installable package

Web widget advantages

• Easy to use• quick, instant, easy access to information• Contaxt-aware, location-aware aspects (planned)• Take advantage of mobile device capabilities (planned)

• 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

Web run-time – current status

• 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

Web run-time – next stage

• 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

• Ever evolving development platform• Safely leverage S60 platform services• Access platform services through S60 API• Add safety and signature for widget

More on Web Run-Time: http://www.s60.com/webruntime

Web widget development

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

Web widget structure

• A Widget is constructed of following files• HTML (mandatory)• CSS• Javascript• Info.plist (mandatory)• Resource, e.g. icon, images

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

Development tools

• For implementing widget code:• Text editor or a web IDE

• For debugging a running widget• Firefox

• firebug

• For testing a widget:• S60 3rd Edition FP2 SDK emulator

• Available on Forum Nokia website • Compatible S60 device with custom SW

• E.g., Nokia N95, N95 8G• Remote device access

• http://www.forum.nokia.com/main/technical_services/testing/rda_introduction.html

Get firebug: https://addons.mozilla.org/en-US/firefox/addon/1843

Hello world widget

• Create following files:

Helloworld.html (mandatory)

Helloworld.css

Helloworld.js

Default.png icon.png

info.plist (mandatory)

•Zip these files and rename it to helloworld.wgz

•Test and debug with S60 emulator

• Send to mobile device and install

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>

info.plist (cont.)

info.plist (cont.)

WRT Supported Properties

Name Type Use Description

DisplayName String Required Specify the actual name of the widget listed on the Installed application bar

Identifier String Required Specify unique string identifier for the widget in reverse domain format

MainHTML String Required Specify the name of the main HTML page that points to the widget

AllowNetworkAccess

Boolean Optional Specify access to the network based resources from the widget

Version String Optional Specify release version of the widget bundle

icon.png

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

missing

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>

CSS, Makeup for a widget

• Style and layoutinformation

• 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 stylediv.subview div {

margin: 10px 0 0 0;padding: 20px 20px 20px 20px;font-size: 22px;text-align: left;color: blue;

}

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

JS (cont.)

// define some global variablevar globalVariable = 0;// function multiply(xValue, yValue){

return xValue * yValue;}// create a new element with DOM functionvar newElement = document.createElement(‘div’);newElement.setAttribute(‘id’, ‘extraView’);newElement.setAttribute(‘class’, ‘subView’);

// show/hide viewsfunction changeView(activeViewId, hiddenViewId){

var activeView = document.getElementById(activeViewId);var hiddenView = document.getElementById(hiddenViewId);activeView.style.display = ‘block’;hiddenView.style.display = ‘none’;

}

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

Widget.wgz

Widget MIMErecognizer

Symbian system MIME

type recognizer

WidgetInstaller

S60 SW installerframework

Installed

x-nokia-widgets

other issues

• Porting

•Port from web application

•Yahoo widget, Apple widget, etc.

• Sever side development

• development environment

•Get S60 3rd Edition, FP2 from forum Nokia web site.

http://www.forum.nokia.com/info/sw.nokia.com/id/4a7149a5-95a5-4726-913a-3c6f21eb65a5/S60-SDK-0616-3.0-mr.html

references

Widget discussion board:• put your Questions & Answers here,http://discussion.forum.nokia.com/forum/showthread.ph

p?t=130035 (E.g. Taiwan code camp)• Widget topichttp://discussion.forum.nokia.com/forum/showthread.ph

p?t=115609

More about widget:• http://www.forum.nokia.com/widgets

Widget API Introduction

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

nce, 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]

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)• getMenuItemById(Integer:id)• getMenuItemByName(String:label)• setRightSoftKeyLabel(String:label,

function:callbackfunction)• showSoftkeys(void)• hideSoftkeys(void)• clear(void)

• Menu properties• onShow [assigned callback function]

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]

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

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]

System Info Service API (cont.)

var sysInfo = null;

function init(){// get the handle to the system info objectsysInfo = document.embeds[0];var battLevel = sysInfo.chargelevel;sysInfo.onchargelevel = "batteryStatusCallback()";

}

function batteryStatusCallback() {var battLevel = sysInfo.chargelevel;

}

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]

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]

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]

Thank you.

应用开发入门指南

•成为诺基亚论坛注册会员

•订阅中英文开发伙伴通讯稿

•选择开发平台和技术

•学习开发技术

• 下载开发工具和文档

• 使用中英文多媒体自学资料

• 查询知识库及中英文WiKi中的经验分享

•加速开发进程

• 使用中英文讨论区搜寻已有答案，提出问题

• 使用远程测试服务

•参与中文讨论区、中文WiKi分享经验，赢取手机

诺基亚论坛中文：www.forum.nokia.com.cn英文：www.forum.nokia.com

参见诺基亚论坛中文WiKi中”现在成为移动应用开发者”一文参见诺基亚论坛中文WiKi中”现在成为移动应用开发者”一文