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/

1. / DEVELOPER DAY
New Features in
Nokia Asha Web App Tools 3.0

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. / 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. / DEVELOPER DAYNokia Asha Web App Tools 3.0
NEW NOKIA ASHA SKIN
4

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. / 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. / 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. / 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. / 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. / 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. / 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. / 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. / 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. / 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!