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


précédentsommairesuivant

I. Améliorations du script précédent

I-A. Collection tBodies

Un nœud table possède une collection tBodies (1) de tous les objets tbody qu'il contient (une table pouvant avoir plus d'un tbody...). De fait on peut remplacer les

script original
Sélectionnez

getElementsByTagName("tbody")[0]

par

script revu
Sélectionnez

tBodies[0]

I-B. Sélection du texte lors de l'édition d'une cellule

Afin que le texte de la zone de texte soit sélectionné au moment de l'édition, modifions le constructeur de la classe HtmlEdit et la fonction HtmlEdit.AppendTo() :

sélection du texte à l'édition
Sélectionnez

var HtmlEdit = function(value){
  [...]
  this.control.select();
};

HtmlEdit.prototype = {
  AppendTo: function(parent){
    [...]
    this.control.select();
    this.control.focus();
  }
}

I-C. Shunter les événements au niveau de la cellule lorsqu'on est en édition

Lorsqu'une cellule entre en édition, i.e. quand son contenu textuel est remplacé par une zone de texte, les événements gérés au niveau de la cellule n'ont plus lieu d'être. Au contraire, ils parasiteront ceux gérés au niveau de la zone de texte. On va donc les supprimer à l'édition (sachant qu'à la fin de l'édition ils sont de toute façon repositionné par la fonction HtmlEditTableHelper.CellInitialize()).

La suppression des gestionnaires d'événement au niveau de la cellule sera effectuer par la fonction HtmlEditTableHelper.CellNeutralizeEvents() :

HtmlEditTableHelper.CellNeutralizeEvents v1.1
Sélectionnez

CellNeutralizeEvents: function(cell){
  if (cell){
    cell.onclick = null;
    cell.ondblclick = null;
  }    
}

Cette fonction est appelée au moment de l'ajout de la zone de texte dans la cellule :

HtmlEdit.AppendTo
Sélectionnez

AppendTo: function(parent){
  if (document.all){
    this.control.style.height = parent.clientHeight - 2*parent.clientTop + "px";
    this.control.style.width = parent.clientWidth - 2*parent.clientLeft + "px";
  }
  else{
    this.control.style.height = parent.offsetHeight - 2*parent.clientTop + "px";
    this.control.style.width = parent.offsetWidth - 2*parent.clientLeft + "px";
  }
  Tools.Purge(parent);
  HtmlEditTableHelper.CellNeutralizeEvents(parent);
  parent.appendChild(this.control);

  this.control.select();
  this.control.focus();
}

Auparavant on supprimait le gestionnaire d'événement ondblclick après l'appel à HtmlEdit.AppendTo(). Dorénavant cela n'est plus nécessaire.

HtmlEditTableHelper.DblClickHandler v1.1
Sélectionnez

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;
  src.grid.ActiveCellChange(src, false);
}

I-D. Classe utilitaire KeyCodes

Pour une meilleure compréhension du code dès la première lecture, il est préférable d'utiliser des constantes aux noms explicites plutôt que des valeurs dont on ne sait pas toujours ce qu'elles représentent. En ce qui concerne la gestion des événements clavier, une classe de constantes de codes de touche serait utile même si pour l'instant le seul code utilisé est celui de la touche Entrée (13). Voici l'implémentation de la classe KeyCodes (qui pourra toujours être enrichi au fur et à mesure des besoins) :

classe KeyCodes
Sélectionnez

var KeyCodes = {
  BACKSPACE: 8,
  TAB: 9,
  RETURN: 13,
  PAUSE: 19,
  CAPS_LOCK: 20,
  ESCAPE: 27,
  PAGE_UP: 33,
  PAGE_DOWN: 34,
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
  INSERT: 45,
  DELETE: 46
};

I-E. Classe utilitaire Tools

Pour l'instant la classe Tools nous est utilie comme fourre-tout pour nos fonctions utilitaires. Dans l'avenir il sera sûrement bon de la spliter en classes utilitaires plus spécifiques regroupant des fonctionnalités ayant un rapport entre elles. Mais bon, passons cette problématique dans l'immédiat...

La classe KeyCodes associe un nom explicite aux codes de certaines touches du clavier. Ce code est obtenu par la lecture de l'attribut keyCode de l'événément déclenché. Cependant, cette méthode de détermination de la touche pressée n'est pas valable pour les touches spéciales suivantes : Alt, Ctrl, Shift. En effet, ces touches sont utilisées pour réaliser des combinaisons de touches, donc comme information supplémentaire au keyCode des touches classiques (la pression des touches Alt, Ctrl ou Shift ne suffit pas à déclencher un événement clavier). Voici l'implémentation de la fonction Tools.SpecialKeys() qui renvoie pour chacune des touches spéciales un booléen spécifiant si la touche est pressée ou non :

Tools.SpecialKeys()
Sélectionnez

SpecialKeys: function(e){
  if (e.modifiers){
    var mString =(e.modifiers+32).toString(2).substring(3,6);
    return { 
      "ShiftKey": mString.charAt(0)=="1",
      "CtrlKey": mString.charAt(1)=="1",
      "AltKey": mString.charAt(2)=="1"
    };
  }
  else{ 
    return { 
      "ShiftKey": e.shiftKey,
      "CtrlKey": e.ctrlKey,
      "AltKey": e.altKey
    };
  }
}

// exemple d'utilisation dans un gestionnaire d'événement :
function myKeydownHandlerEvent(e){
  alert(Tools.SpecialKeys(e).ShiftKey); // true si la touche SHIFT est pressée, false sinon
  alert(Tools.SpecialKeys(e).CtrlKey); // true si la touche CTRL est pressée, false sinon
  alert(Tools.SpecialKeys(e).AltKey); // true si la touche ALT est pressée, false sinon    
  alert(Tools.KeyCode(e)); // code de la touche pressée ayant déclenché l'événement clavier
}

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.