Basics of WRT (Web Runtime)

Web Runtime
Path of the fast development

Andreas Jakl
Senior Technical Consultant
Forum Nokia

18 June, 2010
V2.0.0

18.06.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
– Ovi App Wizard
– Who’s able to use my widgets?

18.06.2010 © 2010 Nokia 3

The Developer Offering – Simplification
Via Cross platform tools, Ovi Services and strong ecosystem partners
Innovation (and transparency) through open source
Frameworks

Services Platforms

18.06.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

18.06.2010 © 2010 Nokia 5

What are Widgets?
• Web sites often not suitable for small
screens
• Widgets are “local websites” on the device
– Rendered using browser
– Fetch web data using
AJAX (Web 2.0)
– Look & feel like native applications
– But: easy development with HTML &
JavaScript

18.06.2010 © 2010 Nokia 6

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

18.06.2010 © 2010 Nokia 7

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

18.06.2010 © 2010 Nokia 8

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 />
...

18.06.2010 © 2010 Nokia 9

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.

18.06.2010 © 2010 Nokia 10

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;
. . .
}

18.06.2010 © 2010 Nokia 11

JavaScript
Event handling
XMLHttpRequest
DOM manipulation
UI effects
UI tweaking

18.06.2010 © 2010 Nokia 12

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

18.06.2010 © 2010 Nokia 13

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

18.06.2010 © 2010 Nokia 14

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

18.06.2010 © 2010 Nokia 15

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

18.06.2010 © 2010 Nokia 16

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

18.06.2010 © 2010 Nokia 17

Ovi App Wizard
• Mobilize your web content (RSS / Atom)
for the Ovi Store
– Free to use. No registration fee
– Open to all businesses and individuals
– No programming skills required
– Only takes minutes to create
– Apps delivered into Ovi Store within 24 hours of submission
– Optional: Monetize using included ad feature or through app purchase
– Distribute apps that work on nearly every Nokia handset to millions
• Currently an open beta
– http://ovi.com/appwizard

Thank You.
Want to learn more?
www.forum.nokia.com/wrt

Basics of WRT (Web Runtime)

More Related Content

Similar to Basics of WRT (Web Runtime) (20)

More from Andreas Jakl (20)

Recently uploaded (20)

Basics of WRT (Web Runtime)