Faire de l'édition frontale AJAX avec eZ Publish & Mootools (Partie 3)

• Publié le 07 Octobre 2009
• 8 commentaire(s)
• Catégorie : Technologies Web

Pour terminer cette série de billet (voir la partie 1 et la partie 2) concernant l'édition frontal AJAX sur eZ Publish, voici des extraits de code et quelques détails de fonctionnement concernant ce qui n'est pas encore décrit à ce stade, à savoir :

• La génération de masques de saisie en mootools (mes fameux custom captions)
• La couche eZ Publish et la mise à jour des données

Les custom captions en Mootools

Comme vue dans le précédent billet, la déclaration de la classe ajaxwebin nécessite de renseigner la propriété caption par l'instance d'une classe spécifique permettant de générer le masque de saisie attendu sur clic d'une zone éditable, comme par exemple :

Instance d'une classe pour une liste déroulante

new ajaxcaptionsSelect({  
 'minValue': 0,
 'maxValue': 12,
 'setStyles': {margin: '0 -10px', border: '1px dotted #000', background: '#ffffdd'}
}))
 
 

Instance d'une classe pour un champs de saisie

new ajaxcaptionsInput({  
 'setStyles': {border: '1px dotted #000', background: '#ffffdd'}
})
 
 

Définition de la superclasse et des classes hérités

J'aurais pu exploiter diverses techniques pour définir une superclasse ajaxcaptions et ses classes dérivées ajaxcaptionSelect et ajaxcaptionsInput, comme par exemple l'utilisation du mécanisme de prototype du langage JavaScript. J'ai opté pour le plus scolaire implement, qui reste le plus facile à manipuler dans l'esprit de mootools.

Le principe est trivial, il s'agit de déclarer une classe, en spécifiant que l'ensemble des propriétés et des méthodes d'une autre classe sont à dupliquer. Rien n'empêche par la suite d'exploiter ou de mixer dans l'exécution du code des évolutions du prototype des objets, ou encore d'invoquer à nouveau la méthode implement dynamiquement.

Ce formalisme a pour avantage d'être facilement compréhensible (assez scolaire), et facilement extensible :

// Classe abstraite de génération d'éléments xHTML
var ajaxcaptions = new Class({
    
    Implements: [Options],
 
    options: {
     minValue: 0,
     maxValue: 0,
     setStyles: null,
     myElement: null
    },
    
    // Constructeur de la classe
    initialize: function(options) {
     this.setOptions(options);
     this.process();
    },
    
    // Retourne le caption
    getElement: function() {
      return this.options.myElement;
    }
        
});
 
// Classe de génération xHTML d'un 'select-one', contenant des valeurs de minValue à maxValue
var ajaxcaptionsSelect = new Class({
    
    Implements: ajaxcaptions,
    
    process: function() {
 
      var myElement;
      myElement = new Element('select');
      myElement.setStyles(this.options.setStyles);
      
      for (i=this.options.minValue; i<=this.options.maxValue; i++)
      {
 myElement.adopt(new Element('option').set('text', i));
      }
      
      this.options.myElement = myElement;
    },
    
    getValue: function() {
      return this.options.myElement.selectedIndex;
    },
    
    setValue: function(value) {
      this.options.myElement.selectedIndex = value;
    }
     
});
 
// Classe de génération xHTML d'un 'input'
var ajaxcaptionsInput = new Class({
    
    Implements: ajaxcaptions,
    
    process: function() {
 
      var myElement;
      myElement = new Element('input');
      myElement.setStyles(this.options.setStyles);
 
      this.options.myElement = myElement;
    },
    
    getValue: function() {
      return this.options.myElement.value;
    },
    
    setValue: function(value) {
      this.options.myElement.value = value;
    }
     
});
 
 

La couche eZ Publish de mise à jour des données

Comme décrit dans le précédent billet, l'appel des URL eZ Publish correspond au motif suivant : /ajaxwebin/action/[attribute_id]/[object_id]/[value] :

var url = this.options.ajaxmodule + '/' + this.options.attributeID + '/' + object_id + '/' + value;
 
 

• ajaxmodule est spécifié en dur dans l'instance des classes mootools, et correspond à la racine du module, par exemple : /ajaxwebin/action
• attributeID est spécifié en dur dans l'instance des classes mootools, et correspond à l'identifiant eZ Publish du champ à modifier, par exemple stock ou title
• object_id est fixé dynamiquement dans les classes CSS, et permet de transmettre l'identifiant (objet_id) de l'objet eZ Publish à modifier
• value correspond à la valeur à appliquer lors de la modification

L'implémentation du module eZ Publish

Je ne reviendrai pas sur l'implémentation du module qui est déjà abordé en détail sur plusieurs articles, comme par exemple le tutoriel de module d'eZPedia.

Quelques précisions concernant le code

• La méthode de modification est la plus classique, mais il aurait été possible d'utiliser la méthode fromString (voir le billet de Mox), ou encore l'expérimental kernelwrapper et sa classe ezpObject (mais ce sera pour un prochain billet)
• A noter : L'utilisation de la méthode clearObjectViewCache, qui permet de forcer le rafraîchissement de tous les caches impactés par la modification de l'objet (selon les différentes directives, dont le Smartviewcache)

Code du module eZ Publish de modification de l'objet

<?php
$Module = $Params["Module"];
 
if ( isset( $Params['action'] ) ) {
 $action = $Params['action'];
} else {
 $action = '';
}
 
if ( isset( $Params['object'] ) ) {
 $object_id = $Params['object'];
} else {
 $object_id = null;
}
 
if ( isset( $Params['value'] ) ) {
 $value = $Params['value'];
} else {
 $value = null;
}
 
$Result = array();
$Result['path'] = array();
$Result['pagelayout'] = array();
$Result['content'] = '';
 
if ($action != '') {
 
  if ( (!is_null($object_id)) && (!is_null($value)) ) {
 
    $object = eZContentObject::fetch( $object_id );
 
    if ($object) {
      $data_map = $object->attribute( 'data_map' );
 
      if (isset($data_map[$action])) {
       $attribute = $data_map[$action];
 
       switch ($data_map[$action]->DataTypeString) {
        case 'ezinteger':
          $attribute->setAttribute('data_int', $value);
  
          break;
        case 'ezstring':
          $attribute->setAttribute('data_text', $value);
  
          break;
       }
   
       $attribute->sync();
       eZContentCacheManager::clearObjectViewCache( $object_id );
       
       echo $value;
      }
      else {
       echo '';
      }
 
    }
    else {
      echo '';
    }
 
  }
 
  eZDB::checkTransactionCounter();
  eZExecution::cleanExit();
 
} 
else {
  echo '';
}
 
?>
 
 

• Tags :
• eZ Publish
• mootools
• AJAX
• Edition frontale
• CSS
• ma cave