This posts describes how to start the development using GuaranaUI Framework.

The developer can download two version of GuaranaUI. In the full package, build process is necessary. This ant based build system is very flexible, the user can select one of 6 themes available for 2 diferent resolutions. One more easy way is to get the built version, prepared for 360x640 resolution with default green theme.

 1. Copy need files

You must copy lib and themes folders for your widget.

 2. Guarana UI PATH Settings

Two paths must be setted in your javascript code:

- NOKIA_PATH_JAVASCRIPT = 'lib/'; 

- NOKIA_PATH_STYLE_ROOT = 'themes/nokia/base/'; 

 3. Include dependencies

- CSS

  <link rel='stylesheet' href='themes/themeroller/default-theme/Themeroller.css' type='text/css' media='screen'>

  <link rel='stylesheet' href='themes/nokia/ext-theme/default/360x640/custom.css' type='text/css' media='screen'>

- JAVASCRIPT

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

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

4. Component creation (for Rating Component)

Nokia.use('rating', function(){

var rating = new Nokia.Rating({

element: '#rating01',

value: 2

});

  }); 

A complete starting example is available here. 

-- Allan Bezerra