×
Namespaces

Variants
Actions
Revision as of 02:52, 15 April 2010 by allanbezerra (Talk | contribs)

GuaranaUI View Object

From Nokia Developer Wiki
Jump to: navigation, search

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");
      },

      // Developer can put HTML Creation here
      renderUI: function() {

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

            Nokia.dom.append(this.getContainer(), this._title);
      },

      // Developer can put events binding here				
      bindUI: function() {

            this._title.click(function() {

                  alert('Clicked on Header');

            });
      },
      // Developer can put syncUI rules here									
      syncUI: function() {

            this._title.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 

 

74 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×