Developing Series 40 web apps with Nokia Web Tools 2.0

Download Developing Series 40 web apps with Nokia Web Tools 2.0

Post on 17-May-2015




3 download


In this presentation, youll 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.


  • 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 similar items Carousel Allows for playful, quick browsing of media content Allows for full-view focus of content Good for unspecified amounts of rich media Tabs Allow for quick access to independent content stacks Allows for categorization and persistence of content states Good for functions that behave independently of one another (e.g. settings, favorites, profile) 24. Complex Apps - Design ApproachDocument-drivenTry to keep your scrollable content to a certain axis (e.g. vertical) by keeping a fixed-size on the other axisComponent-drivenTry to eliminate document overflow for example, set the body to 100% width and height and set overflow:hiddenUse relative (percentage) lengths to make flexible layouts in either orientationIt may be possible to take a hybrid approachBy creating some views that are fixed (component-driven) and others that are scrollable (document-driven).For example, a main screen of icon components with sub views as reading panesThis strategy allows the use of fluid scrolling as well as flexible, accessible UIAs long as only one view is shown at a time 25. Complex Apps - Performance and Debugging Handling large amounts of data E.g. memory management with image carousels Animation performance Minimizing reflows do not animate very many objects at the same time Handling differences between regular web apps and apps designed forSeries 40 devices (Nokia Browser) Debugging with Web Inspector Taking CSS compression/cascading issues into consideration How image compression affects your application Unsupported features of web standards 26. Persistent Data Most mechanisms you would normally use for client-side persistent data are actuallyhandled on the server here Including cookies! One mechnism exists for storing simple data on the client widget.preferences Contains simple key-value pairs 27. Browser Integration FAQ Is it possible to integrate the app with the Nokia Browser backbutton? No, this is not supported at the moment Can I create custom items for the Nokia Browser options menu? Not at the moment If such funtionality is needed, create a custom implementation withHTML/CSS Can I close my app from JavaScript? No, there is no such MWL method or window.close() available in thecurrent release 28. Common Examples Changing the application icon shown in the Nokia Browser favorites Use the standard favicon syntax: The icon should be 16x16 pixels in PNG format with a transparent background To launch a phone call, use the standard tel: URI schemeDial Loading audio or video Simply use MWL to play back a file type supported by the device (e.g. 3gp, mp4): Play video 29. CSS Compression Issues #id.class is not allowed by the compressor Use IDs for addressing, classes for styling !important-declarations arent allowed ...but theyre a bit of a hack anyway Declarations that dont match anything in document are dropped So have an instance of a class youre about to cast for an animation for example .first .second {} becomes .x123 {} This is anonymization of the classes, and changes the semantics of the stylesheet This will become natural with experience Summa summarum: its complicated dont use complicated selectors! 30. JavaScript Tips The JavaScript execution serverside: $(#foo .bar).text(TEXT);environment of the Proxy issometimes a black box even though only ... needs updating, entire


is transferred Use libraries you know to work; for example in templating, jQ-tpl not, Mustache yes add arbitrary id:


Also be aware of your DOM same serverside JS, but only TEXT interactions with jQuery for example! transferred DOM-updates always delivered as Use only simple callbacks in eventJavaScript to the handset handler attributes Observe with WebKit Inspector E.g. onclick=foobar() Updates are always anchored to an ID Consider an example:


31. Thank you!@MichaelSamarin