Customising a Guarana UI busy indicator
| Line 1: | Line 1: | ||
__NOTOC__ | __NOTOC__ | ||
__NOEDITSECTION__ | __NOEDITSECTION__ | ||
| + | {{KBCS}} | ||
{{CodeSnippet | {{CodeSnippet | ||
| − | |id= | + | |id=CS001550 |
|platform= | |platform= | ||
|devices=Nokia N97, Nokia 5800 XpressMusic | |devices=Nokia N97, Nokia 5800 XpressMusic | ||
|category=Web Runtime (WRT) | |category=Web Runtime (WRT) | ||
|subcategory=Guarana UI, UI | |subcategory=Guarana UI, UI | ||
| − | |creationdate= | + | |creationdate=December 30, 2009 |
|keywords= | |keywords= | ||
}} | }} | ||
| Line 13: | Line 14: | ||
==Overview== | ==Overview== | ||
| − | This code snippet demonstrates how to | + | This code snippet demonstrates how to customise a Guarana UI busy indicator. You can download the component library from [http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT 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 [[CS001549 - 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 | + | 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 from the [http://www.ajaxload.info/ Ajaxload] website, for instance. Next, replace the file <tt>themes/nokia/base/images/busyindicator.gif</tt> with your own animation. Finally, customise the width and height of the busy indicator so that they correspond to the width and height of the new animation. For example: |
<code javascript> | <code javascript> | ||
| Line 28: | Line 29: | ||
==Postconditions== | ==Postconditions== | ||
| − | The default GIF animation of a busy indicator is replaced with own animation. | + | The default GIF animation of a busy indicator is replaced with your own animation. |
==See also== | ==See also== | ||
| − | * [[Adding a Guarana UI busy indicator on a web page]] | + | * [[CS001549 - Adding a Guarana UI busy indicator on a web page]] |
==Supplementary material== | ==Supplementary material== | ||
Revision as of 15:21, 30 December 2009
Article Metadata
Tested with
Article
Overview
This code snippet demonstrates how to customise 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 CS001549 - 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 from the Ajaxload website, for instance. Next, replace the file themes/nokia/base/images/busyindicator.gif with your own animation. Finally, customise 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 your own animation.
See also
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.
