Web - Code examples

Beta Labs Client v2.0

This Qt Quick example application allows users browse the applications in Nokia Beta Labs. The main purpose of the application is to demonstrate how to communicate with a web server from QML using AJAX. The application also demonstrates how to use Qt Quick Components, and how to utilise In-App Advertising.

This example is hosted in Nokia Developer Projects:

Project summary | Implementation notes | Release notes

Series 40 web app example: Map Example v1.5

This example Series 40 web app demonstrates how to use the capabilities of the Ovi Maps Rendering API to display map tiles in a web app. It also shows how to use the geolocation API to determine the phone’s location.
This example is hosted in a Forum Nokia Project, where you can read additional documentation, discover recent revisions, and contribute to the project.
 

Series 40 web app example: Places v2.0

This example Series 40 web app demonstrates how to use an external API — in this case the Qype API — to query, return, and display a list. It also shows how to use the geolocation API to determine the phone’s location. This app serves as a good starting point for creating apps with custom list based navigation and location awareness.
This example is hosted in a Nokia Developer Project, where you can read additional documentation, discover recent revisions, and contribute to the project.
 

Mobile Web Components

Components are popular in web design as they provide a way to encapsulate frequently used functionality into pre-built structures and behaviours. These structures can then be easily customised using supplied options, or by directly editing the component itself. Web components are built using the basic building blocks of the web; HTML for structured data, CSS for visual rendering, and JavaScript for behaviour.

Qt Quick Playground v1.4

This QML application demonstrates the features of Qt Quick with a set of demos and the possibility to view the source code of the demos.

Series 40 web app example: Photo Album

This example Series 40 web app demonstrates how the features of Mobile Web Library can be used to create a photo album web app that displays pictures from Flickr.
This example is hosted in a Forum Nokia Project, where you can read additional documentation, discover recent revisions, and contribute to the project.
To preview this web app you need to update the code with a Flickr key. You can obtain a Flickr key from the Flickr website.

Series 40 web app example: News Reader

This example Series 40 web app demonstrates how the features of Mobile Web Library can be used to create a news reader web app. You can experience this example on a Series 40 device by visiting webapps.browser.ovi.com in Ovi Browser.

Series 40 web app example: Slideshow

This example Series 40 web app demonstrates how to create a simple image carousel or slide show by use of the Mobile Web Library (MWL) APIs. These APIs are used to execute image transitions locally on a device, in the Ovi Browser client. You can experience this example on a Series 40 device by visiting webapps.browser.ovi.com in Ovi Browser.

Series 40 web app example: Stock Tracker

This example Series 40 web app shows the use of mashed up YQL and Yahoo Finance data to create a simple stock reader. You can experience this example on a Series 40 device by visiting webapps.browser.ovi.com in Ovi Browser.

Series 40 web app example: UI Examples

These example Series 40 web apps demonstrate how to create simple UI controls and layouts. The two examples provided include a horizontal tabbed layout with search input elements and smoothly sliding accordion. You can experience this example on a Series 40 device by visiting webapps.browser.ovi.com in Ovi Browser.

Mobile web templates for mobile phones

The templates for mobile phones include prestyled mobile web elements optimised for a large collection of Series 40 devices, from Series 40 3rd Edition to Series 40 6th Edition, and Legacy S60 for Symbian devices. Template elements include headers, lists, data tables, and assorted copy elements. There are also examples and commented Cascading Style Sheets (CSS), which can be modified to further personalise the look or behaviour of the content.

Mobile Web Templates for Smartphones v2.0

The Mobile Web Templates for Smartphones include components optimised for touch devices (including Symbian and Maemo™), and components optimised for Series 40 and S60 WebKit nontouch devices. The templates include navigation bars, lists, grids, flexible buttons, form elements, data tables, and a simple slide show. There are also examples and graphical source files that can easily be adapted to suit your brand or colour scheme.

QtWebKit: ListEm Example v1.1

ListEm is a hybrid application which demonstrates software development using web technologies and Qt native code.

Web Runtime: BetaLabsWidget Example v1.1

This web widget application allows users to browse the applications in Nokia Beta Labs.

Web Runtime: FNReader Widget Example v2.0

The FNReader Widget Example is a simple WRT application for RSS feed reading. It demonstrates how to use the Online/Offline API, enable the home screen view, and use the Nokia Mobile Web Templates in a WRT widget.

QtWebKit: Cartoon Reader Example v1.2

Cartoon Reader is a Qt WebKit application that demonstrates the use of web technologies such as HTML5 and CSS3 with Qt native code.

Flowella podcast widget example v0.9

This package includes the Flowella project file and images for the prototype of a podcast widget, along with release notes that describe how to open the project in Flowella.

All application tutorials

This package contains all seven Nokia tutorials for Flash Lite.

Event application tutorial

This tutorial demonstrates the code required to send an SMS message or initiate a phone call. In addition, code that shows how to make use of date and time information and use intervals to control how often a countdown display is updated is included.

LBS application tutorial

This tutorial demonstrates the code required to determine a device’s location. In addition, code that shows how to make use of Google Maps is included.

Music application tutorial

This tutorial demonstrates the code required to load an external music file and control the playback of that file by pausing, playing, stopping or restarting the music. The application also provides a template that could be used to create a custom music player.

Photostream application tutorial

This tutorial demonstrates the code required to load image files from an external source. The application also shows how to use a third party API, in this case the Flickr API, to obtain a photo stream, load those photos over the internet, and manipulate them for display.

RSS news application tutorial

This tutorial demonstrates the code required to open and read an RSS feed then display the feed’s contents as either a headline with text, or as a slideshow of headlines. The application also includes the code required to open the web page referenced by the feed item.

Social Networking application tutorial

This tutorial demonstrates the code required to read and display Twitter content. The code also includes parsing XML, timing events, and displaying content that can be scrolled or paged.

Video application tutorial

This tutorial demonstrates the code required to load an external FLV file and then control the playing of the video and adjusting the volume of its audio. The code shows how to detect changes in screen orientation and modify the Flash Lite content accordingly.

QtWebKit: Beta Labs Example

This Qt hybrid application demonstrates how to use the QtWebKit module to display web content in Qt.

Layout Samples for Mobile Web Templates for High-End Devices v1.1

These layout samples are created using components from the Nokia Mobile Web Templates for High-End Devices. The layouts illustrate common ways to combine components within the context of a corporate website, a news website, and an online store. Layout Samples for Mobile Web Templates for High-End Devices is part of the Mobile Web Templates and Layout Samples series. For an introduction and more information, see Mobile Web Templates - introduction to templates.

Layout Samples for Mobile Web Templates for Low-End Devices

These layout samples are created using components from the Nokia Mobile Web Templates for Low-End Devices. The layouts illustrate common ways to combine components within the context of a corporate website, a news website, and an online store. Layout Samples for Mobile Web Templates for Low-End Devices is part of the Mobile Web Templates and Layout Samples series. For an introduction and more information, see Mobile Web Templates - introduction to templates.

Layout Samples for Mobile Web Templates for Mid-Range Devices

These layout samples are created using components from the Nokia Mobile Web Templates for Mid-Range Devices. The layouts illustrate common ways to combine components within the context of a corporate website, a news website, and an online store. Layout samples for Mobile web templates for mid-range devices is part of the Mobile Web Templates and Layout Samples series. For an introduction and more information, see Mobile Web Templates - introduction to templates.

Web Runtime: Hue Widget Example

This Web Runtime (WRT) widget allows users to explore and search for colours, patterns, and palettes from the popular colourLOVERS.com website API. The widget is related to the Widget design tutorial in the Design and User Experience Library.

Web Runtime: AccuWidget Example v2.1

This S60 Web Runtime widget allows the user to check the current weather conditions and the forecast for the current and following day. The updated version supports adding the widget on the home screen (first introduced in the Nokia N97). The example application is designed to support all S60 devices with Web Runtime, both with keypad and touch UI.

Web Runtime: RouteWidget Example v2.0

This S60 Web Runtime widget demonstrates how to retrieve the current location (latitude and longitude), travelled distance, current speed (horizontal), and number of GPS satellites. The updated example supports adding the widget on the homescreen, first introduced in the Nokia N97 device. The application can be installed on S60 devices that support Platform Services for Web Runtime (from S60 5th Edition onwards), and it is optimised for touch UI.

Nokia Web Browser Design Guide: Example Web Site v1.2

This updated example Web site is intended to be used alongside the third, fourth, and fifth article in the Nokia Web Browser Design Guide. The example site demonstrates some of the points covered in the articles, and provides a useful resource for Web designers looking at optimizing sites for mobile "full Web" browsing.