×
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 

 

82 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.

×