59
Symbian Web Runtime Valerie Tai ([email protected]) October 2010

Symbian Web Runtime

Embed Size (px)

Citation preview

Page 1: Symbian Web Runtime

Symbian Web Runtime

Valerie Tai ([email protected])October 2010

Page 2: Symbian Web Runtime

What is Nokia doing for developers?

Java

Web

Native

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

Page 3: Symbian Web Runtime

Slide 2

s5 removed text from here: CONFIDENTIAL – SUBJECT TO NDA | Nokia + Ovi Developer Story | 7skong, 22/08/2010

Page 4: Symbian Web Runtime

Why web? Reach more people with your content

Ovi App Wizard:

Turn your web site updates into a mobile application

Widgets on Symbian:

Transform your content into personal, relevant experiences

Browser 7 on Symbian:

WebKit-based, optimized for touch devices

Page 5: Symbian Web Runtime

Why web?

Real applicationsReal applications• Install and manage just like any other

applicationapplication• Add context to your web content with

JavaScript APIs and existing web service APIsJavaScript APIs and existing web service APIs• Add Flash for multimedia impact

Page 6: Symbian Web Runtime

Why web?

Easy to get startedEasy to get started• Use the same skills you use to create web pages

(HTML, JS, CSS)(HTML, JS, CSS)• Develop quickly with professional tools

Page 7: Symbian Web Runtime

Why web?

Design freedomDesign freedom• Leverage JS and CSS to create your own

styles and UI frameworksstyles and UI frameworks• Deploy custom templates to support and

extend your brandy

Page 8: Symbian Web Runtime

Reach millions of Symbian devices today, through Ovi Store

Page 9: Symbian Web Runtime

Web Browser• All web browsers perform the same tasks The order• 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)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 10: Symbian Web Runtime

Symbian Webkit

Symbian Browser and Web Runtime are based on WebKit

Native C/C++“Web Capable”

WebBrowserWidgets

Symbian plug-ins, incl. Flash Lite, SVG, and

di

Netscapeplug-in

APIBrowser control API

Symbian Browser UI Widget Runtime

UI features

audio. API

WebCoreKHTML

(LGPL+BSD)

JavaScriptCore

KJS

(LGPL)

SymbianWebKit

Platform Services Integration

( G S ) (LGPL)

OS adaptations Memory manager

9

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

Page 11: Symbian Web Runtime

Web Application

• Accessed with the Web browser over the Internet

• Uses standard Web-based technologies such as HTML/XHTML CSS JavaScriptHTML/XHTML, CSS, JavaScript, DOM etc.

• Typical Web applications are• Typical Web applications are Webmail, online auction (eBay), online booking or web blogs

Page 12: Symbian Web Runtime

Web Runtime Applications (Widgets)

• Small applications with a specific purpose

• Interacts with the Web

• Retrieves and displays relevant informationrelevant information

Page 13: Symbian Web Runtime

Web App vs. WidgetWeb App WidgetWeb App

• Running directly under the browser UI

W b d i W b

Widget• Running independently from the

browser UI -> light weight in using resource

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

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

k ff• Not suitable to design for working

offline

Network effects

• Possible to design for working offline

• No distribution channel

• Delivering as a continually updated

• Can be distributed via numbers of channels

• Delivering as downloadable and • Delivering as a continually updated service

ginstallable package

Page 14: Symbian Web Runtime

Addi C t t Adding Context to Web Contentto Web Content

Page 15: Symbian Web Runtime

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

Page 16: Symbian Web Runtime

Your Mobile Phone as an Information Filter

Page 17: Symbian Web Runtime

Platform Services add context to web content• Web Runtime widgets can access

Platform Services through JavaScript extensions i

Location

extensions• Combine web-based data with device

context to deliver personalised and

Messaging

Calendar

Contactsprelevant services

• Save critical web-based contacts and events locally to create reliable and System

Media

Contacts

events locally to create reliable and dependable reminders

• Available since Symbian OS, S60 5.0

System

y ,• Available in selected Symbian OS, S60 3.2

devices

Nokia 5800 XpressMusic

Page 18: Symbian Web Runtime

Widgets accessing Platform Services

Based on current location, shows weather & mashesshows 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 SMSthe movie over SMS

NOTES

Page 19: Symbian Web Runtime

Symbian Web Runtime Symbian Web Runtime Technology

Page 20: Symbian Web Runtime

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

Page 21: Symbian Web Runtime

Symbian Web Run-Time Versions and Device Support

Symbian Release (Device) Web Runtime Version Platform Services Version

Support

S60 3rd Edition, Feature Pack 1 1.0 No Platform Services

S60 3 d Editi F tS60 3rd Edition, Feature Pack 2 1.0 or 7.2 Platform Services 1.0

S60 5th Edition 1.1 or 7.2 Platform Services 1.0(Platform Services 2.0*)

bi Platform Services 1.0Symbian^3 7.2 Platform Services 1.0Platform Services 2.0

* Selected devices and firmware versions

Page 22: Symbian Web Runtime

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 widget’s• 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• Widget’s mandatory files and the icon.png (if included) MUST be located at the root directory of a widget project.

Page 23: Symbian Web Runtime

Info.plist – Property of a Widget• The Manifest File is an XML file that

describes the widget to the Web Runtime on the S60 DeviceRuntime on the S60 Device

• DisplayName – The name displayed in the S60 Application Menu

• Identifier a unique string identifier• Identifier – a unique string identifier in the form of a reverse internet domain

• Version - a version string• Version - a version string• MainHTML – main html file used in

the widgetAllowNetworkAccess set to allow• AllowNetworkAccess – set to allow the widget to access the network.

Page 24: Symbian Web Runtime

Icon.png• The icon of a widget is an image

saved in Portable Network Graphics ( png) formatGraphics (.png) format

• The recommended size of the icon is 88x88 pixels

If h i i i d f h• If the icon.png is omitted from the widget installation package, the widget will appear with a default S60 application icon, or empty

Page 25: Symbian Web Runtime

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

Page 26: Symbian Web Runtime

Deployment

Page 27: Symbian Web Runtime

Platform ServicesPlatform Services

Page 28: Symbian Web Runtime

Platform Services 2.0: What’s NewSi lifi d API ith h t t t i t f• Simplified API with enhancements to most interfaces

• New APIs for manipulating landmarks• Improved APIs for using log info

Messaging

Location

p g g• New APIs to manipulate contact groups• Improved APIs for using sensor data

Calendar

Contacts

• Forward compatibility with future implementations of Platform Services

System

Media

Camera• Device Support: N97 (v20.0.019), N97 mini (v10.0.020), with full support on other devices expected by firmware updates.

Camera

Sensors

LoggingLogging

http://www.forum.nokia.com/Library/Tools_and_downloads/Other/Nokia_Platform_Services/

Page 29: Symbian Web Runtime

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

Access to LocationAccess to Location

Page 30: Symbian Web Runtime

Location API

Allows you to retrieve and monitor the phone’s physical

The geolocation object provides the followingmonitor the phone s physical

location using methods supported by the device (e.g. A-GPS, Cell-based)

provides the following methods:

, )• getCurrentPosition

• getPositionUsingMethodName

• watchPosition

• clearWatch

Page 31: Symbian Web Runtime

Allow the Web to sense your environmentAllow the Web to sense your environment.

iAccess to Device Sensors

Page 32: Symbian Web Runtime

Sensors API

Allows a direct channel to information from the

These are some of the supported channels :

hardware sensor.

Compass proximity

pp

• AccelerometerAxis (Continuous)

• AccelerometerDoubleTapping (State)Compass, proximity, accelerometer, illumination, orientation, etc.

• Illumination (State)

• MagneticNorth (Continuous)

• Magnetometer (Continuous)

• Orientation (State)

• Proximity (State)

• Rotation (Continuous)

Page 33: Symbian Web Runtime

Sensors API - Demo

Page 34: Symbian Web Runtime

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

Access to PIM Data

Page 35: Symbian Web Runtime

PIM APIs

Allows access to Personal

Using 3 objects (calendar, contacts, messaging) these are

Information Data

Calendar contacts

messaging) these are some of the things we can do:

Calendar, contacts, messaging • Add and read calendar events

• Register for incoming messages

Read and create contacts• Read and create contacts

Page 36: Symbian Web Runtime

CalendarAccessing, creating, and managing calendar entries• getList: retrieves a list of calendar entries and instances from the default calendar• 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

g, g, g g

• deleteEntry: deletes an entry in the default calendar • startEditor: launches the device’s 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 specifieddt.setUTC dt.setUTCHours(6,00); // 11:30 AM Blr time in UTC/GMTstTime = dt;dt.setUTCMonth(2,17); // month and day specifieddt.setUTCHours(7,00); // 12:30 PM Blr time in UTC/GMT endTime = dt; var meetingTime = {begin:stTime, end:endTime}; var return = so.addEntry(meetingEntry);

Page 37: Symbian Web Runtime

Contacts (1/2)Access and manage info about contacts on default device contacts DBAccess 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

• 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

C G f• removeContactsFromGroup: removes one or more contacts from a contact group

• startEditor: launches the device’s native contacts editor•cancel: cancels an ongoing asynchronous call

Page 38: Symbian Web Runtime

Contacts (2/2)d i f b d f l d iAccess and manage info about contacts on default device contacts DB

var so = nokia.device.load("contacts"); var contact = {

name: {name: {first: “John”;last: “Smith”;

}););var contactId = so.addContact(contact);contact = so.getContactInfo(contactId);alert(“First Name: ” + contact.name.first);

l t(“L t N ” t t l t)alert(“Last Name: ” + contact.name.last);

Page 39: Symbian Web Runtime

Messagingd i d i hSend, retrieve, and manage messages using the Message Store

• startEditor: launches the device’s 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• getMessage: retrieves a single message from the Message 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;

Page 40: Symbian Web Runtime

Tools, Testing Tools, Testing and

D t tiDocumentation

Page 41: Symbian Web Runtime

Getting Started: Web Development Landing Pagehttp://www.forum.nokia.com/Develop/Web/

Page 42: Symbian Web Runtime

Familiar tools turn web designers into widget developersp

• Develop web widgets using existing popular development tools

• WRT plug-in 2 0 for Aptana Studio• WRT plug-in 2.0 for Aptana Studio

• WRT Extension for Adobe Dreamweaver

• WRT plug-in for Microsoft Visual Studio

• Create develop test preview and• Create, develop, test, preview and 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 projects WRT plug-ins andp j WRT plug-ins and

extension Widgets

Page 43: Symbian Web Runtime

Nokia Web SDK Technology Previewhttp://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 debuggingtesting and debugging.

The Web Developer Channel, which delivers resources to make appdelivers resources to make app development faster and more productive.

Page 44: Symbian Web Runtime

Nokia Web SDK Technology Previewhttp://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 debuggingtesting and debugging.

The Web Developer Channel, which delivers resources to make appdelivers resources to make app development faster and more productive.

Page 45: Symbian Web Runtime

Testing: Remote Device Access Services1 Remote Device Access by Forum Nokia1. Remote Device Access by Forum Nokia2. Forum Nokia Virtual Developer Lab (powered by DeviceAnywhere)

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

Page 46: Symbian Web Runtime

Remote Device Access Service

Page 47: Symbian Web Runtime

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

Page 48: Symbian Web Runtime

Web Developer’s Library: API Documentation

http://www.forum.nokia.com/Develop/Web/ > Web Developer’s Library

Page 49: Symbian Web Runtime

Forum Nokia Wiki – Tutorials/Articles/Sampleshttp://wiki.forum.nokia.com > Web Runtime

Page 50: Symbian Web Runtime

Web Runtime available on over 30 Symbian models

Over 30 Symbian devices launched, announced or upcoming

Broad-based Device SupportBroad-based Device Supporton Symbian OS, S60 3.2 and 5.0 devices

Latest Firmware UpgradeS bi OS S60 3 1 d ion Symbian OS, S60 3.1 devices

Page 51: Symbian Web Runtime

Hands-On Exercise

Page 52: Symbian Web Runtime

Hands-On Example: Qype

• Getting familiar with the Web SDK

• Learn how to use Device APIs

• All using standard HTML/CSS/Javascripttechnology!technology!

Page 53: Symbian Web Runtime

Lab Workflow• Tutorial documentation

integrated into the SDK

Page 54: Symbian Web Runtime

Snippets – Adding them into the example• Check Snippet description• Open correct file • Look for the placeholder in

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

Page 55: Symbian Web Runtime

Using the Simulator for Preview• Right-click on the application

name in the Project Explorer• Select Preview Web App• Select Preview Web App• This will load the application

in the simulator

Page 56: Symbian Web Runtime

Simulator Settings

• Change your device settings to emulate a Symbian^3 devicedevice

• Click on Device SettingsCh• Choose:• Symbian WRT 1.1• 360x640• Touch

Page 57: Symbian Web Runtime

Start on the Exercise! • Click to page 6/15 of the

Hands on Lab• Just follow the instructions!• Just follow the instructions!

Page 58: Symbian Web Runtime

Now it’s time to start turning ideas start turning ideas into software

Let’s make the internet personal internet personal and mobile

Page 59: Symbian Web Runtime

Thank you!Thank you!Let us know when you write something you write something impressive

Valerie [email protected]