Basics of web runtime

Web Runtime

Andreas Jakl
Senior Technical Consultant
Forum Nokia

13 April, 2010

13.04.2010 © 2010 Nokia 2

Contents
– Nokia developer offering in nutshell
– Web runtime widgets – overview
– Let’s take a closer look from tech perspective
– How to utilize platform services?
– Adding value with home screen
– Who’s able to use my widgets?

13.04.2010 © 2010 Nokia 4

Internet Evolution

Full HTML browser Mobile-optimized Widgets offer Widgets + Platform
lets mobile sites serve specific focused, optimized Services offer
consumers needs and tasks front-ends to Web- seamless integration
experience the based information and of the Web with
complete Web services personal context

13.04.2010 © 2010 Nokia 5

Definition of widget
• Lightweight mobile applications
– Give users easy access to the web
• The easiest way to bring web-based business to millions of Nokia
mobile devices

Application like delivery
Visible in the UI like native apps
Standards-based HTML, Javascript, and CSS

13.04.2010 © 2010 Nokia 6

WRT Widget Ingredients
Widget
info.plist (mandatory) properties
[name].html (mandatory) +
icon.png HTML
[name].css backbone
[name].js PNG icon
+
CSS layout Root
+ folder!
js logic

13.04.2010 © 2010 Nokia 7

info.plist
...
<plist version="1.0">
• The heart of the widget
<dict>
– Defines the widget <key>DisplayName</key>
<string>AccuWidget</string>
– XML text file
<key>Identifier</key>
– Provides information about <string>com.nokia.forum.accuwidget
</string>
the components and <key>MainHTML</key>
<string>accuwidget.html</string>
features of this specific
<key>AllowNetworkAccess</key>
widget <true />
...

13.04.2010 © 2010 Nokia 8

HTML <html>
<head>
• Defines the widget ..
</head>
<body id="body">
structure <div id=‘mainView’>
<span class=‘title’>Front view</span>
– Construct views </div>
<div id=‘subView1’ class=‘subView’>
with static HTML <p class=‘title’>Back view</p>
</div>
elements or … <div id=‘subView2’ class=‘subView’>
<p class=‘title’>Config view</p>
</div>
– Create dynamically </body>
</html>
with JavaScript at
runtime.

13.04.2010 © 2010 Nokia 9

CSS // Class selector to define common style
for similar components
.title {
font-size: 26px;
• Style and layout information }
color: blue;
.subView {
– Defines how to display }
display: none

HTML elements: position, // Id selector to define a unique style
for a unique component
color, size etc.
#mainView {
font-size: 16px;
– Embed CSS in the HTML file color: red;
text-align: center;
or import from an external }
// Pseudo-class selector to design a
stylesheet pattern style
div.subview div {
margin: 10px 0 0 0;
padding: 20px 20px 20px 20px;
. . .
}

13.04.2010 © 2010 Nokia 10

JavaScript
Event handling
XMLHttpRequest
DOM manipulation
UI effects
UI tweaking

13.04.2010 © 2010 Nokia 11

Widgets and Platform Services
• Platform Services
– Framework for abstracting access to a set of services
– Runtime specific bindings and security management
– Access through JavaScript
• Example use cases:
– Combine Web-based data with local context to
deliver personalized, relevant services
– Save critical Web-based contacts and events locally to
create reliable, dependable reminders

13.04.2010 © 2010 Nokia 12

Home Screen
Home screen view Full screen view
• What it is for the end-user?
– Add / remove home screen content
– Tap content to open widget full screen view
• Home screen (HS) enabled WRT widget implements
2 views
– Home screen view
– Full screen view
• HS communicates to widget when end-user interacts
with HS
– onload() and onresize() as widget side interface
functions
– JavaScript code to determine current view size –
correct view rendered

13.04.2010 © 2010 Nokia 13

Guarana UI – jQuery based UI library
• UI Library for your widget
– Set of customizable UI elements,
application frameworks, and templates
– Based on jQuery
– Complete package of components,
documentation and examples from
Forum Nokia web pages

• Go and check out!
– http://bit.ly/9LkU9g

13.04.2010 © 2010 Nokia 14

Web Developer to Widget Developer
• Develop web widgets using 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
– Designers and developers
collaborate easily
WRT plug-ins Widgets
and extension

13.04.2010 © 2010 Nokia 15

Device Specifications – Web Runtime

So how can I find what devices are supporting this technology?

http://www.forum.nokia.com/devices/matrix_webruntime_1.html

Get more information and resources:

http://www.forum.nokia.com/wrt

Basics of web runtime

Recommended

More Related Content

What's hot (12)

Similar to Basics of web runtime (20)

Basics of web runtime