×
Namespaces

Variants
Actions
(Difference between revisions)

Customising a Guarana UI busy indicator

From Nokia Developer Wiki
Jump to: navigation, search
Forum Nokia KB (Talk | contribs)
m (Protected "CS001550 - Customising a Guarana UI busy indicator" ([edit=sysop] (indefinite) [move=sysop] (indefinite)))
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Abstract. Tidy wiki text)
 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
__NOTOC__
+
[[Category:Guarana UI]][[Category:Code Examples]][[Category:Symbian Web Runtime]]
__NOEDITSECTION__
+
{{Abstract|This code example demonstrates how to customise a Guarana UI busy indicator.}}
{{KBCS}}
+
 
{{CodeSnippet
+
{{ArticleMetaData <!-- v1.2 -->
|id=CS001550
+
|sourcecode= [[Media:customizing a guarana ui busy.zip]] [[Media:customizing a guarana ui busy.diff.zip]]
|platform=
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices=Nokia N97, Nokia 5800 XpressMusic
+
|devices= Nokia N97, Nokia 5800 XpressMusic
|category=Web Runtime (WRT)
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|subcategory=Guarana UI, UI
+
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|creationdate=December 30, 2009
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
|keywords=
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20091124
 +
|author= [[User:Tapla]]
 +
<!-- The following are not in current metadata -->
 +
|id= CS001550
 
}}
 
}}
  
 
==Overview==
 
==Overview==
  
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]].
+
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 <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:
+
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:
  
 
<code javascript>
 
<code javascript>
Line 33: Line 48:
 
==See also==
 
==See also==
  
* [[CS001549 - Adding a Guarana UI busy indicator on a web page]]
+
* [[Adding a Guarana UI busy indicator on a web page]]
  
 
==Supplementary material==
 
==Supplementary material==
Line 39: Line 54:
 
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 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]].
+
* 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]].
+
* 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 general information on applying the patch, see [[Using Diffs]].
* For unpatched stub applications, see [[Example stub]].
+
* For unpatched stub applications, see [[Example app stubs with logging framework]].
 
+
[[Category:Web Runtime (WRT)]][[Category:Guarana UI]][[Category:Code Examples]]
+

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.
101 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×