Customising a Guarana UI checkbox
hamishwillee
(Talk | contribs) m (Hamishwillee - Bot update) |
hamishwillee
(Talk | contribs) m (Hamishwillee - Add Abstract. Tidy wiki text) |
||
| (4 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
| + | [[Category:Guarana UI]][[Category:Code Examples]][[Category:Symbian Web Runtime]] | ||
| + | {{Abstract|This code example demonstrates how to customise a Guarana UI checkbox.}} | ||
| + | |||
{{ArticleMetaData <!-- v1.2 --> | {{ArticleMetaData <!-- v1.2 --> | ||
| − | |sourcecode= [[Media:customizing a guarana ui checkbox.zip]] [[Media:customizing a guarana ui checkbox.diff.zip]] | + | |sourcecode= [[Media:customizing a guarana ui checkbox.zip]] [[Media:customizing a guarana ui checkbox.diff.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 21: | Line 24: | ||
|author= [[User:Tapla]] | |author= [[User:Tapla]] | ||
<!-- The following are not in current metadata --> | <!-- The following are not in current metadata --> | ||
| − | |||
|id= CS001551 | |id= CS001551 | ||
}} | }} | ||
| Line 27: | Line 29: | ||
==Overview== | ==Overview== | ||
| − | This | + | This snippet assumes that you are familiar with adding the checkbox component on a web page. For more information about this, read the snippet [[Adding a Guarana UI checkbox on a web page]]. You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT]]. |
| + | |||
| + | To replace the checkbox with your own version, first create the graphics that you want to use. After that, replace the file {{Icode|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: | ||
| + | [[File:Guarana checkbox default img.png|none]] | ||
| − | |||
| − | |||
To switch between these states when the checkbox is clicked, adjust the background picture with CSS classes as shown here: | To switch between these states when the checkbox is clicked, adjust the background picture with CSS classes as shown here: | ||
| Line 83: | Line 86: | ||
* 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]]. | * 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 general information on applying the patch, see [[Using Diffs]]. | ||
| − | * For unpatched stub applications, see [[Example | + | * For unpatched stub applications, see [[Example app stubs with logging framework]]. |
| − | + | ||
| − | + | ||
Latest revision as of 09:19, 5 October 2012
This code example demonstrates how to customise a Guarana UI checkbox.
Article Metadata
Code Example
Tested with
Article
Contents |
Overview
This snippet assumes that you are familiar with adding the checkbox component on a web page. For more information about this, read the snippet Adding a Guarana UI checkbox on a web page. You can download the component library from Guarana UI: a jQuery-Based UI Library for Nokia WRT.
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
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 app stubs with logging framework.
