Symbian Web Runtime

Valerie Tai (Valerie.Tai@nokia.com) October 2010

What is Nokia doing for developers?

Java

Web Native
Nokia radically focuses its development offering, greatly simplifying life for developers and increasing investment in strategic technology f d l di i i i i h l

Slide 2 s5 removed text from here: CONFIDENTIAL SUBJECT TO NDA

skong, 22/08/2010

| Nokia + Ovi Developer Story | 7

Why web?

Reach more people with your content

Browser 7 on Symbian: WebKit-based, optimized for touch devices

Ovi App Wizard: Turn your web site updates into a mobile application

Widgets on Symbian: Transform your content into personal, relevant experiences

Why web?

Real applications
Install and manage just like any other application Add context to your web content with JavaScript APIs and existing web service APIs Add Flash for multimedia impact

Why web?

Easy to get started

Use the same skills you use to create web pages (HTML, JS, CSS) Develop quickly with professional tools

Why web?

Design freedom
Leverage JS and CSS to create your own styles and UI frameworks Deploy custom templates to support and extend your brand y

Reach millions of Symbian devices today, through Ovi Store

Web Browser
The tasks are:
Fetch markup Parse markup

All web browsers perform the same tasks. The order tasks and how the process is performed is what differentiate browsers.

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

Symbian Webkit
Symbian Browser and Web Runtime are based on WebKit
Native C/C++
Web Capable

Widgets

Symbian plug-ins, incl. Flash Lite, SVG, and audio. di Platform Services Integration

Web Browser Netscape plug-in API

Symbian Browser UI

Widget Runtime

Browser control API

UI features

Symbian WebKit

WebCore
KHTML ( G (LGPL+BSD) S )

JavaScript Core
KJS (LGPL) Memory manager

OS adaptations

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

Web Application
Accessed with the Web browser over the Internet Uses standard Web-based technologies such as HTML/XHTML, CSS JavaScript HTML/XHTML CSS, JavaScript, DOM etc. Typical Web applications are Webmail, online auction (eBay), online booking or web blogs

Web Runtime Applications (Widgets)

Small applications with a specific purpose Interacts with the Web Retrieves and displays relevant information

Web App vs. Widget

Web App Running directly under the browser UI W b pages are constructed i W b Web d 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 Running independently from the browser UI -> light weight in using resource Widgets resources located on the client side, only data is necessarily downloaded from the server side -> Network effects k ff Possible to design for working offline Can be distributed via numbers of channels Delivering as downloadable and g installable package

Widget

Adding Context Addi C t t to Web Content

The web can overload us with information, how do we present consumers with whats most relevant to them in the moment?

Your Mobile Phone as an Information Filter

Platform Services add context to web content

Web Runtime widgets can access Platform Services through JavaScript extensions Combine web-based data with device context to deliver personalised and p relevant services Save critical web-based contacts and events locally to create reliable and dependable reminders y , Available since Symbian OS, S60 5.0 Available in selected Symbian OS, S60 3.2 devices
Nokia 5800 XpressMusic

Location Messaging i Calendar Contacts Media System

Widgets accessing Platform Services

Based on current location, shows weather & mashes partner data

Connects to GPS to find the current location

Shows partner data movie booking based on current location

Invite your friend for the movie by sharing details of the movie over SMS

NOTES

Symbian Web Runtime Technology

Symbian Web Run-Time Technology

HTML 4.01, XHTML 1.0/1.1 , CSS2, CSS3 JavaScript 1.5 (standard ECMA-262) XMLHttpRequest (AJAX) DOM Levels 2 and 3

Symbian Web Run-Time Versions and Device Support

Symbian Release (Device) S60 3rd Edition, Feature Pack 1
d Edition, F S60 3rd Editi Feature t Pack 2

Web Runtime Version 1.0 1.0 or 7.2

Platform Services Version No Platform Services Platform Services 1.0 Platform Services 1.0 (Platform Services 2.0*) Platform Services 1.0 Platform Services 2.0

S60 5th Edition Symbian^3 bi

1.1 or 7.2 7.2

* Selected devices and firmware versions

Widget Component Files

A widget is constructed by a bundle of files.
info.plist (mandatory) icon.png icon png [name].html (mandatory) [name].css [name].js [name] js

A widget project is a file-system directory in which widgets file system directory, widget s component files are stored. Widgets mandatory files and the icon.png (if included) MUST be icon png located at the root directory of a widget project.

Info.plist Property of a Widget

The Manifest File is an XML file that describes the widget to the Web Runtime on the S60 Device
DisplayName The name displayed in the S60 Application Menu Identifier a unique string identifier in the form of a reverse internet domain Version - a version string MainHTML main html file used in the widget AllowNetworkAccess set to allow the widget to access the network.

Icon.png
The icon of a widget is an image saved in Portable Network Graphics (.png) format ( png) The recommended size of the icon is 88x88 pixels If the i h icon.png i omitted f is i d from the h widget installation package, the widget will appear with a default S60 application icon, or empty

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

Deployment

Platform Services

Platform Services 2.0: Whats New

Si Simplified API with enhancements t most i t f lifi d ith h t to t interfaces
New APIs for manipulating landmarks Improved APIs for using log info p g g New APIs to manipulate contact groups Improved APIs for using sensor data
Location Messaging Calendar Contacts Media

Forward compatibility with future implementations of Platform Services Device Support: N97 (v20.0.019), N97 mini (v10.0.020), with full support on other devices expected by firmware updates. http://www.forum.nokia.com/Library/Tools_and_downloads /Other/Nokia_Platform_Services/

System Camera Sensors Logging

I want to know whats what s relevant for me Here and Now!

Access to Location

Location API
Allows you to retrieve and monitor the phone s physical phones location using methods supported by the device (e.g. A-GPS, Cell-based) , ) The geolocation object provides the following methods:
getCurrentPosition getPositionUsingMethodName watchPosition clearWatch

Allow the Web to sense your environment environment.

Access to Device Sensors i

Sensors API
Allows a direct channel to information from the hardware sensor. Compass, proximity, Compass proximity accelerometer, illumination, orientation, etc. These are some of the supported channels : pp
AccelerometerAxis (Continuous) AccelerometerDoubleTapping (State) Illumination (State) MagneticNorth (Continuous) Magnetometer (Continuous) Orientation (State) Proximity (State) Rotation (Continuous)

Sensors API - Demo

Wouldn t Wouldnt it be nice if my device would let me know what my friends are up to and recommended things to do?

Access to PIM Data

PIM APIs
Allows access to Personal Information Data Calendar, contacts, Calendar contacts messaging Using 3 objects (calendar, contacts, messaging) these are some of the things we can do:
Add and read calendar events Register for incoming messages Read and create contacts

Calendar
Accessing, creating, and managing calendar entries g, g, g g
addEntry: adds a new entry in the default calendar updateEntry: adds a new entry in the default calendar deleteEntry: deletes an entry in the default calendar startEditor: launches the devices native calendar editor cancel: cancels an ongoing asynchronous call var so = nokia.device.load(calendar"); var dt = new Date(); dt.setUTCMonth(2,17); // month and day specified dt.setUTC dt.setUTCHours(6,00); // 11:30 AM Blr time in UTC/GMT stTime = dt; dt.setUTCMonth(2,17); // month and day specified dt.setUTCHours(7,00); // 12:30 PM Blr time in UTC/GMT endTime = dt; var meetingTime = {begin:stTime, end:endTime}; var return = so.addEntry(meetingEntry);

getList: retrieves a list of calendar entries and instances from the default calendar

Contacts (1/2)
Access and manage info about contacts on default device contacts DB
getContacts: retrieves a list of contacts

getGroups: retrieves a list of contact groups

addContact: adds a new contact updateContact: modifies an existing contact

cancel: cancels an ongoing asynchronous call

deleteContacts: deletes one or more existing contact addGroup: adds a new contact group updateContact: modifies an existing contact group deleteGroups: deletes one or more existing contact groups getContactInfo: retrieves details of a single contact getGroupInfo: retrieves details of a single contact group getGroupIds: retrieves a list of contact group IDs addContactsToGroup: adds one or more contacts to a contact group removeContactsFromGroup: removes one or more contacts f C G from a contact group startEditor: launches the devices native contacts editor

Contacts (2/2)
Access and manage i f about contacts on d f l d i contacts DB d info b default device
var so = nokia.device.load("contacts"); var contact = { name: { first: John; last: Smith; } ); var contactId = so.addContact(contact); contact = so.getContactInfo(contactId); alert(First Name: + contact.name.first); alert(Last Name: + contact.name.last); l t(L t N t t l t)

Messaging
Send, retrieve, and manage messages using the Message Store d i d i h startEditor: launches the devices native message editor with pre-populated message data
getList: retrieves a list of messaging objects from the Message Store send: sends an sms/mms message setNotifier: registers the widget to receive notifications of new incoming messages cancelNotifier: cancels notification of new incoming messages getMessage: retrieves a single message from the Message Store. Store deleteMessage: deletes a single message from the Message Store. setStatus: sets status of the message as read/unread cancel: cancels an ongoing asynchronous call var so = nokia.device.load(messaging"); var messageinfo = so.getMessage(messageid); var sender = messageinfo.sender; var messagedata = messageinfo.message; var type = messagedata.type; var message = messagedata.body;

Tools, Testing and Documentation D t ti

Getting Started: Web Development Landing Page

http://www.forum.nokia.com/Develop/Web/

Familiar tools turn web designers into widget developers p

Develop web widgets using existing popular development tools
WRT plug-in 2 0 for Aptana Studio 2.0 WRT Extension for Adobe Dreamweaver WRT plug-in for Microsoft Visual Studio

Create develop, test preview and Create, develop test, deploy WRT widgets for millions of Nokia devices
Easy transition from web design to widget development Opportunity for designers and developers to collaborate on the same p j projects

WRT plug-ins and extension

Widgets

Nokia Web SDK Technology Preview

http://www.forum.nokia.com/Develop/Web/9hy25fa/
The Web Developer Environment, which enables you to create, code, debug, validate, package, and deploy apps. The Web SDK Simulator, which accurately previews your apps, enabling testing and debugging debugging. The Web Developer Channel, which delivers resources to make app development faster and more productive.

Nokia Web SDK Technology Preview

http://www.forum.nokia.com/Develop/Web/9hy25fa/
The Web Developer Environment, which enables you to create, code, debug, validate, package, and deploy apps. The Web SDK Simulator, which accurately previews your apps, enabling testing and debugging debugging. The Web Developer Channel, which delivers resources to make app development faster and more productive.

Testing: Remote Device Access Services

1. 1 Remote Device Access by Forum Nokia 2. Forum Nokia Virtual Developer Lab (powered by DeviceAnywhere)

http://www.forum.nokia.com/Devices/Remote_device_access/ h // f ki / i / d i /

Remote Device Access Service

Documentation
http://www.forum.nokia.com/Develop/Web/Documentation/

Web Developers Library: API Documentation

http://www.forum.nokia.com/Develop/Web/ > Web Developers Library

Forum Nokia Wiki Tutorials/Articles/Samples

http://wiki.forum.nokia.com > Web Runtime

Web Runtime available on over 30 Symbian models

Over 30 Symbian devices launched, announced or upcoming Broad-based Device Support on Symbian OS, S60 3.2 and 5.0 devices Latest Firmware Upgrade on S bi OS S60 3.1 devices Symbian OS, 31d i

Hands-On Exercise

Hands-On Example: Qype

Getting familiar with the Web SDK Learn how to use Device APIs All using standard HTML/CSS/Javascript technology!

Lab Workflow
Tutorial documentation integrated into the SDK

Snippets Adding them into the example

Check Snippet description Open correct file Look for the placeholder in the file and highlight it

Then double click on the double-click snippet to add the snippet code into the file (replacing the placeholder)

Using the Simulator for Preview

Right-click on the application name in the Project Explorer Select Preview Web App This will load the application in the simulator

Simulator Settings
Change your device settings to emulate a Symbian^3 device Click on Device Settings Ch Choose: Symbian WRT 1.1 360x640 Touch

Start on the Exercise!

Click to page 6/15 of the Hands on Lab Just follow the instructions!

Now its time to start turning ideas into software Lets make the internet personal and mobile

Thank you!

Let us know when you write something impressive

Valerie Tai Valerie.Tai@nokia.com