×
Namespaces

Variants
Actions
(Difference between revisions)

Customising a Guarana UI checkbox

From Nokia Developer Wiki
Jump to: navigation, search
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 -->
|subcategory= Guarana UI, UI
 
 
|id= CS001551
 
|id= CS001551
 
}}
 
}}
Line 27: Line 29:
 
==Overview==
 
==Overview==
  
This code snippet demonstrates how to customise a Guarana UI checkbox. You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT|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 [[Adding a Guarana UI checkbox on a web page]].
+
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 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:<br />
 
[[File:Guarana checkbox default img.png]]<br />
 
 
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 stub]].
+
* For unpatched stub applications, see [[Example app stubs with logging framework]].
 
+
[[Category:Symbian]][[Category:Guarana UI]][[Category:Code Examples]][[Category:Code Snippet]]
+

Latest revision as of 09:19, 5 October 2012

This code example demonstrates how to customise a Guarana UI checkbox.

Article Metadata
Code ExampleTested with
Devices(s): Nokia 5800 XpressMusic
Article
Created: tapla (27 Nov 2009)
Last edited: hamishwillee (05 Oct 2012)

Contents

[edit] 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:

Guarana checkbox default img.png

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:
Guarana checkbox custom img.png
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;
}

[edit] Postconditions

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

[edit] See also

[edit] 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.

This page was last modified on 5 October 2012, at 09:19.
112 page views in the last 30 days.
×