Basics of WRT (Web Runtime)

  • 4,920 views
Uploaded 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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,920
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
97
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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>com.nokia.forum.accuwidget </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! – http://bit.ly/9LkU9g
  • 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? http://www.forum.nokia.com/devices/matrix_webruntime_1.html Get more information and resources: http://www.forum.nokia.com/wrt
  • 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 – http://ovi.com/appwizard
  • 18. Thank You. Want to learn more? www.forum.nokia.com/wrt