×
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 - Fix metadata)
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Abstract. Tidy wiki text)
 
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]]
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 84: Line 87:
 
* 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 app stubs with logging framework]].
 
* 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.
123 page views in the last 30 days.
×