hands-on development with nokia web runtime
DESCRIPTION
Overview of mobile Web widget development using the Nokia Web Runtime (WRT) Presented at Maemo Summit 2009, followed by a live coding demo of WRT widget creation. More information about Nokia's WRT at http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Web_Runtime/TRANSCRIPT
1
Hands-on development with Nokia Web Runtime
Oren Levine ([email protected])
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