Developing Series 40 web apps with Nokia Web Tools 2.0

Embed Size (px)


In this presentation, you’ll explore the new Series 40 web app APIs and features of Nokia Web Tools 2.0. Expert Michael Samarin from Futurice will show you how to develop for new Nokia Asha phones with a full-touch UI and will give you an overview of new templates and code samples.

Text of Developing Series 40 web apps with Nokia Web Tools 2.0

  • 1. Series 40 DeveloperTrainingSeries 40 Web Apps 2.0Michael Samarin, Ph.DDirector,Developer TrainingFuturice@MichaelSamarin

2. What Are Series 40 Web Apps W3C Widget specification ( says: Widgets are client-side applications that are authored using Web standards, but whose content can also be embedded into Web documents. Series 40 Web Apps are based on the W3C Widget specification Authored using a set of development tools provided by Nokia Targeted to be run on Series 40 mobile devices Using browser engine Nokia Browser for Series 40 (alternative name Nokia Proxy Browser, former Ovi Proxy Browser), which is pre-installed on all latest Series 40 devices and available as download for older devices. In total, there are 35 devices that support Nokia Browser (Series 40 5th Edition, Feature Pack 1 and up). Latest version required for Web Apps with API level 2.0 is Nokia Browser 2.0 (as of July 2012) Core use cases: Connected data-driven applications Social networking, RSS readers, trivia games, 3. Web Apps Are Not Web Pages Although developed using webstandards, web apps are not thesame as traditional web pages Appear and behave like standalone applications Located in application grid like regular applications A custom fit for a small-screen mobile device Package can contain local content like graphics, data samples, scripts 4. Tools for Series40 Web Apps Nokia Web Tools 2.0 Eclipse Based (Aptana Studio)web developmentenvironment Customized by Nokia forSeries 40 Web apps Includes templates, libraries,code snippets, simulator,debugger, deployment optionsunique to Series 40 Web Appsdevelopment Bluetooth Launcher 1.5 for on-device deployment 5. Nokia Browser for Series 40 Unique proxy browser with server side JavaScript / Compressionengine for Series 40 Engine that made Series 40 Web Apps possible, because most Series40 devices do not have enough CPU/RAM to run a full WebKit basedweb browser Nokia Browser Proxy hosts the Web App client, and acts as a proxybetween the Nokia Browser Client and the Web App server, so can bedescribed as Cloud-Assisted Web Runtime Takes web app development for lower-end devices to a whole newlevel! 6. Nokia Browser for Series 40 Nokia Browser main features: JavaScript runs on Nokia Browser Proxy server side Application content compressed before sending to the client CSS minimized, images compressed, partial HTML updates whenever possible Current Nokia Browser main constraints: HTML 4.01 with CSS 2.0 mobile profile (selected parts of CSS 3 also available) Certain DOM events not supported (onkey*, onmouse*, ontouch*) Limitations on animations (a limited set of transition timing functions available) No device API access, except: geo-location, uploading / downloading files, initiating sending SMS,phone call. No home screen widgets 7. JavaScript and Mobile Web Library Regular JavaScript statements are executed by the Nokia BrowserProxy server JavaScript function calls in your code cause a round-trip to NokiaBrowser Proxy Special library called Mobile Web Library (MWL) provides client-localJS functions Functions executed fully on the client side (Nokia Browser Client) Used via a namespace called mwl 8. Mobile Web Library - MWL MWL is limited, however covers the most common use casesthat can be run on the client side: Running simple CSS transitions/animations Handling gestures (swipe, long press) Inserting new nodes to DOM Implemented natively by the Nokia Browser Client 9. Mobile Web Library - MWL CSS Manipulation Timers Misc addClass timersetInputValue removeClassstopTimerinsertHTML toggleClass replaceChild switchClass scrollTo iterateClassloadURL setGroupTarget setGroupNext show hide toggle In addition to these, MWL also provides functions for registering listeners forsynthetic events (gestures) and navigation keys addSwipeLeftListener(), addLongPressListener(), addNavLeftListener(), addNavUpListener(), 10. Common JavaScript Use Cases Non-MWL JavaScript can be used almost as usual Just keep in mind that it causes a round-trip to the Nokia Browser Proxy Be especially careful when using 3rd party JS libraries (e.g. jQuery or jQuery Mobile) Handling XHR/AJAX No performance hit caused by the Nokia Browser architecture itself No limitations with same origin security policies Mashing up content from different sources possible! Lazy loading vs. front loading Round-trips can sometimes be avoided by front loading data at startup Preparing DOM for mobile client use E.g. building lists/tables to be inserted into the app 11. New Features in API 2.0 Support for Full Touch Series 40 devices with 240x400resolution 4-Way Navigation on non-touch devices Inline-block layout in CSS/HTML Files upload (input type file) and download encType of the form HTML tag vertical-align property of the div tag 12. Example 1 - ButtonSample Learning Nokia Web Tools Explaining application structure in Eclipse Deployment settings and target deployment: Local Preview, Cloud Preview, Device The calls mwl.toggle(), which will hide visible elements andshow invisible ones toggle() accepts a simple CSS-selector as its argument (as do many MWLmethods) Note that everything happens in the Client the Proxy Server only serves the initialHTML, and after that it need not be contacted at all! 13. Example 2 - ButtonCounterSample Highlights how application state (i.e. the value of the counter) can be retained on the Nokia Proxy Server How it works: Application loads, the counter is 0 on the Server Client detects a press of the button, notifies Server Server increments counter by one, updates Server HTML Server notifies the Client to make an identical update to its own HTML both parts of the application are in sync Note: the Client never knows the actual value of the counter, only receives updates to its HTML! Thus, intensive computation/large amounts of data can be processed by the Server, while the Client only gets small updatesand saves battery and bandwidth 14. Example 3 - PageChangeSample Anything in will be executed just before theapplication starts We use that to hide the 2nd page initially Notice how we can use more than one MWL-call in an event attribute, suchas the onclick= of a Each press of a will hide the current page and show the pagethat was hidden Note that no Server communication needs to take place the applicationruns entirely on the Client 15. Animations and Transitions Certain properties can be animated locally on the client side: Elements width, height, margin-left and margin-top Or a combination of these Consequently, there are a few design patterns that are especially recommended Accordion Carousel Tabs These have certain common advantages/properties Based on the principle of concealing/revealing content Client-local, animated transitions can be easily added When used correctly, unnecessary round trips to the Nokia Browser Proxy server are almostautomatically avoided! 16. Animating Height & Width 17. Animating Marginsoror 18. Important Notes on Animations Local Preview, Cloud Preview and an actual device will all workslightly differently, so dont rely overly on the simulator. GIF animations dont work in the simulator but DO on thedevice. Be careful with GIF, because of high CPU usage Contrary to regular browser scripting, animations on the Clientare blocking Only a single element can be animated at one time forperformance reasons 19. Example 4 - AnimatedPageChangeSample 1/2 A bit more involved than the previous one! Adds altering the default positioning of elements Adds animation Absolute positioning is not allowed So we emulate it with negative margin tricks We set the two pages side-by-side When either page is navigated to, we move the container they both share to give theillusion of moving both pages at once 20. Example 4 - AnimatedPageChangeSample 2/2 How it worksPage #1Page #1 Page #2Page #1Page #2Page #2Default positioningWe move Page #2 Then we wrap bothfor the 2 pages (the up by how high Page pages in a containerdashed line is the #1 is, and to the element (red), whichviewport of theright by how wide we can movephone) Page #1 is, so we get sideways with an them side-by-side animation 21. Example 5 Ajax 1/2 Ajax makes it possible for web pages to communicate with(other) servers Well use jQuery to make Ajax simple Note that while jQuery is a (relatively) large JavaScript library, the Client will never need to download it, since its the Server that uses it, and only sends updated HTML to the Client 22. Example 5 Ajax 2/2 Lets contact a free web service that will geolocate its clients based on theirIP address Fun fact: you will get different results when running Local Preview and Cloud Preview! Bonus exercise: why does that happen? The async:false and crossDomain:false options are key tomaking this work Without async, the call from the Client to the Proxy Server would finish before the web service responds Without crossDomain, jQuery would get confused in the Proxy Server environment 23. Complex Apps - UI Considerations Accordion Allows for compact representation of list items Additional content or secondary actions can be revealed with a press Good for lists of simil