×
Namespaces

Variants
Actions
(Difference between revisions)

Adding a Guarana UI button on a web page

From Nokia Developer Wiki
Jump to: navigation, search
tapla (Talk | contribs)
(Created page with '__NOTOC__ __NOEDITSECTION__ {{CodeSnippet |id=  |platform= |devices=Nokia N97 |category=Web Runtime (WRT) |subcategory=Guarana UI, UI |creationdate=November 23, 2009 |keywor…')
 
tapla (Talk | contribs)
Line 13: Line 13:
 
==Overview==
 
==Overview==
  
This code snippet demonstrates how to add a button on a web page using Guarana UI components. You can download the component library from [http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT Forum Nokia]. The button component requires the following files from the library:
+
This code snippet demonstrates how to add a button on a web page using Guarana UI components. The button component looks like this:<br/>
 +
[[File:Guarana_button_icon.jpg]]<br/>
 +
You can download the component library from [http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT Forum Nokia]. The button component requires the following files from the library:
  
 
* lib/jquery/jquery.js
 
* lib/jquery/jquery.js

Revision as of 17:13, 23 November 2009


Article Metadata
Tested with
Devices(s): Nokia N97
Compatibility
Platform(s):
Symbian
Article
Created: (23 Nov 2009)
Last edited: tapla (23 Nov 2009)

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 Forum Nokia. The button component requires the following files from the library:

  • lib/jquery/jquery.js
  • src/core.js
  • src/defaults.js
  • src/dom.js
  • src/util.js
  • src/widget.js
  • src/button.js
  • themes/nokia/base/base.css
  • themes/nokia/base/button.css
  • themes/nokia/base/custom.css
  • 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_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)

Source: Relevant HTML components

<head>
<!-- JS4WRT style sheets -->
<link rel="stylesheet" href="style/themes/nokia/base.css" type="text/css" media="screen">
<link rel="stylesheet" href="style/themes/nokia/button.css" type="text/css" media="screen">
<link rel="stylesheet" href="style/themes/custom-theme/ui.all.css" type="text/css" media="screen">
 
<!-- JS4WRT scripts -->
<script type="text/javascript" src="lib/jquery/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/js4wrt/core.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/js4wrt/dom.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/js4wrt/util.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/js4wrt/widget.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/js4wrt/button.js" charset="utf-8"></script>
</head>
<body>
<div id="bodyContent" class="bodyContent">
<!-- A regular push button -->
<span id="btnPush"></span>
<!-- A toggle button -->
<span id="btnToggle"></span>
</div>
</body>

Source: JavaScript

// 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
window.btnPush.disable();

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() {
this.setLabel("Pressed");
},
unpress: function() {
this.setLabel("Unpressed");
}
});
}

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 is not changed when its label is changed.

Postconditions

A Guarana UI button is added on the web page.

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.

122 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.

×