×
Namespaces

Variants
Actions
(Difference between revisions)

Customising a Guarana UI busy indicator

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata)
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Abstract. Tidy wiki text)
 
Line 1: Line 1:
 +
[[Category:Guarana UI]][[Category:Code Examples]][[Category:Symbian Web Runtime]]
 +
{{Abstract|This code example demonstrates how to customise a Guarana UI busy indicator.}}
 +
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= [[Media:customizing a guarana ui busy.zip]] [[Media:customizing a guarana ui busy.diff.zip]]
 
|sourcecode= [[Media:customizing a guarana ui busy.zip]] [[Media:customizing a guarana ui busy.diff.zip]]
Line 21: Line 24:
 
|author= [[User:Tapla]]
 
|author= [[User:Tapla]]
 
<!-- The following are not in current metadata -->
 
<!-- The following are not in current metadata -->
|subcategory= Guarana UI, UI
 
 
|id= CS001550
 
|id= CS001550
 
}}
 
}}
Line 27: Line 29:
 
==Overview==
 
==Overview==
  
This code snippet demonstrates how to customise a Guarana UI busy indicator. You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT|Nokia Developer]]. 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]].
+
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]]. You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT]].  
  
 
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 {{Icode|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:
 
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 {{Icode|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:
Line 56: Line 58:
 
* For general information on applying the patch, see [[Using Diffs]].
 
* For general information on applying the patch, see [[Using Diffs]].
 
* For unpatched stub applications, see [[Example app stubs with logging framework]].
 
* For unpatched stub applications, see [[Example app stubs with logging framework]].
 
[[Category:Symbian]][[Category:Guarana UI]][[Category:Code Examples]][[Category:Code Snippet]]
 

Latest revision as of 09:03, 5 October 2012

This code example demonstrates how to customise a Guarana UI busy indicator.

Article Metadata
Code ExampleTested with
Devices(s): Nokia N97, Nokia 5800 XpressMusic
Article
Created: tapla (24 Nov 2009)
Last edited: hamishwillee (05 Oct 2012)

Contents

[edit] Overview

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. You can download the component library from Guarana UI: a jQuery-Based UI Library for Nokia WRT.

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
});

[edit] Postconditions

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

[edit] See also

[edit] 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.

This page was last modified on 5 October 2012, at 09:03.
99 page views in the last 30 days.
×