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 Training
Build a Series 40 Web App in One Hour
Michael Samarin, Ph.D
Director,
Developer Training and Evangelism
Futurice Oy
+358 40 518 18 09
michael.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 Series
40 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:
› 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

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

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 works
Page #1 Page #1 Page #2 Page #1 Page #2
Page #2
Default positioning Then we wrap both
We move Page #2
for the 2 pages (the pages in a container
up by how high Page
dashed line is the element (red), which
#1 is, and to the
viewport of the we can move
right by how wide
phone) sideways with an
Page #1 is, so we get
animation
them side-by-side

19. Video Training
» https://projects.developer.nokia.com/videotraining
5/2/201
19
2

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