Example widgets

This section provides you with example widgets that you can download into your PC and then into a mobile device or emulator. To download a widget, click the widget link below. When you click the widget link, you have the option of either viewing the contents of the widget package (Open) or downloading the package (Save).

Keypad widget

The Keypad widget demonstrates capturing key events. By pressing different keys of the mobile keypad, you can see what key and character event codes are used in the Web Runtime environment.

Viewport widget

The Viewport widget demonstrates how to combine the JavaScript on resize DOM event handler with the height and width properties from the window and screen objects to calculate the effective area or viewport available for a widget.

AccuWidget

AccuWidget is S60 Web Runtime (WRT) widget that allows users to check the current weather conditions and the forecast for the current and the following day. Special attention has been paid to the scalability in various screen resolutions and support for both keypad and touch UI.

Figure: AccuWidget location view

AccuWidget demonstrates the following features:

  • Using the XMLHttpRequest API to transfer RSS (XML) data from a Web server. In this example, the AccuWeather service, www.accuweather.com.

  • Enabling navigation between different views.

  • Showing a transition effect when switching between views.

  • Scaling the screen size dynamically to fit different resolutions and orientations by modifying the CSS styles on the fly.

  • Changing the navigation mode between tab and cursor mode.

  • Capturing key events and creating a custom effect (highlighting) based on them.

  • Handling errors, such as no Internet connection and invalid input.

  • Hiding HTML elements that are irrelevant in the current view. For example, the right navigation arrow is hidden when there are no more forecasts to show.

  • Using a custom menu (from the WRT API) that is changed dynamically.

For the source file package, see the AccuWidget Example on Forum Nokia.

Service widgets

The Service widgets demonstrate the use of S60 Platform Services through the JavaScript Service APIs provided by WRT 1.1.

© Nokia 2008.