Your SlideShare is downloading. ×
Basics of WRT (Web Runtime)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Basics of WRT (Web Runtime)


Published on

Develop web applications using the Nokia Web Runtime (WRT) technology. Use standard web technology like HTML, JavaScript and CSS to create an app-like experience and also to access platform features …

Develop web applications using the Nokia Web Runtime (WRT) technology. Use standard web technology like HTML, JavaScript and CSS to create an app-like experience and also to access platform features like the camera or contacts.

Published in: Technology, Design

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Web Runtime Path of the fast development Andreas Jakl Senior Technical Consultant Forum Nokia 18 June, 2010 V2.0.0
  • 2. 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?
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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> </string> the components and <key>MainHTML</key> <string>accuwidget.html</string> features of this specific <key>AllowNetworkAccess</key> widget <true /> ...
  • 9. 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.
  • 10. 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; . . . }
  • 11. 18.06.2010 © 2010 Nokia 11 JavaScript Event handling XMLHttpRequest DOM manipulation UI effects UI tweaking
  • 12. 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
  • 13. 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
  • 14. 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! –
  • 15. 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
  • 16. 18.06.2010 © 2010 Nokia 16 Device Specifications – Web Runtime So how can I find what devices are supporting this technology? Get more information and resources:
  • 17. 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 –
  • 18. Thank You. Want to learn more?