Revision as of 11:39, 16 December 2009

Overview

This code snippet demonstrates how to customize a Guarana UI busy indicator. You can download the component library from Forum Nokia. This snippet assumes that you are familiar with adding the busy indicator component on a web page. For more information about this, read the snippet Adding a Guarana UI busy indicator on a web page.

To replace the busy indicator with your own version, first create a GIF animation that you want to use. Free animations can be created and downloaded e.g. from the Ajaxload Web site. After that, replace the themes/nokia/base/images/busyindicator.gif with your own animation. Lastly, customize the width and height of the busy indicator so that they correspond to the width and height of the new animation. For example:

window.busyIndicator = new Nokia.Busy({
    element: "#busyIndicatorContainer",
    width: 126,
    height: 22,
    autoOpen: false
});

Postconditions

The default GIF animation of a busy indicator is replaced with own animation.

See also

• Adding a Guarana UI busy indicator on a web page

Supplementary material

This code snippet is part of the stub concept, which means that it has been patched on top of a template application in order to be more useful for developers. The version of the WRT stub application used as a template in this snippet is v1.2.

• The patched, executable application that can be used to test the features described in this snippet is available for download at Media:customizing_a_guarana_ui_busy.zip.
• You can view all the changes that are required to implement the above-mentioned features (compared to the Adding a Guarana UI busy indicator on a web page snippet). The changes are provided in unified diff and colour-coded diff (HTML) formats in Media:customizing_a_guarana_ui_busy.diff.zip.
• For general information on applying the patch, see Using Diffs.
• For unpatched stub applications, see Example stub.