Adding a Guarana UI checkbox on a web page
hamishwillee
(Talk | contribs) m (moved CS001548 - Adding a Guarana UI checkbox on a web page to Adding a Guarana UI checkbox on a web page over redirect: Merge into wiki.) |
hamishwillee
(Talk | contribs) m (Hamishwillee - Bot update - Fix links) |
||
| Line 1: | Line 1: | ||
{{ArticleMetaData <!-- v1.2 --> | {{ArticleMetaData <!-- v1.2 --> | ||
| − | |sourcecode= [[Media:adding a guarana ui checkbox.diff.zip]] [[Media:adding a guarana ui checkbox.zip]] | + | |sourcecode= [[Media:adding a guarana ui checkbox.diff.zip]] [[Media:adding a guarana ui checkbox.zip]] |
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> | |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> | ||
|devices= Nokia 5800 XpressMusic | |devices= Nokia 5800 XpressMusic | ||
| Line 135: | Line 135: | ||
==See also== | ==See also== | ||
| − | * [[ | + | * [[']] |
==Supplementary material== | ==Supplementary material== | ||
Revision as of 03:19, 13 July 2012
Article Metadata
Code Example
Tested with
Devices(s): Nokia 5800 XpressMusic
Article
Created: tapla
(27 Nov 2009)
Last edited: hamishwillee
(13 Jul 2012)
Contents |
Overview
This code snippet demonstrates how to add a checkbox on a web page using Guarana UI components. The checkbox component looks like this:
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">
<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" />
</div>
</body>
Source: JavaScript
var CHECKBOXES = 3;
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()) {
checkboxesChecked++;
}
}
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)
Postconditions
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.
- 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 checkbox.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 checkbox.diff.zip.
- For general information on applying the patch, see Using Diffs.
- For unpatched stub applications, see Example stub.
