Ce billet décrit pas à pas le développement de l'édition frontale dont le fonctionnement est visible sur la vidéo du précédent billet (principe du cliquer / éditer). Le framework JavaScript utilisé est Mootools, dont le fonctionnement est tout à fait similaire à ses principaux concurrents, à savoir : jQuery, Prototype & Script.aculo.us, YUI, Dojo, etc.
Pour ceux qui n'ont jamais utilisés un framework JavaScript, j'en profite pour introduire les objectifs et les fonctionnalités de base que l'on peut trouver dans tous ces frameworks, sans pour autant vous aider à faire un choix... Les critères de choix d'un framework dépendent de bien d'autres critères que leur simple capacités individuelles, comme par exemple :
- Eviter la multiplication des frameworks sur un même site (ce que l'on constate malheureusement un peu partout)
- Rester dans la logique de dépendance d'un framework et de son environnement de développement (YUI pour eZ Publish, Dojo pour Zend, Prototype pour Symfony, etc.)
- Maîtriser un framework correctement, plutôt que 3 frameworks passablement
Introduction aux FrameWorks JavaScript
Un framework JavaScript est écrit en JavaScript, et n'est donc pas plus puissant que le langage lui même. Il s'agit seulement d'un ensemble de librairies et d'extensions du modèle objet qui facilitent l'écriture du code, notamment pour :
- Manipuler le DOM (atteindre, ajouter, modifier ou supprimer des balises et des attributs dans la page)
- Manipuler les évènements (évènements de la souris, du clavier)
- Automatiser des effets complexes (effets de fondus, de Drag & Drop, etc.)
- Faciliter les appels et traitements AJAX
- Faciliter la POO, en proposant une syntaxe plus familière (classes, héritage)
- Masquer certaines incompatibilités de navigateurs
La popularisation de ces frameworks a permis de démocratiser un modèle objet de manipulation du DOM, ainsi qu'une syntaxe grammaticale de sélection de noeuds déclinée du CSS3 Selector (dont voici une liste d'exemple en forme de benchmark pro-Mootools) bien plus lisible et compréhensible que l'API DOM & XPATH du W3C, ce qui génère d'ailleurs des initiatives de portage hors JavaScript comme par exemple : http://code.google.com/p/phpquery/
Spécification de la classe Mootools ajaxwebin
Cette classe a pour vocation de déclarer et d'exécuter le comportement de type "cliquer / éditer" sur un ensemble d'éléments similaires dans la page, comme par exemple :
- Cas 1 : Remplacer sur clic toutes les balises A contenant une classe CSS 'cuvee_invert', par un champs de saisie
- Cas 2 : Remplacer sur clic toutes les balises A, positionnées sous une balise TD et contenant une classe CSS commençant par 'stock_', par une liste de déroulante de 1 à 10
Prérequis dans le xHTML :
Les xHTML propulsés doivent être préparés pour faciliter l'identification des éléments éditables, et des correspondances entre les objets et les attributs cibles. Le motif xHTML est la suivante :
<HTMLElement id="rootID_ContentObjectID" class="MatchName" />
Par exemple concernant le cas 1 :
<a class="cuvee_invert" id="cuveename_2224"></a>
Par exemple concernant le cas 2 :
<td class="td80 stock_3" id="stock_2254"><a href="#">3</a></td>
Voici la liste des paramètres et leurs rôles respectifs :
- ajaxmodule (obligatoire) : Racine du module eZ Publish : ajaxmodule/attributeID/objectID/value
- parentMatch (obligatoire) : Syntaxe CSS3 (transmise en l'état à Mootools dans un sélecteur) qui permet d'atteindre tous les éléments impactés par l'édition frontale
- targetMatch (optionnel) : Balise optionnelle à atteindre, comme enfant des éléments résultat du parentMatch (permet par exemple d'atteindre les balises A, enfants des balises TD)
- styleMatch (optionnel) : Permet de définir un style CSS pour faciliter l'identification des éléments éditables dans la page (bordures, couleurs)
- rootID (obligatoire) : <HTMLElement id="rootID_ContentObjectID" class="MatchName" />
- attributeID (obligatoire) : Permet de transmettre le paramètre dans l'URL ajaxmodule/attributeID/objectID/value
- caption (obligatoire) : Permet d'affecter le masque de saisie personnalisé sur clic, détaillé dans le prochain billet
Instanciation des objets de la classe Mootools ajaxwebin
A noter : les objets instanciés dans la propriété 'caption' seront décrits dans le prochain billet
window.addEvent('domready', function() {
var myajaxwebin = new Array();
// Ajout de la gestion des stocks
myajaxwebin.push( new ajaxwebin({
ajaxmodule: '/ajaxwebin/action',
parentMatch: 'td[class*="stock_"]',
targetMatch: 'a',
styleMatch: {border: '1px dotted #ff0000', background: '#ffffdd'},
rootID: 'stock_',
attributeID: 'stock',
caption: (
new ajaxcaptionsSelect({
'minValue': 0,
'maxValue': 12,
'setStyles': {margin: '0 -10px', border: '1px dotted #000', background: '#ffffdd'}
}))
}));
// Ajout de la gestion des title des cuvées
myajaxwebin.push( new ajaxwebin({
ajaxmodule: '/ajaxwebin/action',
parentMatch: 'a[class="cuvee_invert"]',
styleMatch: {border: '1px dotted #ff0000', background: '#ffffdd'},
rootID: 'cuveename_',
attributeID: 'title',
caption: (
new ajaxcaptionsInput({
'setStyles': {border: '1px dotted #000', background: '#ffffdd'}
}))
}));
});
Code commenté de la classe Mootools ajaxwebin
Il est difficile d'expliquer et de décrire l'ensemble du code. Les commentaires devraient être suffisants quant à la compréhension des mécanismes. Cependant voici quelques éléments clés de compréhension :
- Voir la documentation des classes sur Mootools, et notamment l'utilisation du setOptions
- Voir la documentation sur bind qui est essentielle à la construction des mécanismes qui mixent la construction dynamique du DOM et l'ajout dynamique d'évènements. Cette méthode permet de modifier la portée du this, pour définir quelle est la valeur du this dans l'exécution des évènements (clics ou autres)
var ajaxwebin = new Class({
Implements: [Options],
options: {
ajaxmodule: null,
parentMatch: null,
targetMatch: null,
styleMatch: null,
rootID: null,
attributeID:null,
caption:null,
currentselected:null,
currentID:null,
targetElement:null
},
initialize: function(options) {
this.setOptions(options);
this.process();
},
// Appel AJAX au module eZ Publish, et Mise à jour de l'élément en fonction de la valeur retournée
updateAJAX: function(value) {
var object_id = this.options.currentID;
// Définition de l'URL du module eZ Publish
var url = this.options.ajaxmodule + '/' + this.options.attributeID + '/' + object_id + '/' + value;
new Request({
method: 'get',
url: url,
onSuccess: function(responseText, responseXML) {
this.options.targetElement.set('html', responseText);
}.bind(this)
}).send();
},
// Supprime le caption généré
disposeCaption: function() {
this.options.targetElement.setStyle('display', '');
this.options.currentselected = null;
this.options.caption.getElement().dispose();
},
//Remplace la zone cible par le caption attendu
setCaption: function(element) {
var currentselected = this.options.currentselected;
this.options.currentID = element.getProperty('id').replace(this.options.rootID, '');
this.options.attributeID = this.options.attributeID;
if (currentselected != element)
{
//Vérfie si une balise cible enfant a été définie, sinon exploite la balise courante
this.options.targetElement = (this.options.targetMatch) ? element.getElement(this.options.targetMatch) : element;
// On restore l'élément précent, si 'change' ou 'blur' non provoqué
if (currentselected) {
var restore_selected = (this.options.targetMatch) ? currentselected.getElement(this.options.targetMatch) : currentselected;
restore_selected.setStyle('display', '');
}
//On rend invisible l'élement cible, pour pouvoir le remplacer
this.options.targetElement.setStyle('display', 'none');
//On affecte le caption xHTML généré avec la valeur de la page
this.options.caption.setValue( this.options.targetElement.get('text') );
//On supprime les évènements, par sécurité
this.options.caption.getElement().removeEvents();
//On affecte les évènements génériques à tous les captions xHTML
this.options.caption.getElement().addEvents({
'change': function() { //Sur changement, on update les données
var value = this.options.caption.getValue();
this.updateAJAX(value);
this.disposeCaption()
}.bind(this),
'blur': function() { //Sur perte du focus
this.disposeCaption()
}.bind(this)
});
//On injecte le caption après l'élément cible
this.options.caption.getElement().inject(this.options.targetElement, 'after');
this.options.currentselected = element;
}
},
process: function() {
//Recherche tous les éléments selon le motif parentMatch, et boucle sur les résultats
$$(this.options.parentMatch).each(function(element, index) {
var elementID = element.getProperty('id');
//Teste si les éléments possèdents des ID
if (elementID && (elementID.indexOf(this.options.rootID)) == 0) {
//Neutralise les liens <a>, pour faciliter l'insertion des captions
if (element.getProperty('href')) element.setProperty('href', 'javascript:void(0)');;
element.getElements('a').each(function(element_a) {
element_a.setProperty('href', 'javascript:void(0)');
});
//Ajoute l'évènement de clic sur tous les éléments matché
element.addEvents({
'click': function() {
this.setCaption(element);
}.bind(this)
});
element.setStyles(this.options.styleMatch);
}
}.bind(this));
}
});
