GuaranaUI View Object

Inheritance

Nokia.View 
    |- Nokia.Class (basic class)

1 - Description

Basec class to build views using GuaranaUI.

2 - Visual Design

Not Applicable for this Component.

3 - Component Dependencies

3.1 CSS

Not Applicable for this Component.

3.2 Javascript

<!-- 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>

4 - Functional Specifications/Requirements

4.1 - Options

• container: 'selector'
  • jQuery selector or the DOM reference to become the container of the component.

4.2 - Events - Callbacks

• show: function(arguments)
  • Scope: [this.element]
• hide: function(arguments)
  • Scope: [this.element]

4.3 - Methods

• init: function()
  • View initializer
  • return void
• fireCallback: function(type)
  • View Object function to call view callbacks
  • return void
• renderUI: function()
  • This defines renderUI function for the view. More details in view lifecycle.
  • return void
• renderUI: function()
  • This defines renderUI function for the view. More details in view lifecycle.
  • return void
• bindUI: function()
  • This defines bindUI function for the view. More details in view lifecycle.
  • return void
• syncUI: function()
  • This defines the syncUI function for the view. More details in view lifecycle.
  • return void
• setContainer: function()
  • This sets the view container.
  • return void
• getContainer: function()
  • This gets the view container.
  • return [jQuery Object]
• setTemplate: function()
  • This sets a template for the view.
  • return void
• getContainer: function()
  • This gets the template for the view.
  • return [jQuery collection]
• isRendered: function()
  • This returns true if view is already rendered.
  • return boolean
• show: function()
  • This defines the show function for the view. More details in view lifecycle.
  • return void
• hide: function()
  • This defines the hide function for the view. More details in view lifecycle.
  • return void
• hide: function()
  • This defines the hide function for the view. More details in view lifecycle.
  • return void
• destroy: function()
  • This defines the destroy function for the view
  • return void

4.4 - Default options

Not Applicable for this Component.

5 - Component Demo

5.1 HTML

<div id="myview"></div>

5.2 Javascript

/*
* User Impl
* - First View 	
*/ 
		
var myFirstView = Nokia.View.extend({
      /*
       * Lifecycle
       */
      init: function() {
            alert("initialize FirstView view");
      },

      renderUI: function() {

            this._title = Nokia.dom.parseHTML('<span>Forum Nokia</span>');

            Nokia.dom.append(this.getContainer(), this._title);
      },
				
      bindUI: function() {

            this._title.click(function() {

                  alert('Clicked on Header');

            });
      },
					
      syncUI: function() {

            this._viewHeader.css('color', 'red');

      },
					
      show: function() {

            alert('show FirstView');

      }
});

6 - Nokia WRT Browser Compatibility

 

▴	S60 3.1	S60 3.2	S60 5.0
Accordion	YES	YES	YES