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                                      •
                                                             •
                                                                  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
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
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
Web app tools

                 Nokia Web Tools




       Web          Web App           Web
   Development      Simulator      Developer
   Environment        (WAS)         Channel
      (WDE)                          (WDC)
Overview of Nokia Web Tools.
         WDC




               WDE        Simulator
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
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
Web App Simulator look & feel

                   Simulator
                   Menu Bar     Simulator


      Settings




                    Device
                   Settings
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
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.
       www.developer.nokia.com/series40webapps




© Nokia 2012                                     17

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.
  • 14.
    Templates and Series40 design consistency
  • 15.
    Gesture implementation intemplates © Nokia 2012 / Company Confidential 15
  • 16.
  • 17.
    Thank you. www.developer.nokia.com/series40webapps © Nokia 2012 17