(Difference between revisions)

Adding a Guarana UI checkbox on a web page

From Nokia Developer Wiki
Jump to: navigation, search
Forum Nokia KB (Talk | contribs)
Forum Nokia KB (Talk | contribs)
Line 1: Line 1:
|devices=Nokia 5800 XpressMusic
|devices=Nokia 5800 XpressMusic
|category=Web Runtime (WRT)
|category=Web Runtime (WRT)
|subcategory=Guarana UI, UI
|subcategory=Guarana UI, UI
|creationdate=November 26, 2009
|creationdate=December 29, 2009
Line 63: Line 64:
To find out whether the checkbox has been checked, use the <tt>isChecked()</tt> method:
To find out if the checkbox has been checked, use the <tt>isChecked()</tt> method:
<code javascript>
<code javascript>
Line 117: Line 118:
A Guarana UI checkbox is added on the web page. When <tt>Options</tt> > <tt>Execute snippet</tt> is selected, the number of checked checkboxes is displayed.
A Guarana UI checkbox is added on the web page. When '''Options''' > '''Execute snippet''' is selected, the number of checked checkboxes is displayed.
==See also==
==See also==
* [[Customizing a Guarana UI checkbox]]
* [[CS001551 - Customising a Guarana UI checkbox]]
==Supplementary material==
==Supplementary material==

Revision as of 15:23, 29 December 2009


Article Metadata
Tested with
Devices(s): Nokia 5800 XpressMusic
Created: (29 Dec 2009)
Last edited: Forum Nokia KB (29 Dec 2009)


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

Source: Relevant HTML components

<!-- Guarana UI style sheets -->
<link rel="stylesheet"
type="text/css" media="screen">
<!-- Guarana UI scripts -->
<script type="text/javascript" src="lib/jquery/jquery.js"
<script type="text/javascript" src="lib/guarana/defaults.js"
<script type="text/javascript" src="lib/guarana/core.js"
<div id="bodyContent" class="bodyContent">
<input type="checkbox" id="cb0" name="cb0" value="Checkbox 1" />
<input type="checkbox" id="cb1" name="cb1" value="Checkbox 2" />
<input type="checkbox" id="cb2" name="cb2" value="Checkbox 3" />

Source: JavaScript

var checkboxes = [];
Nokia.use("optiongroup", "checkbox", init);
// Initializes the widget
function init() {
for (var i = 0; i < CHECKBOXES; i++) {
checkboxes[i] = new Nokia.CheckBox({
element: "#cb" + i,
label: "Checkbox " + (i + 1),
wrapper: "div"

To find out if the checkbox has been checked, use the isChecked() method:

// Shows the checked boxes.
function executeSnippet() {
var checkboxesChecked = 0;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].isChecked()) {
displayNote("Checked checkboxes: " + checkboxesChecked);

Note: The checkbox 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/optionbox.js (implicitly loaded by core.js)
  • src/checkbox.js (implicitly loaded by core.js)
  • themes/nokia/base/base.css (implicitly loaded by core.js)
  • themes/nokia/base/checkbox.css (implicitly loaded by core.js)
  • themes/nokia/base/images/checkbox.png (from checkbox.css)
  • 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)


A Guarana UI checkbox is added on the web page. When Options > Execute snippet is selected, the number of checked checkboxes is displayed.

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.

174 page views in the last 30 days.