Skip to content

View layer

Jump to bottom
ohory edited this page Sep 27, 2012 · 9 revisions

tetra.view

Documentation of the view layer interface of Tetra.js

Interface

  • register([string] name, [object] implementation): register a new view class to tetra.
  • destroy([string] name, [string] scope): destroy a previously registered view class.
  • notify([string] message, [mixed] data, [string] scope): send an event with data to views in the specified scope. This method must be called in controller classes through app.notify.
  • debug: debugging console. Specifications with the command tetra.view.debug.man.

tetra.view.register([string] name, [object] implementation)

Definition

This method allows you to register a view description object.

Main arguments

  • name [string]: The name of the view that is coupled to module filename. It must be the same as js file name. For example: if you call your view likeButton, included file will be named “likeButton.ui.js”.
  • implementation [object]: This object describes view module listeners and notifiers as well as DOM handlers. A more detailed definition follows.

View description

{  
     scope : 'scope name', // #string  
     use : ['appCtrl', ...], // #array of controllers' names dependencies  
     root : 'containerId', // #string  
     constr : behaviors // #function  
}

Context parameters

  • scope [string]: it’s the visibility scope of message sent by the view to controller. Actually this is the application scope and it must be the application name. For example: for the “like” feature, the scope could be “likeApp”.
  • use [array]: the list of controllers required by the view to work properly. This list is mandatory when the view is loaded using the bootstrap feature (see below).
  • root [string]: [optional] id of a root element for the view. It will limit selectors matching to this container.

Constructor

constr : function(me, app, _) { return {  
     events : {...},  
     methods : {...}  
}; }

constr is a function returning view’s behaviors in the following context :

Events

events : {  
     user : {  
          'eventName' : {  
               'selector' : function(event, element){...},  
               ...  
          },  
          ...  
     },  
     window : {  
          'eventName' : function(event){...},  
          ...  
     },  
     controller : {  
          'message' : function(data){...},  
          ...  
     }  
}

events is a description of callbacks executed as a consequence of controller or user demand :

  • user: list of events listened on the page. For each event (click, mouseover, …), we specify a list of selectors (CSS2.1 syntax) that must be reactive to this action and the function called on action. This function has access to the native event and the matched DOM element in context. e.preventDefault() is automatically call when an event match with one of the callback (except for checkbox/radio input element and keydown event). If you want to disable this behavior, add a “no-prevent” class on your element.

Special event management: * mouseover and mouseout : these events are cleaned. That means they work as mouseenter and mouseleave and then an element don’t catch event from its children. * clickout : you can define a clickout listener for a specific selector. This callback function will be called when the user click outside a any element matching this selector. This listener only works if a click listener with the same selector is defined in the same view.

  • window: list of window events listened on the page. A callback function is associated to each event you want to listen.
  • controller: list of messages sent by controllers listened in the view with the function that must executed at the reception. Datas given by controller are accessible.

Methods

constr : function(me, app) { return {  
     events : {...},  
     methods : {  
          init : function(){...},  
          customMethod : function(param){...},  
          ...  
     }  
}; }

Methods are common functions used locally in the view. They can be called using the me keyword. For example : me.methods.customMethod(data); to call the function customMethod.

init is a reserved method executed when the view is registered. It can be used to define some variables accessible in the view. For example to define a DOM access, you can define a variable as an attribute attached to me : me.target = document.getElementById('targetId');

Sample Code

tetra.view.register('likeButton', {  
  
   scope : 'likeApp',  
   use : ['likeCtrl'],  
  
   constr : function(me, app, _) { return {  
  
   events : {  
  
      user : {  
         'click' : {  
            'css selector1': function(e, elm)  
            {  
               var data = { ... };  
               app.notify('ask this', data);  
            },  
  
            [...]  
  
            'css selector2': function(e, elm)  
            {  
               var data = { ... };  
               app.notify('ask that', data);  
            }  
         }  
      },  
  
       controller : {  
          'do this' : function(data){  
             me.methods.doTheJob('this', data);  
             // DOM modifications  
          },  
  
          [...]  
  
          'do that' : function(data){  
             me.methods.doTheJob('that', data);  
             // DOM modifications  
          }  
       },  
  
       methods : {  
          init: function() {  
             me.myViewVar = 'smthg';  
             // Initialization of the view  
          },  
  
          [...]  
  
          doTheJob: function(type, params){  
             // Common function use in the view  
          }  
       }  
   };}  
});

Clone this wiki locally