Voici un petit article concernant la librairie prototype qui va traiter des templates. Les templates sont des modèles qui vont vous permettre de développer plus rapidement et plus facilement. Pour cet exemple, j’ai utiliser comme source de donnée un fichier XML. Cela nous permettra de voir comment récupérer le fichier XML en AJAX et comment s’en servir.

Contexte

Le but de cet exemple est l’affichage d’une liste de liens contenu dans un fichier XML dans une liste non ordonnées (ul). Cette liste de liens sera créée via du javascript. Voici la page d’exemple.

Code

XML

Le fichier XML contient la liste des liens que nous souhaitons affichés. Le nœud links est le nœud racine. Il contient des noeuds link qui représente un lien. Ce noeud link est lui même composé d’un noeud Url et description.

  
    http://www.google.fr
    Le site de recherche de Google
  
  
    http://www.lequipe.fr
    L'equipe : Actualité du sport
  
  
    http://www.ubuntu-fr.org
    L'association fr d'Ubuntu
  
  
    http://www.planet-libre.org/
    Le Planet Francophone sur Linux et les Logiciels Libres ...
  

Html

Le code html est très simple.
Tout d’abord il faut inclure le fichier de prototype :

Pour notre exemple nous n’aurons besoin d’une liste ordonée ul ayant pour id « links » et un bouton qui appellera notre fonction javascript « getLinks ».

Javascript

Notre code Javascript se compose de 3 fonctions : la fonction getLinks et 2 fonction qui vont nous permettre de nettoyer notre XML afin d’avoir un fichier identique sous tous les navigateurs. Je ne détaillerai pas ces fonctions qui peuvent être récupéré dans le code de la page html.

Voici le code de la fonction getLinks.

function getLinks(){
  //On vide le contenu de l'élément ayant pour id links
  $('links').update();
      
  //On récupère le fichier Xml via une requete AJAX en get
  new Ajax.Request('links.xml', {
    method: 'get', //indispensable pour la récupération d'un fichier
    onException: function(request,error) {
        alert(error.message);
    },
    onFailure: function(){ alert('Une erreur est survenue...'); },
    //en cas de succès de la récupération du fichier
    onSuccess: function(response) {
    //On récupère la réponse et on la nettoie pour avoir un fichier XML
    //identique sur tous les navigateur
    var xmlDoc = clean(response.responseXML);
          
    //Initialisation du template avec une balise li qui contient un lien vers le site
    var myTemplate = new Template('
#{Description}
');
          
    //On récupère les neouds de type link
    var links = xmlDoc.getElementsByTagName('link');
    //On boucle sur les noeuds
    for (i=0; i < links.length; i++)
    {
      //On récupére l'Url et la description du lien en cours
      var UrlValue = links[i].getElementsByTagName("Url")[0].firstChild.nodeValue;
      var DescriptionValue = links[i].getElementsByTagName("Description")[0].firstChild.nodeValue;
      //On met à jour l'élément links avec le template qu'on évalue 
      //en lui passant en paramètre les valeurs à substituer
      $('links').insert(myTemplate.evaluate({Url: UrlValue, Description: DescriptionValue}));
      }          
    }
  });
}

Utilisation des templates

La création d'un template se fait via l'instanciation d'une variable avec new Template. Les variables du template sont définis par #{ et }.

var myTemplate = new Template('
#{Description}
');

Pour remplacer les variables par ses données, on utilisera la méthode evaluate en lui passant comme paramètre les valeurs des variables pour chacune d'entre elles.

myTemplate.evaluate({Url: 'http://royto.familleroy.fr//', Description: 'mon site'})

Conclusion

Prototype fournit une méthode simple et rapide pour créer du contenu issu d'un modéle. A utiliser sans modération !!