Conception de contrôles Web JavaScript avancés : Créer une table HTML éditable - HtmlEditTable v1.0


précédentsommairesuivant

VII. Annexe : Masquer l'implémentation

VII-A. HtmlEditTableHelper

Au fil de ce tutoriel nous avons utilisé un certain nombre de fonctions utilitaires, spécifiques à notre implémentation, qu'on ne veut pas exhiber dans l'interface de notre contrôle. Nous les avons regroupé dans l'objet HtmlEditTableHelper. Nous les avons déjà explicitées, aussi voici uniquement pour rappel la version finale de cet objet.

HtmlEditTableHelper
Sélectionnez
var HtmlEditTableHelper = {
  CellInitialize: function (cell, value){
    if (cell){
      cell.ondblclick = HtmlEditTableHelper.DblClickHandler;
	  if (typeof value != "undefined"){
	    cell.appendChild(document.createTextNode(value));
	  }
	}
  },
	
  DblClickHandler: function(e){
    var src = Tools.Node(Tools.Target(e), "TD");
	if (!src){
	  Tools.Event(e).returnValue = false;
  	  return false;
    }
    var htmlEdit = new HtmlEdit(src.firstChild.data);
    htmlEdit.AppendTo(src);
   src.ondblclick = null;
  }
};

VII-B. Tools

Au fil de ce tutoriel nous avons utilisé un certain nombre de fonctions utilitaires génériques et compatibles avec tous les navigateurs récents. Elles ont été regroupées dans l'objet Tools que voici:

HtmlEditTableHelper
Sélectionnez
var Tools = {
  Purge: function(node){
    while (node && node.hasChildNodes()){
      var child = node.firstChild;
      Tools.Purge(child);
      var attr = child.attributes;
      if (attr) {
	      var n;
        var l = attr.length;
        for (var i=0; i<l; i++){
          n = attr[i].name;
          if (typeof child[n] === 'function') {
            child[n] = null;
          }
        }
      }
      child = null;
      node.removeChild(node.firstChild);
    }
  },

  Node: function(o, nodeName){
    while(o && o.nodeName != nodeName.toUpperCase()){
      o = o.parentNode;
    }
    if (o){
      return o; 
    }
    return undefined;   	
  },

  Event: function(e){
    return window.event || e;
  },

  Target: function(e){
    e = Tools.Event(e);
    return e.srcElement || e.target;
  },

  KeyCode: function(e){
    e = Tools.Event(e);
    return e.keyCode || e.which;
  },

  IndexOf: function(array, value){
    for (var i=0, imax=array.length; i<imax; i++){
      if (i in array && array[i] === value){
        return i;
      }
    }
    return -1;
  }
};
  • La fonction Tools.Purge() supprime tous les nœuds enfants du nœud passé en paramètre. Cette suppression est précédée de la mise à NULL de toutes les propriétés de type fonction de ces nœuds pour éviter des fuites de mémoire (principalement sous Internet Explorer).
  • La fonction Tools.Node() permet de parcourir l'arborescence du nœud passé en paramètre jusqu'au premier élément parent de type nodeName.
  • La fonction Tools.Event() assure la compatibilité entre les principaux navigateurs quant à la récupération de l'événement déclenché.
  • La fonction Tools.Target() assure la compatibilité entre les navigateurs quant à la récupération de la cible de l'événement déclenché.
  • La fonction Tools.KeyCode() assure la compatibilité entre les navigateurs quant à la récupération du code de la touche pressée lors d'un événement.
  • La fonction Tools.IndexOf() renvoie l'index de la valeur value dans le tableau array, ou -1 si value n'est pas contenue par array.

précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2009 Nourdine FALOLA. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.