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('
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('
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 !!
Tweet
Sympa ton article
merci pour l’article. une question, la fontion clean() elle contient quoi ?
Selon les navigateurs, le parsage du XML est différent. Firefox va prendre en compte les nœuds texte constitués uniquement de caractères blancs (par exemple les retours à la ligne du code), ce que IE ne fait pas. La fonction clean permet de nettoyer le XML pour avoir les mêmes nœuds pour chaque navigateur.
Cf : http://javascript.developpez.com/faq/?page=DOM#DOMIEFirefox