×
Namespaces

Variants
Actions
(Difference between revisions)

GuaranaUI View Object

From Nokia Developer Wiki
Jump to: navigation, search
Aimevous (Talk | contribs)
m (5 - The Guarana View Lifecycle)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix ArticleMetaData)
 
(4 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Web Runtime (WRT)]] [[Category:Guarana UI]]
+
{{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
 
see article [[GuaranaUI-Overview]] for the overview
__NOTOC__
 
 
<h1>Inheritance</h1>
 
<h1>Inheritance</h1>
  
Line 143: Line 163:
 
       renderUI: function() {
 
       renderUI: function() {
  
             this._title = Nokia.dom.parseHTML('<span>Forum Nokia</span>');
+
             this._title = Nokia.dom.parseHTML('<span>Nokia Developer</span>');
  
 
             Nokia.dom.append(this.getContainer(), this._title);
 
             Nokia.dom.append(this.getContainer(), this._title);

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.
140 page views in the last 30 days.
×