Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.


From Wiki
Jump to: navigation, search
Article Metadata
Created: User:Kbwiki (11 Nov 2009)
Last edited: hamishwillee (23 Jul 2012)


The Guarana UI Overview

In this section we make general overview about WRT Framework. We describe the Library Structure, the Build System and the Javascript and CSS architecture.

Main Features

The main features available in Guarana UI:


The Framework Structure


Build (build folder)

This folder is the Guarana Build System. We will talk more about it in the next section.

Components Demos (demos folder)

This folder include demos for the UI components. We have a demo for each Guarana component.

JQuery files (lib folder)

This folder includes JQuery Files used by Guarana. The JQuery version used is 1.2.6. This version is the most compatible version thats works stable in S60 devices.

Core files (src folder)

This folder includes all javascript core files. Here we have library core files and components implementation files. Additionally we have a sub-folder called i18n that has information about components internationalization. In the current version, the only that have internationalization is Date component.

Themes (themes folder)

This folders includes all CSS files used by WRT Framework. The two sub-folders presented are described bellow:

a) themeroller: This is the jQuery UI CSS Framework used by Framework. More information about Themeroller is available here.

b) nokia: This is the nokia base. Here we have component CSS base for Guarana UI. The default base CSS is designed for 360x640 resolution with Nokia Green Theme. Everything different from this, i.e. 240x320 resolutions or other theme, need to be implemented as an nokia base extension.

The Guarana Build System

The library has an automated build system that makes packaging process easy and fast. This optimized the production version concatenating and minifying all CSS and javascript files in a single one file. After this we have a minimized and simplified version for the Framework. To build Guarana, use the following commands. An important point is that the Apache Ant Tool must be configured:

$ cd build
$ ant

The build output is a folder Guarana in the build foldere, the structure is detailed:


  • This includes a demo for each component available in the Framework.


  • This file includes all javascript componentes implementation and jQuery.


  • The Themeroller CSS Theme, according the theme setted in the build.


  • The Nokia base CSS File. The default base CSS is designed for 360x640 resolution with Nokia Green Theme. Everything different from this, i.e. 240x320 resolutions or other theme need to be implemented as an nokia base extension. We will talk more about it in next item.


  • custom.css: Here we have a extension for a specific theme and resolution. For example if you are building a library version for Red theme and 240x320 resolution, we will have the CSS adjustiments for this theme and resolution here.

Our build system allows generate a wgz demo package for each component available. This is a good way to see the components demo working on devices. To generate this use the following comand:

$ cd build
$ ant -Dplist.component=<component_name>

For example, to generate demo for rating component, you must type:

$ ant -Dplist.component=rating // For rating component

This will generate a wgz package in build/Guarana.wgz with demos/rating/sample_rating.html as MainHTML.

Additionally, the default configuration for the framework is 360x640 resolution using Nokia Green Theme. Developer can build library versions for others resolutions and themes available. To generate this use the following command:

$ cd build
$ ant -Dresolution=<resolution> -Dtheme=<theme>

The resolution available in this version is 360x640, used by N97 and 5800 for example, and 240x320, very common resolution for non-touch devices. The themes supported at this time is the default green theme and red, this one only available for 360x640. We will have more themes supported in next release.

For example, to generate the red theme version for N97 device (360x640), you must type:

$ cd build
$ ant -Dresolution=360x640 -Dtheme=red

Additionally, developer can build a customized version including only a set of components. For example, to generate a custom version including only accordion and button components, you must type:

$ cd build
$ ant -Dcomponents=accordion_button

IMPORTANT! After the build process, please copy lib and themes folders to your widget.

In the following sections we will talk more about WRT Framework Internals.

WRT Framework - Compatibility Matrix with Nokia S60 Versions












This page was last modified on 23 July 2012, at 07:55.
48 page views in the last 30 days.