Series 40 Developer Training
Build a Series 40 Web App in One Hour
Michael Samarin, Ph.DDirector, Developer Training and EvangelismFuturice Oy
+358 40 518 18 [email protected]
@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_specifications/?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 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
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
Mobile Web
Library - MWL
› MWL is limited, however covers the most common use cases that 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
Mobile Web Library - MWL
» In addition to these, MWL also provides functions for registering listeners for synthetic events (gestures) and navigation keys
› addSwipeLeftListener(), addLongPressListener(), …
› addNavLeftListener(), addNavUpListener(), …
CSS Manipulation Timers Misc
addClassremoveClasstoggleClassswitchClassiterateClasssetGroupTargetsetGroupNextshowhidetoggle
timerstopTimer
setInputValueinsertHTMLreplaceChildscrollToloadURL
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
Page #1
Page #2
Default positioning for the 2 pages (the dashed line is the viewport of the phone)
Page #1
Page #2
We move Page #2 up by how high Page #1 is, and to the right by how wide Page #1 is, so we get them side-by-side
Page #1
Page #2
Then we wrap both pages in a container element (red), which we can move sideways with an animation
How it works
Video Training» https://
projects.developer.nokia.com/videotraining
04/10/2023
19
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
› [email protected] 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
› [email protected] 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
Recommended
