Webinar: Build a Nokia Series 40 web app in one hour

Series 40 Developer TrainingBuild a Series 40 Web App in One HourMichael Samarin, Ph.DDirector,Developer Training and EvangelismFuturice Oy+358 40 518 18 09michael.samarin@futurice.com @MichaelSamarin

What Are Series 40 Web Apps» W3C Widget specification (http://www.w3.org/TR/widgets/) 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.

What Are Series 40 Web Apps» In total, there are 32 devices that support Nokia Browser (Series 40 5th Edition, Feature Pack 1 and up).» http://www.developer.nokia.com/Devices/Device_specification s/?page=2&filter1=series40webapps» Core use cases: Connected data-driven applications › Social networking, RSS readers, trivia games, …

Web Apps Are Not Web Pages» Although developed using web standards, web apps are not the same 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

Tools for Series40 Web Apps» Nokia Web Tools 1.5» Eclipse Based (Aptana Studio) web development environment» Customized by Nokia for Series 40 Web apps» Includes templates, libraries, code snippets, simulator, debugger, deployment options unique to Series 40 Web Apps development» Bluetooth Launcher 1.5 for on- device deployment

Nokia Browser for Series 40» Unique proxy browser with server side JavaScript / Compression engine for Series 40» Engine that made Series 40 Web Apps possible, because most Series 40 devices do not have enough CPU/RAM to run a full WebKit based web browser» Nokia Browser Proxy hosts the Web App client, and acts as a proxy between the Nokia Browser Client and the Web App server, so can be described as ”Cloud-Assisted Web Runtime”

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 › No home screen widgets

JavaScript and Mobile Web Library» Regular JavaScript statements are executed by the Nokia Browser Proxy server» JavaScript function calls in your code cause a round-trip to Nokia Browser Proxy» Special library called Mobile Web Library (MWL) provides client- local JS functions» Functions executed fully on the client side (Nokia Browser Client)» Used via a namespace called mwl

› MWL is limited, however covers the most common use cases that can be run on the client side: › Running simple CSS transitions/animations Mobile Web › Handling gestures (swipe,Library - MWL long press) › Inserting new nodes to DOM › Implemented natively by the Nokia Browser Client

Mobile Web Library - MWL CSS Manipulation Timers Misc addClass timer setInputValue removeClass stopTimer insertHTML toggleClass replaceChild switchClass scrollTo iterateClass loadURL setGroupTarget setGroupNext show hide toggle» In addition to these, MWL also provides functions for registering listeners for synthetic events (gestures) and navigation keys › addSwipeLeftListener(), addLongPressListener(), … › addNavLeftListener(), addNavUpListener(), …

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 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

Animations and Transitions» Certain properties can be animated locally on the client side: › Element’s 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

Animations and Transitions» 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 almost automatically avoided!

Animating Height & Width

Animating Margins …or… …or…

Important Notes on Animations» Local Preview, Cloud Preview and an actual device will all work slightly differently, so don’t rely overly on the simulator.» GIF animations don’t work in the simulator but DO on the device. Be careful with GIF, because of high CPU usage» Contrary to regular browser scripting, animations on the Client are blocking» Only a single element can be animated at one time for performance reasons

CSS Transitions» The Mobile Web Library allows you to run CSS transitions on the client side › No round trip to Nokia Browser Proxy server needed! › Devices not supporting animated transitions automatically fall back to discrete property changes» Use cases for transitions: › Accordion expanding › Going to a details view by clicking on a list item › Search box appearing/disappearing › Slide shows» Current limitations: › Properties you can animate: width, height, margin-left, margin-top › Only top-level CSS classes can be used with MWL in animations

AnimatedPageChangeSample How it worksPage #1 Page #1 Page #2 Page #1 Page #2Page #2Default positioning Then we wrap both We move Page #2for the 2 pages (the pages in a container up by how high Pagedashed line is the element (red), which #1 is, and to theviewport of the we can move right by how widephone) sideways with an Page #1 is, so we get animation them side-by-side

Video Training» https://projects.developer.nokia.com/videotraining5/2/201 192

Browser Integration FAQ» Is it possible to integrate the app with the Nokia Browser back button? › 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 with HTML/CSS» Can I close my app from JavaScript? › No, there is no such MWL method or window.close() available in the current release

Common Usage FAQ» How do I obtain the real screen resolution from JavaScript? › First of all: do you really need to do this? › Would flexible CSS be enough? › Known issue: user agent of the JavaScript context is not the same as the actual client – it is the Nokia Browser Proxy › Makes it difficult to get the actual resolution › Workaround: pass the real user agent to a 3rd party server for inspection to detect the device resolution › Client UA is sent in AJAX requests» CSS Compression challenges

Qualify for a Asha 303» Attend the webinar session. You name has to be on the attendee list. 1 entry per name» Send an email › web.apps@nokia.com to register your name › Subject “Asha 303 for May 3rd web app webinar” › State the intended application you are going to write and estimate publishing date» Publish your Series 40 web app to Nokia Store and pass QA. Send an email › web.apps@nokia.com with the name and link of your app in Nokia Store › Publishing date has to be between May 3rd and July 1st

Thank you!@MichaelSamarin

Webinar: Build a Nokia Series 40 web app in one hour

by Nokia Developer

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 3

Statistics

Webinar: Build a Nokia Series 40 web app in one hour Presentation Transcript

http://www.linkedin.com	2
http://us-w1.rockmelt.com	1