(Difference between revisions)

Adding a Guarana UI button on a web page

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Abstract. Tidy wiki text)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix typo)
Line 22: Line 22:
|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= CS001547
|id= CS001547
Line 28: Line 27:
{{Abstract|This code snippet demonstrates how to add a button on a web page using Guarana UI components. The button component looks like this:
{{Abstract|This code snippet demonstrates how to add a button on a web page using Guarana UI components.}} The button component looks like this:
[[File:Guarana button icon.jpg|none]]
[[File:Guarana button icon.jpg|none]]
You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT]].
You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT]].

Latest revision as of 08:55, 5 October 2012

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


[edit] Overview

This code snippet demonstrates how to add a button on a web page using Guarana UI components. The button component looks like this:

Guarana button icon.jpg

You can download the component library from Guarana UI: a jQuery-Based UI Library for Nokia WRT.

[edit] Source: Relevant HTML components

<!-- Guarana UI style sheets -->
<link rel="stylesheet"
type="text/css" media="screen">
<!-- Guarana UI scripts -->
<script type="text/javascript" src="lib/jquery/jquery.js"
<script type="text/javascript" src="lib/guarana/defaults.js"
<script type="text/javascript" src="lib/guarana/core.js"
<div id="bodyContent" class="bodyContent">
<!-- A regular push button -->
<span id="btnPush"></span>
<!-- A toggle button -->
<span id="btnToggle"></span>

[edit] Source: JavaScript

Nokia.use("button", init);
// Initializes the widget
function init() {
window.btnPush = new Nokia.Button({
element: "#btnPush",
label: "Push me!",
click: function() { printString("Thank You!"); }

To disable the button, call the disable() function:

// Disable the push button

To create a toggle button, use the keeppressed attribute:

// Initializes the widget
function init() {
window.btnToggle = new Nokia.Button({
element: "#btnToggle",
keeppressed: true,
label: "Pressed",
pressed: true,
width: 90,
press: function() {
unpress: function() {

The press() and unpress() functions above are called when the button is toggled and untoggled, respectively. The constant width attribute ensures that the width of the button does not change when its label is changed.

Note: The button component requires the following files from the library:

  • lib/jquery/jquery.js
  • src/core.js
  • src/defaults.js
  • src/dom.js (implicitly loaded by core.js)
  • src/util.js (implicitly loaded by core.js)
  • src/device.js (implicitly loaded by core.js)
  • src/animation.js (implicitly loaded by core.js)
  • src/widget.js (implicitly loaded by core.js)
  • src/button.js (implicitly loaded by core.js)
  • themes/nokia/base/base.css (implicitly loaded by core.js)
  • themes/nokia/base/button.css (implicitly loaded by core.js)
  • themes/nokia/base/images/shadow.png (from base.css)
  • themes/nokia/base/images/shadow-c.png (from base.css)
  • themes/nokia/base/images/shadow-lr.png (from base.css)
  • themes/themeroller/default-theme/ui.accordion.css
  • themes/themeroller/default-theme/ui.all.css
  • themes/themeroller/default-theme/ui.base.css
  • themes/themeroller/default-theme/ui.core.css
  • themes/themeroller/default-theme/ui.theme.css
  • themes/themeroller/default-theme/images/ui-bg_diagonals-thick_10_444444_40x40.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_flat_0_000000_40x100.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_20_9f1504_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_40_8ab61c_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_55_8ab61c_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_100_c2cba5_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_highlight-hard_80_ededed_640x100.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_highlight-soft_100_ededed_640x100.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_89bf43_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_97B72B_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_222222_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_e3bfb5_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_ffffff_256x240.png (from ui.theme.css)

[edit] Postconditions

A Guarana UI button is added on the web page. When it is clicked, a string is displayed on the screen.

[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 08:55.
118 page views in the last 30 days.