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

/ DEVELOPER DAY

New Features in Nokia Asha Web App Tools 3.0

/ DEVELOPER DAY Nokia Asha Web App Tools 3.0

CONTENTS

• Web app on new Asha and S40 Devices

• New Nokia Asha Skin

• Hardware Back button Support in web apps

• Media Capture via web app

• Improvements in Templates and Samples

• Optimization Techniques


WEB APP ON NEW ASHA AND S40 DEVICES

• Will my web app built on Nokia Asha Platform 1.0 work on S40 devices? Yes. It will work with older devices. Web apps are dependent on the browser client that is running on the device and not on the platform.

• What features from my web app will be missing on older S40 devices? As long as the user is using the appropriate browser client which supports the web app feature then the web app will behave in the same way in S40 devices as in new Nokia Asha devices

(except for lack of hardware, like back key present in new Asha device and not present in S40 devices)

3


NEW NOKIA ASHA SKIN

4


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


HARDWARE BACK BUTTON SUPPORT

Template

mwl.addNavBackListener(<node ID>, <JS / non-JS functions>);

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();");



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



Templates/Samples with Hardware Back button implementation • BackKeySample

• RSS Feed

• Accordion

• NewsReader

• News project

• Multi-View Project

Accordion template is a good example to note that the implementation is developer specific.

In accordion template, on pressing back key, it closes the current open fold instead of

requesting the user to close the web app

8


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 change in the deployment behavior

• Nokia Asha Platform 1.0 – USB support is available • If the USB Launcher is not running on the device, the tool will provide you with a short url

from which you can download the USB Launcher on the device

• If the USB Launcher is running on the device, then the tool will deploy with web app on the device similar to S40 devices

9


MEDIA CAPTURE

HTML code change only

Image Capture

<input type="file" name="camera_image" accept="image/*"

capture="camera" size="20"/>

Video Capture

<input type="file" name="camera_video" accept=“video/*"

capture="camera" size="20"/>

Sample for Media Capture

• MediaCaptureSample


IMPROVED TEMPLATE AND SAMPLE

Improved Template / Sample

Template/Sample with quicker initial loading for better user experience


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


OPTIMIZATION TECHNIQUES

• Why should the user wait to use the Web App?

• Redesign to have quick first look experience.

• Wherever possible use mwl calls instead of JavaScript

• Application JavaScript should be fast (e.g. is your Content server sending too much data to

be digested by JavaScript?)

• Make sure you have optimized your server’s output (XML, JSON etc. API responses)

• For better user experience of your web app try Partial Page update and avoid full page

changes.

• See the News Reader sample.

• Third-party JavaScript libraries for interactive UI elements is not a good idea, as non-MWL

JavaScript code executes on the server, not on the phone. Therefore, each library call

requires round-trip communication between the Nokia Xpress client and server.


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!

http://www.developer.nokia.com/Develop/asha/web/



Technology

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