Revision as of 10:38, 23 July 2012 by hamishwillee (Talk | contribs)

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


From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Created: User:Kbwiki (10 Nov 2009)
Last edited: hamishwillee (23 Jul 2012)


The WRT Framework Quick Start

In this section we describe how you can use Guarana UI in our widget. The started point can be checking out the demos. In the demo folder we have an example of each component. The examples are very simples and shows dependencies, component html and how can you create a component. In the next section we will describe in details necessary steps.

Five Steps To Use WRT Framework

To start the development using the Guarana UI, basically you need to follow the 5 steps bellow:

0. Build and Copy Guarana Files to your Widget

The first thing to use the WRT Framework in your Widget is to build. Please, take a look in the GuaranaUI Overview Section for more information about the Framework Structure and Build System. An option it get the Build version. After it, copy the necessary files to your widget:

  • lib folder: jQuery Library and Guarana javascript files
  • theme folder: Themeroller and Guarana CSS files

1. Include CSS Dependencies

You need to include CSS dependencies for the components. Every component has two common CSS dependencies files: /themes/themeroller/<theme>/Themeroller.css and //themes/nokia/ext-theme/<theme>/<resolution>/custom.css. The first one is the main Themeroller Theme and the Second one is the specific theme-resolution CSS. The order that the CSS files need to be included is:

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

This theme path depends with theme you are using. The default theme is the Green theme applied for 360x640 resolution. If you would like to use diferent theme/resolution you need to define it during the build process. For example, if you like to use the red theme in 240x360 screen, the /themes/nokia/ext-theme/red/240x360/custom.css need to be included. This file includes all adjustment necessary to use the WRT Framework in this situation.

You can also visit the GuaranaUI-Overview Section in order to check the WRT Framework CSS architecture. If you do not know what CSS is, please visit W3C Website.

2. Include Javascript Dependencies

You need to include Javascript dependencies for the components. Every component has two common javascript dependencies files: jQuery.js and Guarana.js. The first one is the jQuery library and the Second one is the core file from Guarana UI. These files can be found in the lib folder and need to be included in your widget:

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

You can also visit the GuaranaUI Overview Section in order to check the Javascript Architecture.

3. Include the Component minimal HTML

You need also to include the minimal HTML for the component. This in only to anchor the UI component in the HTML. You can find the necessary html in the component documentation page. For example for the Rating, as showed in component documentation page, the needed html is:

<div id="rating01"></div>

In this html we have only a div with the id that we will use to refer the component. All other things like component behavior and style will be provided by Guarana UI. In next subtopic we will talk more about create the component over this static information (html).

4. Create the Component in your Javascript Code

After include all dependencies, CSS and Javascript, and put the minimal html for the component it is time to create the component. The Guarana UI is strongly object oriented and you can easily create a UI element calling the component constructor:

     MyComponent = new Nokia.Component({ // Component must be replaced by component name
// Component Constructor Options
// Components Callbacks

When you are creating a component two importants points need to be observed:

  • Options: The component constructor has options that the developer can use. Theses options indicates component peculiarities. For example, the only mandatory options is the element, which defines the DOM element where the component will be created. The default values are used when the options are omitted in the component constructor.
  • Callbacks: The second point to be detailed is callback functions. Every important interaction event in the components is mapped in a callback function. This is a very important feature to execute actions after interactions.

Please, take a look in the specific component documentation page to check the list of options available, the defaults values and the callbacks available for each component. In the next topic we will show a complete example of the rating component uses.

A Complete Example of Rating Component Uses

The 5 Steps to use WRT Framework Rating Component in your widget:

0. Build and Copy WRT Framework Files to your Widget

$ cd build 
// Building Guarana for Default Theme using 360x640 resolution
$ ant (Apache Ant Tool must be configured)
// Guarana folder will be created in build folder
// After it, copy lib and theme folder to your widget

1. Include CSS Dependencies

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/default-theme/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen">

2. Include Javascript Dependencies

<script src="/lib/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

3. Include the Component minimal HTML

<div id="rating01"></div>

4. Create the Component in your Javascript Code

* Set library base path
NOKIA_PATH_STYLE_ROOT = 'css/themes/nokia/base/';
Nokia.use('rating', function(){
var rating1 = new Nokia.Rating({
element: '#rating01',
value: 2,
create: function() {
alert('rating created');
change: function(event, value) {
alert('rating change');
} );

5. Full Example

Click here to download this full demo.


6. Packaging and Deploy

You can find packaging and deploy information available in the Nokia Developer Website.


This page was last modified on 23 July 2012, at 10:38.
78 page views in the last 30 days.