×
Namespaces

Variants
Actions
(Difference between revisions)

Adding a Guarana UI checkbox on a web page

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update)
Line 1: Line 1:
__NOTOC__
+
{{ArticleMetaData <!-- v1.2 -->
__NOEDITSECTION__
+
|sourcecode= [[Media:adding a guarana ui checkbox.diff.zip]] [[Media:adding a guarana ui checkbox.zip]]  
{{KBCS}}
+
{{ArticleMetaData
+
|id=CS001548
+
|platform=
+
|devices=Nokia 5800 XpressMusic
+
|category=Web Runtime (WRT)
+
|subcategory=Guarana UI, UI
+
|creationdate=December 29, 2009
+
|keywords=
+
 
+
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.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]]) -->
|sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
+
|devices= Nokia 5800 XpressMusic
|devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) -->
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
+
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) -->
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
|author=[[User:Tapla]]
+
|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= 20091127
 +
|author= [[User:Tapla]]
 +
<!-- The following are not in current metadata -->
 +
|subcategory= Guarana UI, UI
 +
|id= CS001548
 
}}
 
}}
  
Line 23: Line 28:
  
 
This code snippet demonstrates how to add a checkbox on a web page using Guarana UI components. The checkbox component looks like this:<br/>
 
This code snippet demonstrates how to add a checkbox on a web page using Guarana UI components. The checkbox component looks like this:<br/>
[[File:Guarana_checkbox_icon.jpg]]<br/>
+
[[File:Guarana checkbox icon.jpg]]<br/>
 
You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT|Nokia Developer]].
 
You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT|Nokia Developer]].
  
Line 72: Line 77:
 
</code>
 
</code>
  
To find out if the checkbox has been checked, use the <tt>isChecked()</tt> method:
+
To find out if the checkbox has been checked, use the {{Icode|isChecked()}} method:
  
 
<code javascript>
 
<code javascript>
Line 136: Line 141:
 
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:adding_a_guarana_ui_checkbox.zip]].
+
* 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]].
+
* 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 general information on applying the patch, see [[Using Diffs]].
 
* For unpatched stub applications, see [[Example stub]].
 
* For unpatched stub applications, see [[Example stub]].
  
 
[[Category:Symbian]][[Category:Guarana UI]][[Category:Code Examples]][[Category:Code Snippet]]
 
[[Category:Symbian]][[Category:Guarana UI]][[Category:Code Examples]][[Category:Code Snippet]]

Revision as of 09:31, 10 May 2012

Article Metadata
Code ExampleTested with
Devices(s): Nokia 5800 XpressMusic
Compatibility
Platform(s):
Symbian
Article
Created: tapla (27 Nov 2009)
Last edited: hamishwillee (10 May 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:
Guarana checkbox 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">
<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.

101 page views in the last 30 days.
×