Web - Code examples

Series 40 Web Apps UI Visualisation Examples

This Series 40 Web Apps example demonstrates the use of different kinds of UI elements, navigational solutions, and patterns created with HTML, CSS and JavaScript technologies. The application has been designed for Series 40 full touch, touch and type, and most recent non-touch devices which have Nokia Browser 2.0 or newer or Nokia Xpress browser.

Project summary | Design and Implementation notes | Release notes

Series 40 web app example: UpDown

This is a copy of the UpDown web app example provided as a sample in Nokia Web Tools 2.0. This web app enables the user to either upload or download photos to or from their phone.

Series 40 web app example: XMLDataSource

This is a copy of the XMLDataSource web app example provided as a sample in Nokia Web Tools 2.0. This web app returns the Nokia Operating System, screen size, and platform of the selected phone. This information is accessed from the Nokia devices database.

Series 40 web app example: JsonDataSource

This is a copy of the JsonDataSource web app example provided as a sample in Nokia Web Tools 2.0. This web app returns the Nokia Operating System, screen size, and platform of a selected phone. This information is accessed from the Nokia devices database.

Series 40 web app example: NewsReader

This is a copy of the NewsReader web app example provided as a sample in Nokia Web Tools 2.0. This web app displays the top news story for a number of different categories.

Series 40 web app example: Share

This is a copy of the Share web app example provided in Nokia Web Tools 2.0. This example enables users to share content with others, either via email or on Facebook or Twitter.

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. This example is available in Nokia Web Tools 2.0.

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.
This example is also available from within Nokia Web Tools 2.0, from the Samples tab.

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. This examples is also available from the Samples tab in Nokia Web Tools 2.0.
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.

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.

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.

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

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.