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

  • Published on

  • View

  • Download

Embed Size (px)


Series 40 web apps are easy to build, and they make great information and entertainment apps that use frequently-updated content from the Internet. Using web development skills and tools, templates and information available from Nokia Developer, you can create an app in as little as one hour, start to finish. In this webinar, Michael from Futurice will show you how. Michael suggests that you download and install Nokia Web Tools 1.5 before the webinar to get the most out of the session. That's the toolset he will be using in the presentation. You don't need to have it installed to learn a lot, but you'll learn more if you have it handy.


  • 1. 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
  • 2. 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.
  • 3. 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,
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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(),
  • 11. 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
  • 12. 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
  • 13. 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!
  • 14. Animating Height & Width
  • 15. Animating Margins or or
  • 16. Important Notes on Animations Local Preview, Cloud Preview and an actual device will all work slightly differently, so dont rely overly on the simulator. GIF animations dont 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
  • 17. 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
  • 18. 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
  • 19. Video Training https://projects.developer.nokia.com/videotraining5/2/201 192
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. Thank you!@MichaelSamarin


View more >