×
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…')
 
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix typo)
 
(19 intermediate revisions by 4 users not shown)
Line 1: Line 1:
__NOTOC__
+
[[Category:Symbian]][[Category:Guarana UI]][[Category:Code Examples]]
__NOEDITSECTION__
+
{{ArticleMetaData <!-- v1.2 -->
{{CodeSnippet
+
|sourcecode= [[Media:adding a guarana ui button.diff.zip]] [[Media:adding a guarana ui button.zip]]
|id=&nbsp;
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|platform=
+
|devices= Nokia N97, Nokia 5800 XpressMusic
|devices=Nokia N97
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|category=Web Runtime (WRT)
+
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|subcategory=Guarana UI, UI
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
|creationdate=November 23, 2009
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|keywords=
+
|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= 20091123
 +
|author= [[User:Tapla]]
 +
<!-- The following are not in current metadata -->
 +
|id= CS001547
 
}}
 
}}
  
 
==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:
+
{{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]]
* lib/jquery/jquery.js
+
You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT]].
* 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==
 
==Source: Relevant HTML components==
Line 50: Line 35:
 
<code xml>
 
<code xml>
 
<head>
 
<head>
     <!-- JS4WRT style sheets -->
+
     <!-- Guarana UI style sheets -->
     <link rel="stylesheet" href="style/themes/nokia/base.css" type="text/css" media="screen">
+
     <link rel="stylesheet"
    <link rel="stylesheet" href="style/themes/nokia/button.css" type="text/css" media="screen">
+
        href="style/themes/themeroller/default-theme/ui.all.css"
    <link rel="stylesheet" href="style/themes/custom-theme/ui.all.css" type="text/css" media="screen">
+
        type="text/css" media="screen">
  
     <!-- JS4WRT scripts -->
+
     <!-- Guarana UI scripts -->
     <script type="text/javascript" src="lib/jquery/jquery.js" charset="utf-8"></script>
+
     <script type="text/javascript" src="lib/jquery/jquery.js"
    <script type="text/javascript" src="lib/js4wrt/core.js" charset="utf-8"></script>
+
        charset="utf-8"></script>
     <script type="text/javascript" src="lib/js4wrt/dom.js" charset="utf-8"></script>
+
     <script type="text/javascript" src="lib/guarana/defaults.js"
    <script type="text/javascript" src="lib/js4wrt/util.js" charset="utf-8"></script>
+
        charset="utf-8"></script>
     <script type="text/javascript" src="lib/js4wrt/widget.js" charset="utf-8"></script>
+
     <script type="text/javascript" src="lib/guarana/core.js"
    <script type="text/javascript" src="lib/js4wrt/button.js" charset="utf-8"></script>
+
        charset="utf-8"></script>
 
</head>
 
</head>
 
<body>
 
<body>
Line 76: Line 61:
  
 
<code javascript>
 
<code javascript>
 +
Nokia.use("button", init);
 +
 
// Initializes the widget
 
// Initializes the widget
 
function init() {
 
function init() {
Line 86: Line 73:
 
</code>
 
</code>
  
To disable the button, call the <tt>disable()</tt> function:
+
To disable the button, call the {{Icode|disable()}} function:
  
 
<code javascript>
 
<code javascript>
Line 93: Line 80:
 
</code>
 
</code>
  
To create a toggle button, use the <tt>keeppressed</tt> attribute:
+
To create a toggle button, use the {{Icode|keeppressed}} attribute:
  
 
<code javascript>
 
<code javascript>
Line 114: Line 101:
 
</code>
 
</code>
  
The <tt>press()</tt> and <tt>unpress()</tt> functions above are called when the button is toggled and untoggled, respectively. The constant <tt>width</tt> attribute ensures that the width of the button is not changed when its label is changed.
+
The {{Icode|press()}} and {{Icode|unpress()}} functions above are called when the button is toggled and untoggled, respectively. The constant {{Icode|width}} attribute ensures that the width of the button does not change when its label is changed.
  
==Postconditions==
+
'''Note''': The button component requires the following files from the library:
  
A Guarana UI button is added on the web page.
+
* 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)
  
==See also==
+
==Postconditions==
  
* [[Customizing a Guarana UI button]]
+
A Guarana UI button is added on the web page. When it is clicked, a string is displayed on the screen.
  
 
==Supplementary material==
 
==Supplementary material==
Line 128: Line 146:
 
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:adding_a_guarana_ui_button.zip]].
+
* The patched, executable application that can be used to test the features described in this snippet is available for download at [[Media:adding a guarana ui button.zip]].
* You can view all the changes that are required to implement the above-mentioned features. The changes are provided in unified diff and colour-coded diff (HTML) formats in [[Media:adding_a_guarana_ui_button.diff.zip]].
+
* You can view all the changes that are required to implement the above-mentioned features. The changes are provided in unified diff and colour-coded diff (HTML) formats in [[Media:adding a guarana ui button.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:Web Runtime (WRT)]][[Category:Guarana UI]][[Category:Code Examples]]
+

Latest revision as of 08:55, 5 October 2012

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

Contents

[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

<head>
<!-- Guarana UI style sheets -->
<link rel="stylesheet"
href="style/themes/themeroller/default-theme/ui.all.css"
type="text/css" media="screen">
 
<!-- Guarana UI scripts -->
<script type="text/javascript" src="lib/jquery/jquery.js"
charset="utf-8"></script>
<script type="text/javascript" src="lib/guarana/defaults.js"
charset="utf-8"></script>
<script type="text/javascript" src="lib/guarana/core.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>

[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
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 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.
171 page views in the last 30 days.
×