/ DEVELOPER DAY
New Features in
Nokia Asha Web App Tools 3.0
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
CONTENTS
• Web app on new Asha and S40 Devices
• New Nokia Asha Skin
• Hardwar...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
WEB APP ON NEW ASHA AND S40 DEVICES
• Will my web app built on Nokia Asha Plat...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
NEW NOKIA ASHA SKIN
4
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
NEW NOKIA ASHA SKIN – FEATURES
5
Swipe from left
or right edge
to exit the web...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
HARDWARE BACK BUTTON SUPPORT
Template
mwl.addNavBackListener(<nodeID>, <JS / n...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
HARDWARE BACK BUTTON SUPPORT
Points to be noted
• If there are no listeners fo...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
HARDWARE BACK BUTTON SUPPORT
Templates/Samples with Hardware Back button imple...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
USB DEPLOYMENT
• In Deployment settings you can choose on which device you wan...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
MEDIA CAPTURE
HTML code changeonly
ImageCapture
<inputtype="file"name="camera_...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
IMPROVED TEMPLATE AND SAMPLE
Improved Template / Sample
Template/Sam
ple with
...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
IMPROVED TEMPLATE AND SAMPLE
12
• Instead of loading title, image, description...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
OPTIMIZATION TECHNIQUES
• Whyshouldthe user wait to use the Web App?
•  Redes...
/ DEVELOPER DAYNokia Asha Web App Tools 3.0
Want to learn more?
Go to: http://www.developer.nokia.com/Develop/asha/web/
Or...
Upcoming SlideShare
Loading in...5
×

New features in Nokia Asha web app tools 3 0 (beta)

1,957

Published on

In this webinar, Jukka Tupamäki of Futurice introduces the new Nokia Asha web app tools 3.0 (beta). He demonstrate the new features, including the back button and camera API, and shares tips and tricks for developing Nokia Asha web apps with both the new Nokia Asha UI and user experience in mind. He also show you how seamlessly web apps work across the new Nokia Asha platform 1.0 and previous Series 40 Developer Platform releases.

Find out more about developing for Nokia Asha at: http://www.developer.nokia.com/Develop/asha

Check out the current webinar schedule here: http://www.developer.nokia.com/webinars and http://developer.nokia.com/Develop/asha/learning/

3 Comments
0 Likes
Statistics
Notes
  • 12 September 2013 webinar has good discussion of multiple mwl.NavBackListeners for different hardware back button actions. Chat regarding In-App advertising user opt-out policy was clarified. Minifying to shorten/quicken execution. Getting started with javascript and web apps URLs in chat. Session was cut short due to electrical failure, so some questions posed may not have been answered. We were encouraged to send any unanswered questions to the webinar dot experts at nokia.com. Richard Brown offered many helpful suggestions to other attendees.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Webinar recording of 28 May session, including full chat commentary, is here: http://forumnokia.adobeconnect.com/p27fyp8dr2i/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Due to technical difficulties we will not be publishing a recording the 24 May session.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,957
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
83
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide

New features in Nokia Asha web app tools 3 0 (beta)

  1. 1. / DEVELOPER DAY New Features in Nokia Asha Web App Tools 3.0
  2. 2. / DEVELOPER DAYNokia Asha Web App Tools 3.0 CONTENTS • Web app on new Asha and S40 Devices • New Nokia Asha Skin • HardwareBack buttonSupportin web apps • MediaCapturevia web app • Improvementsin Templatesand Samples • OptimizationTechniques
  3. 3. / DEVELOPER DAYNokia Asha Web App Tools 3.0 WEB APP ON NEW ASHA AND S40 DEVICES • Will my web app built on Nokia Asha Platform1.0 work on S40 devices? Yes. It will work with older devices. Web apps are dependenton the browserclient that is runningon the device and not on the platform. • What featuresfrom my web app will be missingon older S40 devices? As long as the user is using the appropriatebrowserclientwhich supportsthe web app featurethen the web app will behavein the same way in S40 devicesas in new NokiaAsha devices (exceptfor lack of hardware,like back key presentin new Asha device and not presentin S40 devices) 3
  4. 4. / DEVELOPER DAYNokia Asha Web App Tools 3.0 NEW NOKIA ASHA SKIN 4
  5. 5. / DEVELOPER DAYNokia Asha Web App Tools 3.0 NEW NOKIA ASHA SKIN – FEATURES 5 Swipe from left or right edge to exit the web app Swipe from bottom to bring in the options menu
  6. 6. / DEVELOPER DAYNokia Asha Web App Tools 3.0 HARDWARE BACK BUTTON SUPPORT Template mwl.addNavBackListener(<nodeID>, <JS / non-JSfunctions>); Example.: Only MWL calls: mwl.addNavBackListener('#page2',"mwl.show('#page1');mwl.hide('#page2');"); Mix Of MWL and Js calls: mwl.addNavBackListener('#page2', "mwl.show('#page1');mwl.hide('#page2');updatePage1();"); Only JS call: mwl.addNavBackListener('#page2',"UpdatePage2();");
  7. 7. / DEVELOPER DAYNokia Asha Web App Tools 3.0 HARDWARE BACK BUTTON SUPPORT Points to be noted • If there are no listeners for the visible view/page, on pressing the back button user will be prompted to exit the web app • On multiple listeners for the visible view/page, first visible id’s listener callback is executed • The call to add listeners should be present in the script tag of the index.html 7
  8. 8. / DEVELOPER DAYNokia Asha Web App Tools 3.0 HARDWARE BACK BUTTON SUPPORT Templates/Samples with Hardware Back button implementation • BackKeySample • RSS Feed • Accordion • NewsReader • News project • Multi-ViewProject Accordiontemplateis a good exampleto note that the implementationis developerspecific. In accordiontemplate,on pressingback key,it closes the currentopen fold instead of requestingthe user to close the web app 8
  9. 9. / DEVELOPER DAYNokia Asha Web App Tools 3.0 USB DEPLOYMENT • In Deployment settings you can choose on which device you want to deploy the web app and via which option • S40 Device – Both bluetooth and USB support are present • No changein the deploymentbehavior • Nokia Asha Platform 1.0 – USB support is available • If the USB Launcheris not runningon the device,the tool will provideyou with a shorturl fromwhich you can downloadthe USB Launcheron the device • If the USB Launcheris runningon the device,then the tool will deploywith web app on the devicesimilar to S40 devices 9
  10. 10. / DEVELOPER DAYNokia Asha Web App Tools 3.0 MEDIA CAPTURE HTML code changeonly ImageCapture <inputtype="file"name="camera_image"accept="image/*" capture="camera"size="20"/> VideoCapture <inputtype="file"name="camera_video" accept=“video/*" capture="camera"size="20"/> Samplefor MediaCapture • MediaCaptureSample
  11. 11. / DEVELOPER DAYNokia Asha Web App Tools 3.0 IMPROVED TEMPLATE AND SAMPLE Improved Template / Sample Template/Sam ple with quicker initial loading for better user experience
  12. 12. / DEVELOPER DAYNokia Asha Web App Tools 3.0 IMPROVED TEMPLATE AND SAMPLE 12 • Instead of loading title, image, description during the initial load, load them on demand • In the sample (News Reader) that has been provided, only the feed titles are loaded initially, the description and images are deferred for later • When the user selects a particular title, then we update the html to include the image and description on showing the detailed page of the feed • Server detects the change in the html and depending on the size and number of changes in the html, it will send a partial page update or full page update
  13. 13. / DEVELOPER DAYNokia Asha Web App Tools 3.0 OPTIMIZATION TECHNIQUES • Whyshouldthe user wait to use the Web App? •  Redesignto have quickfirst look experience. • Whereverpossible use mwl calls insteadof JavaScript • ApplicationJavaScriptshould be fast (e.g. is your Contentserversendingtoo much data to be digestedby JavaScript?) • Makesure you have optimizedyour server’soutput(XML, JSON etc. API responses) • For betteruser experienceof your web app try PartialPage update and avoid full page changes. • See the News Readersample. • Third-partyJavaScriptlibrariesfor interactiveUI elements is not a good idea, as non-MWL JavaScriptcode executeson the server,not on the phone.Therefore,each librarycall requiresround-tripcommunicationbetweenthe Nokia Xpress client and server.
  14. 14. / DEVELOPER DAYNokia Asha Web App Tools 3.0 Want to learn more? Go to: http://www.developer.nokia.com/Develop/asha/web/ Or via Web Developer Channel (WDC) present in the tool itself. THANK YOU!

×