×
Namespaces

Variants
Actions
(Difference between revisions)

Customising a Guarana UI checkbox

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:customizing a guarana ui checkbox.zip]] [[Media:customizing a guarana ui checkbox.diff.zip]]  
{{KBCS}}
+
{{ArticleMetaData
+
|id=CS001551
+
|platform=
+
|devices=Nokia 5800 XpressMusic
+
|category=Web Runtime (WRT)
+
|subcategory=Guarana UI, UI
+
|creationdate=December 30, 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= CS001551
 
}}
 
}}
  
 
==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 [[CS001548 - Adding a Guarana UI checkbox on a web page]].
+
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]].
  
To replace the checkbox with your own version, first create the graphics that you want to use. After that, replace the file <tt>themes/nokia/base/images/checkbox.png</tt> 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 />
+
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 />
+
[[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 34: Line 39:
 
</code>
 
</code>
  
This means that you must customise the CSS file <tt>themes/nokia/base/images/checkbox.css</tt> so that it corresponds to your own image file. For example, if you have created this file:<br />
+
This means that you must customise the CSS file {{Icode|themes/nokia/base/images/checkbox.css}} so that it corresponds to your own image file. For example, if you have created this file:<br />
[[File:Guarana_checkbox_custom_img.png]]<br />
+
[[File:Guarana checkbox custom img.png]]<br />
 
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:
 
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:
  
Line 69: Line 74:
 
==See also==
 
==See also==
  
* [[CS001548 - Adding a Guarana UI checkbox on a web page]]
+
* [[Adding a Guarana UI checkbox on a web page]]
  
 
==Supplementary material==
 
==Supplementary material==
Line 75: Line 80:
 
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:customizing_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: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]].
+
* 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 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
Article
Created: tapla (27 Nov 2009)
Last edited: hamishwillee (10 May 2012)

Contents

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 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:
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;
}

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.

125 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×