Revision as of 14:48, 22 June 2011

Template:KBCS

Overview

This code snippet demonstrates how to customise a Guarana UI checkbox. You can download the component library from Nokia Developer. This snippet assumes that you are familiar with adding the checkbox component on a web page. For more information about this, read the snippet CS001548 - Adding a Guarana UI checkbox on a web page.

To replace the checkbox with your own version, first create the graphics that you want to use. After that, replace the file themes/nokia/base/images/checkbox.png with your own image file. The original image file contains pictures of the checkbox in four different states: checked and not pushed, checked and pushed, unchecked and not pushed, and unchecked and pushed:

To switch between these states when the checkbox is clicked, adjust the background picture with CSS classes as shown here:

.nokia-checkbox-unchecked {
    background-position: 0 -74px;
}

This means that you must customise the CSS file themes/nokia/base/images/checkbox.css so that it corresponds to your own image file. For example, if you have created this file:

where the checkbox icon is 34 x 34 pixels, and there are only two states (checked and unchecked) represented, then the customised CSS classes would look like this:

.nokia-checkbox-icon {
    background-image: url(images/checkbox.png);
    height: 34px;
    width: 34px;
    float: left;
}
 
.nokia-checkbox-checked {
    background-position: 0px 0;
}
 
.nokia-checkbox-unchecked {
    background-position: 0 -34px;
}
 
.nokia-checkbox-pushed .nokia-checkbox-checked {
    background-position: 0 0px;
}
 
.nokia-checkbox-pushed .nokia-checkbox-unchecked {
    background-position: 0 -34px;
}

Postconditions

The default graphics of a checkbox component are replaced with your own graphics and the necessary changes are made to the CSS file.

See also

• CS001548 - Adding a Guarana UI checkbox on a web page

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:customizing_a_guarana_ui_checkbox.zip.
• You can view all the changes that are required to implement the above-mentioned features (compared to the Adding a Guarana UI checkbox on a web page snippet). The changes are provided in unified diff and colour-coded diff (HTML) formats in Media:customizing_a_guarana_ui_checkbox.diff.zip.
• For general information on applying the patch, see Using Diffs.
• For unpatched stub applications, see Example stub.