Aller au contenu

Comment maîtriser rapidement Les Bases du XSL avec AJAX

AJAX est une combinaison puissante de plusieurs technologies. Le XSL en fait partie.

Le XSL représente la feuille de style CSS d’un fichier XML, avec des instructions supplémentaires.

Dans la formation ci-dessous, apprenez les bases du XSL pour vous en sortir confortablement avec AJAX.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment maîtriser rapidement Les Bases du XSL avec AJAX

Bonjour à tous et bienvenu sur Développement Facile.

On passe ensemble à la suite des cours sur Ajax pour que vous sachiez utiliser cette technologie remarquable. Là je vais vous donner les bases des fichiers XSL, il faut savoir que les fichiers XSL ça ressemble énormément au fichier XML en un peu plus puissant, nous allons voir tout ça ensemble, dès maintenant.

Le XSL

Le XSL ça veut dire eXtensible Stylesheet Language, ça veut dire, excusez-moi pour mon accent anglais pas terrible, ça veut dire langage extensible de feuilles de styles.
En fait le XML ça contient les données et le XSL justement, ça va vous permettre de faire de l’affichage XML beaucoup plus sympa. Le XSL c’est en quelque sorte des feuilles de styles des fichiers XML, donc un fichier, une feuille de style XSL ça reprend des données XML, et ça créé l’affichage de contenu XML dans une page Web, donc XSL ce langage est très puissant, ça prend en compte les conditions, les boucles, vous allez voir, on va voir ça tout de suite ensemble, dès maintenant.
Le XSL fonctionne avec un ou plusieurs template pour définir l’affichage des éléments du fichier XML, et les éléments concernés du fichier XML sont déterminés grâce à l’attribut match, vous remarquerez quand je vous montrerais le code source, match, cherchez-le.

Document XSL

Vonc voici un exemple de document XSL, tout simple, comme d’habitude, l’entête, ensuite on définit que c’est un XSL, et template match comme je vous l’ai dit, ensuite le contenu HTML avec les balises et pensez toujours en bas, XSL template c’est un fichier à fermer, pensez à fermer vos balises XSL. Très important c’est comme le XML, le XSL le XML tout ça c’est pareil, une balise ouverte doit obligatoirement avoir sa balise fermante. Ça marche par paire.

Trier avec le langage XSL

Le langage XSL permet de trier des données automatiquement, vous avez des données en vrac dans votre document XML, avec l’affichage XSL que vous allez effectuer dès maintenant, vous allez pouvoir trier vos données automatiquement par ordre alphabétique, numérique, en croissant, décroissant, il suffit d’utiliser la balise sort select, c’est l’attribut, sur quel nœud vous allez effectuer le tri, avec l’attribut order ascending pour trier les données en ordre croissant ou descending pour trier les données en ordre décroissant.

Vous pouvez également filtrer des données avec le langage XSL, c’est très puissant, selon tel ou tel critère, égale, différent de, plus grand que, plus petit que, vous utilisez cette balise select chemin d’accès et la balise, ça va permettre d’afficher uniquement les données que vous souhaitez, c’est du filtre, un filtre.

Choisir avec le langage XSL

Et vous pouvez effectuer des choix avec le langage XSL, des conditions if, ça marche pareil, vous ouvrez XSL if, et vous fermez if XSL, ça permet de faire un choix sur l’affichage des données du fichier XML, je vous ai mis un exemple d’attribut avec la balise if, test la balise = à xxx les valeurs, vous testez cet affichage, sinon vous faites un autre affichage.

Conditions avec le langage XSL

Vous pouvez également mettre des conditions beaucoup plus poussées avec le langage XSL donc utilisez la balise choose comme choix, à l’intérieur de cette balise une action peut être déterminée lorsqu’une condition est vérifiée, balise when dans le cas contraire il faut prévoir une autre action, if choose alors when sinon otherwise.
XML choose, XSL when, alors, XSL otherwise, l’autre choix, si, alors.

Voici un exemple de conditions avec le langage XSL, XSL choose condition vérifiée, when test prénom = Alice, vous testez le nœud prénom, est-ce qu’il est égal à Alice ? Alors vous faites l’affichage, fin, when, vous fermez la balise, sinon, si le prénom est différent de Alice, otherwise, vous faites un autre type d’affichage, voyez des exemples XSL, value off, selected non, vous sélectionnez la valeur du nœud nom, la valeur du nœud prénom, la valeur du nœud téléphone et vous pensez bien à fermer XSL choose, la condition que vous avez ouvert tout en haut, choose, toujours fermer vos balises avec le langage XSL, c’est très important, sinon ça ne fonctionnera pas vous aurez un message d’erreur.

Exemple d’application

Je vous montre un exemple de code source, bien évidemment, tout de suite, là vous avez le résultat, premièrement le fichier XSL sans conditions, vous avez votre fichier XML, c’est le même que tout à l’heure, il est un peu plus complet, j’ai rajouté des éléments dedans, tout simplement. Et le fichier XSL, donc dans le fichier XML on va utiliser une feuille de style XSL, très important, et c’est tout ce que vous avez à faire.
Ensuite dans le fichier XSL, voilà, là on test, template match, moi je voulais que tout soit affiché en Arial parce que je préfère, une table donc un tableau, et donc là je vous ai mis des commentaires pour vous aider, donc ça fait … c’est pour faire une boucle, tout simplement, ça permet de parcourir et d’afficher chaque attribut, donc là vous faites une boucle sur le prénom, en même temps il y a un filtre, le prénom doit être différent de Marine pour s’afficher. Je vais mettre la boucle entière au départ, vous avez la boucle complète, là vous remarquez que Marine n’est pas affichée, parce qu’il y avait un filtre sur le prénom, est donc le fin du forEach, je recharge le prénom de Marine apparait avec un tri par ordre alphabétique, parce que si vous regardez dans le code, en ascending, si je mets descending, le tri va changer, ensuite on revient en arrière, donc le prénom Marine va disparaitre, vous voyez là il y a une erreur, une balise qui n’était pas fermée, un commentaire qui n’était pas fermé, vous aurez ce type d’erreur, ensuite, là il y a un if pour faire apparaitre que le prénom choisi, si je veux faire apparaître que le prénom Alice, je fais ce test-là, un if, vérifiez bien qu’il soit fermé ce test if, la balise fermante, et je recharge, donc il y a une erreur également, donc je re regarde, je fais un test, if prénom = Alice, c’est bon.
La balise est bien fermée et à mon avis on ne doit pas utiliser de sort, car il n’y aura qu’un seul prénom, on ne peut pas faire de tri, et vous voyez le fichier XML est automatiquement trié, tout simplement.
Donc la je reviens au point de départ, ensuite il y a un deuxième avec une condition, comment on utilise une condition ?
Le fichier XML fait exactement le même, je pointe vers un fichier XLS complètement différent, là j’ai rajouté une condition avec choose, rappelez-vous choose, début de la condition, fin de la condition ici, when prénom = Alice, quand le prénom = Alice on change la couleur de fond, on l’affiche comme ça, sinon on l’affiche autrement, on peut même dire pour Alice, on va masquer son numéro de téléphone, ce qui va nous donner évidemment sa décale, on va faire autre affichage, juste un <td> donc vide, donc non renseigné pour Alice ce sera non renseigné, et voilà donc le background du prénom Alice change si il y a une condition if, et c’est nom renseigné, je pourrais mettre sur Marine par exemple, voilà, tout simplement, donc vous voyez la puissance de XLS pour afficher vos fichiers XML donc c’est fabuleux, c’est vraiment génial.

Votre plan d’actions !

Alors maintenant les fichiers XSL si je vous en parle, vous savez ce que ça fait, à quoi ça sert, comment utiliser les bases, pareil pour les fichiers XML, vous savez les concevoir, utiliser les bases car ils sont très utilisés avec Ajax, si vous avez des questions, comme d’habitude posez-les sous ce cours vidéo, moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple XSL

Et voici l’exemple XSL commenté.

Téléchargement du code source Exemple d'utilisation des fichiers XSL

Cliquez ici pour télécharger le code source Exemple d'utilisation des fichiers XSL

Choisissez les prochains cours XSL

Profitez des commentaires, pour me donner vos préférences concernant les prochains cours dédiés au langages XSL.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>