Hands-on development with Nokia Web Runtime

1

Hands-on development with Nokia Web Runtime

Oren Levine (oren.levine@nokia.com)

Technology Marketing

Nokia

2

Agenda

• Web Runtime: the slides• What it is and what’s in it for me

• Web Runtime: the demo• Zero to app in 60 seconds

• Questions?

3

What is a “Web Runtime”?

A software development environment that lets developers use standard web

technology to create first-class applications

4

What’s in it for me?

Symbian MaemoDesktop

Cross-platform apps

Reuse Web content

•Create true cross-platform applications and service clients

•Reuse Web content in Web applications

•Rapid prototyping and concept development

•HTML•JavaScript•CSS•Done!

5

Available now on over 30 Symbian models

Over 30 Symbian devices launched, announced or upcoming

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

Latest Firmware Upgradeon Symbian OS, S60 3.1 devices

6

Available next on Maemo

Q4 2009 Q1 2010 Q2 2010

Alpha: Nokia Web Runtime for Maemo 6

Beta: Nokia Web Runtime for Maemo 6

Today: Web Runtime for 10s of millions of Symbian devices

7

Easy tools turn designers into app developers

• Develop web widgets using existing popular development tools

• 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 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 and extension

Widgets

CreateNew widgetImport existing widget

8

Have 60 seconds ?

• You can cook an egg…

•Or make a widget

• Lets make a widget!

9

How to: support screen sizes & orientations.button {

width: 116px;

height: 37px;

background: url(images/button_bg.png) no-repeat;

color: #ffffff;

font-size: 20px;

font-weight: bold;

margin: 3px;

padding-top: 12px;

display: inline-block;

text-align: center;

}

<link href="style.css" rel="stylesheet" type="text/css">

<link href="style_small.css" rel="stylesheet" type="text/css">

// Set the correct stylesheet depending on whether

// we are running on bigger or smaller screens.

applyCorrectStyles: function() {

var largeScreen = Helper.isLargeScreen();

document.styleSheets[0].disabled = !largeScreen;

document.styleSheets[1].disabled = largeScreen;

}

.button {

width: 80px;

height: 25px;

background: url(images/small_button_bg.png) no-repeat;

color: #ffffff;

font-size: 14px;

font-weight: bold;

margin: 2px;

padding-top: 9px;

display: inline-block;

text-align: center;

}

1. Define styles for screen sizes and orientations

2. Add the style sheets to your HTML file

3. Choose the right one based on the screen

size

CSS CSS

HTML JS

10

• Web Runtime widgets can access Platform Services through JavaScript extensions

• Combine web-based data with device context to deliver personalised and relevant services

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

• Available in Symbian OS, S60 5.0 and selected S60 3.2 devices

• PS 2.0 Beta adds features, improves syntax

Platform Services add context to web content

System

Messaging

Calendar

Media

Contacts

Location

Nokia 5800 XpressMusic

Camera (beta)

var calendarObj= com.nokia.device.load("", "com.nokia.device.calendar", "");

var meetTime = {

start: startDateTime,

end: endDateTime

};

var meetingEntry = {

type: "Meeting",

summary: “Meeting summary”,

time: meetTime,

description: “Meeting description”

};

var result = calendarObj.addEntry(meetingEntry);

What do you wantin a widget?

Want to hear more about Web widgets?10 tips for Designing Mobile Widgets

Rajesh Lal Sunday, 12:30 pm, Room N810