effectively using nokia web tools 2.0 templates for series 40 web apps
Post on 16-Jun-2015
1.111 Views
Preview:
DESCRIPTION
TRANSCRIPT
Effective templates for Series 40 web apps
Tapan Acharya Lead Evangelist & Consultant.
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.
Java and web apps offer options and flexibility
Sophisticated Games
Communication
Productivity Tools
Multimedia
JAVA APPS
News, Info, Guides &
Reference
Brands, Products & Shopping
Social Networks
Simple/Social Games
(e.g., quizzes)
WEB APPS
• Suited for highly interactive and graphics-intensive apps, offline processing
• Available as “native” platform
• Suited to connected information and entertainment apps
• Easier to learn for new developers • Faster time to market & lower
development costs
• Consumer Foot fall. • Usage Trends • Purchase Trends. • Web Extensions
• 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
Web apps leverage cloud-assisted Xpress Browser for Series 40
THE INTERNET
Better browsing
Web apps
BETTER AND PERSONALISED WEB
EXPERIENCE
XPRESS BROWSER FOR SERIES 40 PROXY SERVER
Xpress Browser Client
Application Session
Xpress Browser Proxy Web App Manager
Content Server
Application Session
DOM
JavaScript Context
Client Optimizer
Device APIs
Widget API
DOM Comparison
DOM
MWL
1. User selects web app 2. Requests web app
3. Metadata, HTML, CSS, JavaScript, Images, etc.
4. Create DOM and JavaScript context. Run onload JavaScript
5. AJAX requests for data
6. XML, JSON, etc. from Content Server
8. Web app view (HTML, CSS, Images, MWL)
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
Web App Runtime Architecture
Initial web view
Web app tools
Nokia Web Tools
Web Development Environment
(WDE)
Web App Simulator
(WAS)
Web Developer Channel (WDC)
Overview of Nokia Web Tools. WDC
WDE Simulator
Web Developer Environment (WDE) • Built on the Eclipse platform
• WDE leverages the powerful web editing features (editing, packaging, and deploying of web apps).
Toolbar
Menu options
Network trace view
Updated project shortcut menu
options
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
Local Preview
Web App Simulator
(WAS)
Cloud Preview
Web App Simulator look & feel
Settings
Device Settings
Simulator Menu Bar Simulator
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
Web App Platform Features
Choosing template from WDE
© Nokia 2012 / Company Confidential 12
Demo
Templates and Series 40 design consistency
Gesture implementation in templates
© Nokia 2012 / Company Confidential 15
Demo
Thank you.
© Nokia 2012 17
www.developer.nokia.com/series40webapps
top related