×
Namespaces

Variants
Actions
(Difference between revisions)

GuaranaUI View Object

From Nokia Developer Wiki
Jump to: navigation, search
allanbezerra (Talk | contribs)
(Page structure for GuaranaUI View Object)
 
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix ArticleMetaData)
 
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
__NOTOC__
+
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20100414
 +
|author= [[User:Allanbezerra]]
 +
}}
 +
[[Category:Guarana UI]]
 +
see article [[GuaranaUI-Overview]] for the overview
 
<h1>Inheritance</h1>
 
<h1>Inheritance</h1>
  
Line 9: Line 32:
 
=1 - Description=
 
=1 - Description=
  
Basec class to build views using GuaranaUI.
+
Basic class to build views using GuaranaUI.
  
 
=2 - Visual Design=
 
=2 - Visual Design=
Line 31: Line 54:
  
 
=4 - Functional Specifications/Requirements=
 
=4 - Functional Specifications/Requirements=
 
  
 
==4.1 - Options==
 
==4.1 - Options==
 
  
*element: 'selector'  
+
*container: 'selector'  
 
**jQuery selector or the DOM reference to become the container of the component.  
 
**jQuery selector or the DOM reference to become the container of the component.  
*collapsible: boolean
 
**Defines whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).
 
*multiple: boolean
 
**Allow multiple sections openend (like a panel).
 
*closed: boolean
 
**Render the component with all sections closed.
 
*header
 
**Selector for the header element.
 
*Icons
 
**Icons to use for headers. Icons may be specified for '''header''' and '''headerSelected''', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by the [http://www.themeroller.com jQuery UI ThemeRoller.]
 
  
 
==4.2 - Events - Callbacks==
 
==4.2 - Events - Callbacks==
  
*create: function()  
+
*show: function(arguments)
 
**Scope: [this.element]  
 
**Scope: [this.element]  
*toggle: function(event, header, content)  
+
*hide: function(arguments)  
**Scope: [this.element]  
+
**Scope: [this.element]   
*open: function(event, header, content)
+
**Scope: [this.element]
+
*close: function(event, header, content)
+
**Scope: [this.element]
+
   
+
  
 
==4.3 - Methods==
 
==4.3 - Methods==
+
 
*toggle: function(index, event)  
+
*init: function()  
**Closes all opened sections of the accordion
+
**View initializer
 
**return void  
 
**return void  
*closeAll: function()  
+
*fireCallback: function(type)  
**Closes all opened sections of the accordion
+
**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 
 +
*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]  
 
**return [jQuery collection]  
*getActiveContents: function()  
+
*isRendered: function()  
**Returns a jQuery collection of all opened/active accordion contents
+
**This returns true if view is already rendered.
**return [jQuery collection]
+
**return boolean
*getActiveHeaders: function()  
+
*show: function()  
**Returns a jQuery collection of all opened/active accordion headers
+
**This defines the show function for the view. More details in view lifecycle.
**return [jQuery collection]
+
**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==
 
==4.4 - Default options==
*event: 'click'
 
*header: '> li > :first-child,> :not(li):even'
 
*icons: { header: "ui-icon-triangle-1-e", headerSelected: "ui-icon-triangle-1-s" }
 
*multiple: true
 
*collapsible: true
 
*closed: false
 
 
  
=5 - Component Demo=
+
Not Applicable for this Component.
+
 
 +
=5 - The Guarana View Lifecycle=
 +
 
 +
The Guarana UI has a lifecycle approach for views objects.
 +
 
 +
 
 +
Guarana View Class provides a renderer method implementation, for each view this need to be over-ridden. This render method is shown below:
  
==5.1 HTML==
 
 
 
<pre>
 
<pre>
<div id="accordion">
+
render: function() {
    <h3><a href="">Section 1</a></h3>
+
    this.renderUI();
    <div>
+
    this.bindUI();
          <p>
+
    this.syncUI();
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
+
}
          </p>
+
</pre>
    </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>
+
The renderUI, bindUI and syncUI are abstract (empty) methods in the view class. The intended role of each of these methods is described below, and most widgets will simply implement these methods based on their expected roles:
 +
* '''renderUI''': This method is responsible for creating and adding the HTML nodes which the view needs. It is usually the point at which the DOM is first modified by the view.
 +
* '''bindUI''': This method is responsible for attaching event listeners which bind the UI to the view.
 +
* '''syncUI''': This method is responsible for synchronizing the state of the UI based on the current state of the view.
 +
 
 +
=6 - Component Demo=
 +
 +
==6.1 HTML==
 +
 +
<pre>
 +
<div id="myview"></div>
 
</pre>
 
</pre>
 
   
 
   
Line 118: Line 147:
 
   
 
   
 
<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);
+
 
    },
+
      // Developer can put HTML Creation here
    close: function(event, header, content) {
+
      renderUI: function() {
          //alert('Accordion: Close', event, header, content, this.element);
+
 
    }
+
            this._title = Nokia.dom.parseHTML('<span>Nokia Developer</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');
 +
 
 +
      }
 
});
 
});
</pre>
 
  
+
//Creating and rendering the view
  
=6 - Nokia WRT Browser Compatibility=
+
var firstView = new myFirstView ({
 +
      container: '#myview'
 +
});
  
 +
firstView.render();
  
<p>&nbsp;</p>
+
</pre>
<table cellspacing="1" cellpadding="1" align="left" width="300" class="pbNotSortable" style="border: 1px dotted rgb(211, 211, 211); margin: 0px; padding: 0px; font-size: 100%; vertical-align: baseline; font-family: inherit; border-collapse: collapse;">
+
        <tr style="border-width: 0px; margin: 0px; padding: 0px; font-size: 100%; vertical-align: baseline; font-family: inherit;">
+
<td class="sorttable_sorted_reverse" style="border: 1px dotted rgb(211, 211, 211); margin: 0px; padding: 2px 4px; font-weight: 400; font-size: 100%; vertical-align: baseline; font-family: inherit; background-color: rgb(255, 255, 255); text-align: left;"><span id="sorttable_sortrevind" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 100%; float: left; vertical-align: baseline; font-family: inherit;">▴&nbsp;</span>&nbsp;</td>
+
<td style="border: 1px dotted rgb(211, 211, 211); margin: 0px; padding: 2px 4px; font-weight: 400; font-size: 100%; vertical-align: baseline; font-family: inherit; background-color: rgb(255, 255, 255); text-align: left;"><strong>S60 3.1</strong></td>
+
<td style="border: 1px dotted rgb(211, 211, 211); margin: 0px; padding: 2px 4px; font-weight: 400; font-size: 100%; vertical-align: baseline; font-family: inherit; background-color: rgb(255, 255, 255); text-align: left;"><strong>S60 3.2</strong></td>
+
<td style="border: 1px dotted rgb(211, 211, 211); margin: 0px; padding: 2px 4px; font-weight: 400; font-size: 100%; vertical-align: baseline; font-family: inherit; background-color: rgb(255, 255, 255); text-align: left;"><strong>S60 5.0</strong></td>
+
</tr>
+
<tr style="border-width: 0px; margin: 0px; padding: 0px; font-size: 100%; vertical-align: baseline; font-family: inherit;">
+
<td style="border: 1px dotted rgb(211, 211, 211); margin: 0px; padding: 2px 4px; font-weight: 400; font-size: 100%; vertical-align: baseline; font-family: inherit; background-color: rgb(255, 255, 255); text-align: left;">Accordion</td>
+
<td bgcolor="#000000" style="border: 1px dotted rgb(211, 211, 211); margin: 0px; padding: 2px 4px; font-weight: 400; font-size: 100%; vertical-align: baseline; font-family: inherit; background-color: rgb(255, 255, 255); text-align: left;"><span style="border-width: 0px; margin: 0px; padding: 0px; font-size: 100%; vertical-align: baseline; color: rgb(51, 153, 102); font-family: inherit;">YES&nbsp;</span></td>
+
<td bgcolor="#000000" style="border: 1px dotted rgb(211, 211, 211); margin: 0px; padding: 2px 4px; font-weight: 400; font-size: 100%; vertical-align: baseline; font-family: inherit; background-color: rgb(255, 255, 255); text-align: left;"><span style="border-width: 0px; margin: 0px; padding: 0px; font-size: 100%; vertical-align: baseline; color: rgb(51, 153, 102); font-family: inherit;">YES&nbsp;</span></td>
+
<td bgcolor="#000000" style="border: 1px dotted rgb(211, 211, 211); margin: 0px; padding: 2px 4px; font-weight: 400; font-size: 100%; vertical-align: baseline; font-family: inherit; background-color: rgb(255, 255, 255); text-align: left;"><span style="border-width: 0px; margin: 0px; padding: 0px; font-size: 100%; vertical-align: baseline; color: rgb(51, 153, 102); font-family: inherit;">YES&nbsp;</span></td></table>
+
<p>&nbsp;</p>
+

Latest revision as of 10:23, 31 July 2012

Article Metadata
Article
Created: allanbezerra (14 Apr 2010)
Last edited: hamishwillee (31 Jul 2012)

see article GuaranaUI-Overview for the overview

Contents

Inheritance

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

[edit] 1 - Description

Basic class to build views using GuaranaUI.

[edit] 2 - Visual Design

Not Applicable for this Component.

[edit] 3 - Component Dependencies

[edit] 3.1 CSS

Not Applicable for this Component.

[edit] 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>

[edit] 4 - Functional Specifications/Requirements

[edit] 4.1 - Options

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

[edit] 4.2 - Events - Callbacks

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

[edit] 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
  • 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

[edit] 4.4 - Default options

Not Applicable for this Component.

[edit] 5 - The Guarana View Lifecycle

The Guarana UI has a lifecycle approach for views objects.


Guarana View Class provides a renderer method implementation, for each view this need to be over-ridden. This render method is shown below:

render: function() {
    this.renderUI();
    this.bindUI();
    this.syncUI();
}

The renderUI, bindUI and syncUI are abstract (empty) methods in the view class. The intended role of each of these methods is described below, and most widgets will simply implement these methods based on their expected roles:

  • renderUI: This method is responsible for creating and adding the HTML nodes which the view needs. It is usually the point at which the DOM is first modified by the view.
  • bindUI: This method is responsible for attaching event listeners which bind the UI to the view.
  • syncUI: This method is responsible for synchronizing the state of the UI based on the current state of the view.

[edit] 6 - Component Demo

[edit] 6.1 HTML

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

[edit] 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>Nokia Developer</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');

      }
});

//Creating and rendering the view

var firstView = new myFirstView ({
      container: '#myview'
});

firstView.render();

This page was last modified on 31 July 2012, at 10:23.
48 page views in the last 30 days.