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.

1. Effective templates for Series 40 web apps
Tapan Acharya
Lead Evangelist & Consultant.

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. Java and web apps 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 leverage cloud-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 Nokia Web 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 Simulator look & feel
Simulator
Menu Bar Simulator
Settings
Device
Settings

11. Web App Platform Features
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 from WDE
© Nokia 2012 / Company Confidential 12

13. Demo

14. Templates and Series 40 design consistency

15. Gesture implementation in templates
© Nokia 2012 / Company Confidential 15

16. Demo

17. Thank you.
www.developer.nokia.com/series40webapps
© Nokia 2012 17