×
Namespaces

Variants
Actions
(Difference between revisions)

GuaranaUI View Object

From Nokia Developer Wiki
Jump to: navigation, search
allanbezerra (Talk | contribs)
(Including View Methods)
allanbezerra (Talk | contribs)
(Including html and css code example)
Line 102: Line 102:
 
   
 
   
 
<pre>
 
<pre>
<div id="accordion">
+
<div id="myview"></div>
    <h3><a href="">Section 1</a></h3>
+
    <div>
+
          <p>
+
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
+
          </p>
+
    </div>
+
    <h3><a href="">Section 2</a></h3>
+
    <div>
+
          <p>
+
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
+
          </p>
+
    </div>
+
    <h3><a href="">Section 3</a></h3>
+
    <div>
+
          <p>
+
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
+
          </p>
+
    </div>
+
 
+
</div>
+
 
</pre>
 
</pre>
 
   
 
   
Line 128: Line 108:
 
   
 
   
 
<pre>
 
<pre>
var accordion = new Nokia.Accordion({
+
/*
    element: '#accordion',
+
* User Impl
    collapsible: true,
+
* - First View
    multiple: false,
+
*/
    closed: true,
+
    toggle: function(event, header, content) {
+
var myFirstView = Nokia.View.extend({
          //alert('Accordion: Toggle', event, header, content, this.element);
+
      /*
    },
+
      * Lifecycle
    create: function() {
+
      */
          //alert("Accordion: Start");
+
      init: function() {
    },
+
            alert("initialize FirstView view");
    open: function(event, header, content) {
+
      },
          //alert('Accordion: Open', event, header, content, this.element);
+
 
    },
+
      renderUI: function() {
    close: function(event, header, content) {
+
 
          //alert('Accordion: Close', event, header, content, this.element);
+
            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');
 +
 
 +
      }
 
});
 
});
 
</pre>  
 
</pre>  

Revision as of 02:47, 15 April 2010

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 

 

101 page views in the last 30 days.
×