×
Namespaces

Variants
Actions
Revision as of 09:28, 10 May 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Adding a Guarana UI progress bar on a web page

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleTested with
Devices(s): Nokia 5800 XpressMusic
Compatibility
Platform(s):
Symbian
Article
Created: tapla (17 Dec 2009)
Last edited: hamishwillee (10 May 2012)

Contents

Overview

This code snippet demonstrates how to add a progress bar on a web page using Guarana UI components. The progress bar component looks like this:
Guarana progressbar icon.jpg
You can download the component library from Nokia Developer.

Source: Relevant HTML components

<head>
<!-- Guarana UI style sheets -->
<link rel="stylesheet"
href="style/themes/themeroller/default-theme/ui.all.css"
type="text/css" media="screen">
 
<!-- Guarana UI scripts -->
<script type="text/javascript" src="lib/jquery/jquery.js"
charset="utf-8"></script>
<script type="text/javascript" src="lib/guarana/defaults.js"
charset="utf-8"></script>
<script type="text/javascript" src="lib/guarana/core.js"
charset="utf-8"></script>
</head>
<body>
<div id="bodyContent" class="bodyContent">
<div id="progressBar"></div>
</div>
</body>

Source: JavaScript

Nokia.use("progressbar", init);
 
// Initializes the widget
function init() {
window.progressBar = new Nokia.ProgressBar({
element: "#progressBar",
value: 30,
label: true,
complete: function(value) {
displayNote("Complete!");
}
});
}

The value attribute specifies the initial value of the progress bar. If the label attribute is set to true, the value of the progress bar is displayed above the bar. The complete attribute defines a function which is called when the progress bar reaches the value of 100 %.

To get and set the value of the progress bar, call the getValue() and setValue() functions, respectively:

// Executes the snippet.
// Adds the value of the progress bar by 20 % until the value is 100 %.
function executeSnippet() {
var newValue = window.progressBar.getValue() + 20;
if (newValue > 100) {
newValue = 100;
}
window.progressBar.setValue(newValue);
}

Note: The scroll component requires the following files from the library:

  • lib/jquery/jquery.js
  • src/core.js
  • src/defaults.js
  • src/dom.js (implicitly loaded by core.js)
  • src/util.js (implicitly loaded by core.js)
  • src/device.js (implicitly loaded by core.js)
  • src/animation.js (implicitly loaded by core.js)
  • src/widget.js (implicitly loaded by core.js)
  • src/progressbar.js (implicitly loaded by core.js)
  • themes/nokia/base/base.css (implicitly loaded by core.js)
  • themes/nokia/base/progressbar.css (implicitly loaded by core.js)
  • themes/nokia/base/images/shadow.png (from base.css)
  • themes/nokia/base/images/shadow-c.png (from base.css)
  • themes/nokia/base/images/shadow-lr.png (from base.css)
  • themes/themeroller/default-theme/ui.accordion.css
  • themes/themeroller/default-theme/ui.all.css
  • themes/themeroller/default-theme/ui.base.css
  • themes/themeroller/default-theme/ui.core.css
  • themes/themeroller/default-theme/ui.theme.css
  • themes/themeroller/default-theme/images/ui-bg_diagonals-thick_10_444444_40x40.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_flat_0_000000_40x100.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_20_9f1504_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_40_8ab61c_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_55_8ab61c_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_100_c2cba5_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_highlight-hard_80_ededed_640x100.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_highlight-soft_100_ededed_640x100.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_89bf43_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_97B72B_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_222222_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_e3bfb5_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_ffffff_256x240.png (from ui.theme.css)

Postconditions

A Guarana UI progress bar is added on the web page. When Options > Execute snippet is selected, the value of the progress bar is increased in increments of 20 % until it is 100 %, after which the function specified by the complete attribute is called.

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 10 May 2012, at 09:28.
93 page views in the last 30 days.