Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps


Published on

This webinar presentation shows you how easy it is to build Series 40 web apps based on templates in Nokia Web Tools 2.0. Tapan Acharya, lead evangelist and consultant with Nokia in Bangalore, describes templates including Multi-view, RSS Feed, Accordion, Carousel, and Tab Control. He presents sample apps and shows you how to use existing templates to localise your apps for languages you choose to support. The knowledge from this webinar will help you to select templates effectively and thus develop Series 40 web apps quickly.

Published in: Technology

Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

  1. 1. Effective templates for Series 40 web apps Tapan Acharya Lead Evangelist & Consultant.
  2. 2. Contents• Why web apps? • Web app runtime architecture• Introducing Nokia Web tools.• How to use different templates in web apps.• Demo of some templates and UI components.• Design consistency and templates.• Demo of advanced templates.
  3. 3. Java and web apps offer • • Consumer Foot fall. Usage Trendsoptions and flexibility • • Purchase Trends. Web Extensions JAVA APPS WEB APPS News, Info, Brands,Sophisticated Communication Guides & Products & Games Reference Shopping Simple/Social Productivity Social Multimedia Games Tools Networks (e.g., quizzes) • Suited to connected information• Suited for highly interactive and and entertainment apps graphics-intensive apps, offline • Easier to learn for new developers processing • Faster time to market & lower• Available as “native” platform development costs
  4. 4. Web apps leverage cloud-assistedXpress Browser for Series 40• Excellent browsing experience, even with the lowest price point devices• Proxy to process complex web pages for better experience• Up to 90% more efficient and more than twice as fast• Dynamic start page with locally relevant content• Cloud-assisted web apps Better browsing Web apps THE INTERNET XPRESS BROWSER BETTER AND FOR SERIES 40 PERSONALISED WEB PROXY SERVER EXPERIENCE
  5. 5. Web App Runtime InitialArchitecture web view Xpress Browser Proxy 2. Requests web app Web AppXpress Browser 1. User selects web app Client Client Manager Application 3. Metadata, HTML, CSS, Optimizer Session JavaScript, Images, etc.Application Session DOM Comparison DOM 4. Create DOM and JavaScript context. 8. Web app view Run onload JavaScript (HTML, CSS, Images, DOM MWL) Device APIs JavaScript 5. AJAX requests for data Content Widget API Context Server 6. XML, JSON, etc. from MWL Content Server 7. Server processing • Web app JavaScript modifies DOM • Server creates client optimized HTML/CSS from DOM • JavaScript event handlers are wrapped in MWL callbacks • MWL event handlers are passed through to client
  6. 6. Web app tools Nokia Web Tools Web Web App Web Development Simulator Developer Environment (WAS) Channel (WDE) (WDC)
  7. 7. Overview of Nokia Web Tools. WDC WDE Simulator
  8. 8. Web Developer Environment (WDE) Toolbar• Built on the Eclipse platform• WDE leverages the powerful web editing features (editing, packaging, and deploying of web apps). Menu options Network trace view Updated project shortcut menu options
  9. 9. Web App Simulator (WAS)• Enables to preview and test Series 40 web apps• For Series 40 web apps, WAS must be started from within WDE by previewing a web app Web App Simulator (WAS) Local Cloud Preview Preview
  10. 10. Web App Simulator look & feel Simulator Menu Bar Simulator Settings Device Settings
  11. 11. Web App Platform FeaturesMWL: • Is a JavaScript library to handle basic on device operations. • MWL Methods must be invoked inline to execute on the client.Gestures: • Nokia Browser exposes swipe, long press and key events.Animated Transitions: • Animated Transitions supported through basic CSS3 Module 3 support. • Width, height and margin.Storage • Using widget preferences :http://www.w3.org/TR/widgets-apis/#the-preferences-attributeApplication Cache • HTML5 feature for storing Web assets locally • Current Use: store static images from web app
  12. 12. Choosing template from WDE © Nokia 2012 / Company Confidential 12
  13. 13. Demo
  14. 14. Templates and Series 40 design consistency
  15. 15. Gesture implementation in templates © Nokia 2012 / Company Confidential 15
  16. 16. Demo
  17. 17. Thank you. www.developer.nokia.com/series40webapps© Nokia 2012 17