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

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

• 1.
  Effective templates forSeries 40 web apps Tapan Acharya Lead Evangelist & Consultant.
• 2.
  Contents • Why webapps? • 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.
  Java and webapps offer • • Consumer Foot fall. Usage Trends options 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.
  Web apps leveragecloud-assisted Xpress 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.
  Web App Runtime Initial Architecture web view Xpress Browser Proxy 2. Requests web app Web App Xpress 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.
  Web app tools Nokia Web Tools Web Web App Web Development Simulator Developer Environment (WAS) Channel (WDE) (WDC)
• 7.
  Overview of NokiaWeb Tools. WDC WDE Simulator
• 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.
  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.
  Web App Simulatorlook & feel Simulator Menu Bar Simulator Settings Device Settings
• 11.
  Web App PlatformFeatures MWL: • 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-attribute Application Cache • HTML5 feature for storing Web assets locally • Current Use: store static images from web app
• 12.
  Choosing template fromWDE © Nokia 2012 / Company Confidential 12
• 13.
  Demo
• 14.
  Templates and Series40 design consistency
• 15.
  Gesture implementation intemplates © Nokia 2012 / Company Confidential 15
• 16.
  Demo
• 17.
  Thank you. www.developer.nokia.com/series40webapps © Nokia 2012 17