×
Namespaces

Variants
Actions
Revision as of 09:25, 5 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Adding a Guarana UI carousel on a web page

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleTested with
Devices(s): Nokia 5800 XpressMusic
CompatibilityArticle
Created: tapla (04 Dec 2009)
Last edited: hamishwillee (05 Oct 2012)

Contents

Overview

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

Guarana carousel icon.jpg

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

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/jquery/jquery.scrollTo.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">
<ul id="carousel">
<li><img src="gfx/carousel01.jpg"/></li>
<li><img src="gfx/carousel02.jpg"/></li>
<li><img src="gfx/carousel03.jpg"/></li>
<li><img src="gfx/carousel04.jpg"/></li>
<li><img src="gfx/carousel05.jpg"/></li>
<li><img src="gfx/carousel01.jpg"/></li>
<li><img src="gfx/carousel04.jpg"/></li>
<li><img src="gfx/carousel05.jpg"/></li>
<li><img src="gfx/carousel02.jpg"/></li>
<li><img src="gfx/carousel03.jpg"/></li>
</ul>
</div>
</body>

Source: JavaScript

Nokia.use("carousel", init);
 
// Initializes the widget
function init() {
var carousel = new Nokia.Carousel({
element: "#carousel",
visibleItems: 4,
width: 400,
delay: 150,
select: function() {
alert("Clicked");
}
});
}

The visibleItems attribute defines how many items inside the carousel component are visible at a time. The delay attribute specifies the time (in milliseconds) used in the transition effect when the carousel is spinned. If you don't want a transition effect, set the applyTransition attribute to false. The select attribute defines a function which is called when a particular item is selected.

In addition to the JavaScript code above, you may need to edit the defaults.js file in the Guarana UI library. It contains the paths to the source and style directories:

window.NOKIA_PATH_BASE = '../../';
window.NOKIA_PATH_JAVASCRIPT = NOKIA_PATH_BASE + 'src/';
window.NOKIA_PATH_STYLE_ROOT = NOKIA_PATH_BASE + 'themes/nokia/base/';

Change the paths to reflect your system, if necessary. For example:

window.NOKIA_PATH_BASE = './';
window.NOKIA_PATH_JAVASCRIPT = NOKIA_PATH_BASE + 'lib/guarana/';
window.NOKIA_PATH_STYLE_ROOT = NOKIA_PATH_BASE + 'style/themes/nokia/base/';

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

  • lib/jquery/jquery.js
  • lib/jquery/jquery.scrollTo.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/carousel.js (implicitly loaded by core.js)
  • themes/nokia/base/base.css (implicitly loaded by core.js)
  • themes/nokia/base/carousel.css (implicitly loaded by core.js)
  • themes/nokia/base/images/arrow-left.png
  • themes/nokia/base/images/arrow-right.png
  • 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)

Postconditions

A Guarana UI carousel is added on the web page. When an item inside the carousel component is selected, the text Clicked is shown.

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.

This page was last modified on 5 October 2012, at 09:25.
124 page views in the last 30 days.
×