Adding a Guarana UI radio button on a web page
Article Metadata
Code Example
Source file: Media:adding a guarana ui radio button.zip Media:adding a guarana ui radio button.diff.zip
Tested with
Devices(s): Nokia 5800 XpressMusic
Article
Created: tapla
(17 Dec 2009)
Last edited: hamishwillee
(05 Oct 2012)
Contents |
Overview
This code snippet demonstrates how to add a radio button on a web page using Guarana UI components. The radio button component looks like this:
You can download the component library from Guarana UI: a jQuery-Based UI Library for Nokia WRT.
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="optiongroup"></div>
<input type="radio" id="radio0" name="radio" value="Radio 1" />
<input type="radio" id="radio1" name="radio" value="Radio 2" />
<input type="radio" id="radio2" name="radio" value="Radio 3" />
</div>
</body>
Source: JavaScript
var RADIO_BUTTONS = 3;
var radiobuttons = [];
Nokia.use("optiongroup", "radiobox", init);
// Initialises the widget
function init() {
var optionGroup = new Nokia.OptionGroup({
element: "#optiongroup",
title: "Option Group"
});
for (var i = 0; i < RADIO_BUTTONS; i++) {
radiobuttons[i] = new Nokia.RadioBox({
element: "#radio" + i,
label: "Radio " + (i + 1)
});
// Add the radio button to the option group
optionGroup.addItem(radiobuttons[i]);
}
// Check the first radio button
radiobuttons[0].check();
}
The radio button should be added into an option group (class Nokia.OptionGroup) so that only one of the radio buttons belonging to a group can be selected at a time.
To find out whether the radio button has been checked, use the isChecked() method:
// Shows which radio button is checked.
function executeSnippet() {
for (var i = 0; i < radiobuttons.length; i++) {
if (radiobuttons[i].isChecked()) {
displayNote("Checked radio button: #" + (i + 1));
return;
}
}
}
Note: The radio button 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/radiobox.js (implicitly loaded by core.js)
- themes/nokia/base/base.css (implicitly loaded by core.js)
- themes/nokia/base/radiobox.css (implicitly loaded by core.js)
- themes/nokia/base/images/radiobox.png (from radiobox.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)
In addition, the following files are required if Nokia.OptionGroup is used:
- src/optiongroup.js (implicitly loaded by core.js)
- themes/nokia/base/optiongroup.css (implicitly loaded by core.js)
Postconditions
A Guarana UI radio button is added on the web page. When Options > Execute snippet is selected, the number of the checked radio button is displayed.
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:adding a guarana ui radio button.zip.
- You can view all the changes that are required to implement the above-mentioned features. The changes are provided in unified diff and colour-coded diff (HTML) formats in Media:adding a guarana ui radio button.diff.zip.
- For general information on applying the patch, see Using Diffs.
- For unpatched stub applications, see Example app stubs with logging framework.
(no comments yet)