Dans ce didacticiel, nous allons explorer le monde de XSL (T) et expliquer en quoi consiste l'extraction de données d'un document XML, itération de base, login de base et instructions conditionnelles..

Détails du tutoriel

• Programme: N'importe quel éditeur de texte
• Version: 1 sur 1
• Difficulté: Moyen
• Temps d'exécution estimé: 25min

Vue d'ensemble

Parfois, vous avez d'énormes jeux de données qui sont analysés en tant que XML et qui doivent être formatés pour que quelqu'un qui ne sait pas lire le XML puisse lire les données. Dans ce tutoriel, je vais vous montrer comment faire avec la puissance de XSL (T)..

Qu'est-ce que XSL (T)?

XSL (T) est l'abréviation de Extendable Stylesheet Language (Transformation). Même s'il s'agit d'une "feuille de style", l'objectif est différent de celui de CSS (Cascading Stylesheets). XSL (T) n’est pas utilisé pour un effet visuel, mais pour extraire des données (ou les transformer) à partir de XML et utiliser la combinaison de HTML et CSS pour les formater. XSL (T) possède également les propriétés dynamiques en ce sens que vous pouvez effectuer des instructions itératives et conditionnelles sur un fichier XML statique..

XSL (T) n'est pas utilisé pour un effet visuel, mais pour extraire des données (ou les transformer) à partir de XML et utiliser la combinaison de HTML et CSS pour les formater..

Pourquoi utiliser XSL (T)?

XSL (T) peut être utilisé pour organiser de grandes arborescences XML afin que tout le monde puisse le lire. Par exemple, un système Google Search Appliance traite les requêtes au format XML. Pour que ce XML soit lu par un utilisateur général, une transformation doit avoir lieu. C’est là que XSL (T) joue un rôle essentiel. Il pourrait également être utilisé pour styler une page de flux RSS puisque la source est entièrement en XML. Il est également utilisé comme langage de gabarit principal pour Autonomy's Teamsite (EMS) et pour des CMS open source tels que Symphony..

XSL (T) réduit également la charge du serveur. Étant donné que XSLT peut effectuer la transformation côté client, votre serveur doit effectuer moins de travail, car vous n'interrogez pas sur les données de la base de données. Des fonctions JavaScript et côté serveur peuvent être configurées pour indiquer au document d'utiliser un modèle XSL (T) spécifique ou vous pouvez l'installer dans le fichier XML réel. Pour ce tutoriel, nous allons simplement créer le modèle XSL (T) dans le fichier XML..

Commencer

Notre objectif est de créer une liste des vacances que nous souhaitons organiser et de procéder à une certaine logique des données pour nous indiquer les destinations en dehors de notre gamme de prix. Dans ce cas, notre budget est de 999 $ pour nos vacances et nous indiquerons quand le prix dépassera notre budget. Nous les commanderons également par ordre décroissant pour que nous puissions voir immédiatement quels trajets ne font pas partie de notre budget..

Tout d'abord, vous allez avoir besoin d'un fichier XML. Allez-y et ouvrez votre éditeur de texte préféré, créez un nouveau fichier et appelez-le trips.xml. J'ai fourni un exemple de fichier XML que vous pouvez télécharger et utiliser ou que vous pouvez copier et coller dans le code ci-dessous..

     Etats-Unis Floride Orlando 1000   Etats-Unis Michigan Detroit 600   Espagne Madrid 5000   Etats-Unis Californie San Jose 800  

La première et unique chose à faire dans ce document est d’ajouter une référence à l’emplacement de notre fichier .xsl. Dans ce cas, nous allons créer une feuille de style appelée trips.xsl.

  … 

Début de la feuille de style extensible

Commencez par créer un nouveau document dans votre éditeur de texte préféré et enregistrez-le sous le nom trips.xsl. Ensuite, nous pouvons démarrer la feuille de style actuelle. Vous devez d’abord spécifier la version XML et le codage du modèle. Si vous connaissez XML, c'est la même version et la même syntaxe de codage.

 … 

De là, nous pouvons plonger dans l'écriture de XSL. Pour démarrer la feuille de style, nous devons d’abord informer le navigateur que nous utilisons une feuille de style XSL et quelle version. Cet élément doit envelopper toute votre marque et doit être fermé à la fin du document, sinon le document ne se transformera pas..

    … 

Si nous voulons valider le XHTML dans notre document par rapport aux normes W3C, nous devrons alors inclure un doctype à utiliser lors de la transformation et du rendu. Ici, nous allons utiliser la DTD XHTML Strict. Nous faisons cela en mettant en place un élément de fermeture automatique appelé xsl: sortie. Avec dans cet élément nous appellerons le doctype.

     … 

Ensuite, nous allons commencer le modèle actuel. Entre les balises d'ouverture et de fermeture du modèle, tous les autres éléments XSL (T) se trouvent sur XHTML. Il est important de noter que vous avez défini une rencontre pour le modèle. Cet attribut indique essentiellement aller à la racine du document XML.

Transformation

La première chose que nous devons faire maintenant est de démarrer une mise en page XHTML de base et de l’emboîter dans notre xsl: template Mots clés. J'ai également lié un fichier css à un document pour donner du style au document, mais son installation dépasse le cadre de ce didacticiel..

…          … 

Notre premier objectif est donc de prendre l'élément title du document XML et de placer ces données dans le titre du document html..

Avant de commencer par le XSL, il est important de noter où existe le "titre" dans l’arborescence XML. Dans ce cas, le titre est un descendant direct de l'élément racine des vacances. Nous pouvons maintenant commencer à écrire notre XSL. Pour pouvoir indiquer au navigateur l'emplacement où va se trouver une donnée correspondante, nous utilisons l'élément xsl: value-of.

Nous sommes déjà à la racine du document via la balise xsl: template, mais nous devons aller plus loin dans l’arborescence XML pour sélectionner les données que nous voulons. Dans ce cas, nous allons rechercher dans le document un élément racine de vacances avec enfant du titre..

…    … 

Lorsque nous ouvrons notre fichier XML (trips.xml) dans le navigateur, notre résultat est l’élément title affiché dans la barre de titre du navigateur, où nous nous attendions à ce qu’il se trouve dans un site XHMTL normal. Notez également que nous ne voyons plus l’arborescence XML. Cependant, lorsque nous voyons la source, nous voyons que la source du document est XML.

Nous pouvons aller un peu plus loin pour prouver que la transformation de XML en XHTML s'est produite dans le navigateur en utilisant un outil tel que FireBug ou Safari Inspector..

Pour ajouter une organisation visuelle, je vais ajouter un balisage afin que nos données soient un peu plus facilement consultables..

…   
 
 
 
  
 
 
… 

Comme vous pouvez le voir ci-dessus, j'ai réutilisé l'élément title une fois de plus, mais cette fois dans le corps du document. Cela peut être extrêmement utile pour la réutilisation et la réutilisation du contenu.

Ensuite, nous allons vouloir transformer nos "voyages" en XHTML. Le bon sens dit que nous devrions pouvoir appeler un autre xsl: valeur-de mais cette fois en appelant le noeud enfant de "trip". Cela fonctionnerait si nous n'avions qu'un seul voyage. Cependant, comme nous avons plusieurs déplacements, nous devons effectuer des itérations ou une boucle dans le document XML..

Itération aka Looping

Comme dans tous les langages de programmation, il existe des instructions d'itération qui parcourent un ensemble de données spécifique et y appliquent des méthodes. XLS (T) a des fonctionnalités similaires pour extraire des données d'un document XML.

… … … 

L'extrait ci-dessus fait à peu près ce que vous attendez de lui. C'est dire xsl: pour chacun élément sélectionner tout ce qui existe sur le chemin vacances / pourboire.

Cependant, pour extraire réellement les données, nous devons faire un peu plus de travail. Comme notre budget pour les voyages est de 999 $, nous allons devoir mettre en place une logique sur les données. Mais avant cela, permet de trier les données par prix dans l'ordre décroissant..

Tri

…  … … 

Comme vous pouvez le voir ci-dessus, le tri des données par un nœud spécifique est assez facile. Depuis le xsl: pour chacun déclaration sélectionne le nœud de voyage et définit la portée, nous pouvons simplement dire xsl: sort pour sélectionner le nœud de prix et recherchez le Type de données nombre puis définissez le ordre à descendant. Il est important de noter que le xsl: sort instruction est à fermeture automatique ().

Prévisualisation

À ce stade, vous vous demandez peut-être à quoi ressemble cette liste de vacances. Pour prévisualiser ce que nous avons ouvert trips.xml dans votre navigateur. Assurez-vous que vous ne visualisez pas la .xsl fichier.

Vous vous demandez probablement pourquoi nous n'avons aucun résultat. En effet, nous n’avons pas recherché quelles données examiner. le xsl: sort instruction n'est pas la recherche de données, c'est simplement un filtre pour quand les données sont présentes.

Choisir et tester

Étant donné que nous voulons donner des indications sur les prix hors budget, nous devons Tester contre certains paramètres. Nous faisons cela avec la combinaison de xsl: choisissez, xsl: quand test = " et xsl: sinon. Si vous avez une expérience en programmation, vous devez reconnaître ce concept de contrôle de flux de conditions. Sinon c'est quand même assez simple à suivre.

     BLAH   SPOT   

Nous commençons le flux logique avec xsl: choisissez, cela va initialiser la déclaration similaire à si dans des langues comme PHP. Juste après, nous avons notre premier tester. Nous disons à XSL (T) que quand le prix est supérieur à (>) 999 BLAH, sinon BLIP.

Ensuite, nous devons remplacer BLAH et BLIP par des crochets à notre XML.

…   
$ ,    
  …  … 

Dans l'extrait ci-dessus, nous configurons notre élément de liste avec une classe de "too-much". Cette classe colorera les voyages qui sortent de notre budget en rouge. Nous utilisons ensuite xsl: valeur-de saisir le prix, la ville, l'état, le pays et la date. Il est important de noter que la date peut être accessible à partir de chaque nœud "trip" en utilisant le symbole @. Ces mêmes types de déclarations ont été vus plus tôt lorsque vous avez obtenu le titre de notre liste. Nous avons également ajouté le symbole dollar ($) et la virgule () pour formater correctement les données..

   
$ ,    
   
$ ,    
  

Nous devons ensuite énoncer ce que nous voulons faire des autres éléments s’ils respectent notre contrainte de moins de 999 $. Dans ce cas, nous allons simplement les imprimer dans un élément de liste auquel aucune classe particulière n'est attachée. Nous passons et sélectionnons tous les mêmes nœuds que nous avons fait pour le trop nœuds (prix, ville, état, pays et date).

Tout mettre en place

           
 
 
 
     
$ ,    
   
$ ,    
    
 
 
    

À ce stade, nous devrions avoir quelque chose d’utile à regarder dans le navigateur..

Ouvrez trips.xml comme avant. Si tout s'est bien passé, vous devriez avoir quelque chose de similaire à ce qui est montré ci-dessus. XSL (T) est un langage très puissant qui vous permet de modifier radicalement la présentation des données XML. Voici quelques ressources pour en savoir plus sur XSL (T)..

• Documentation du W3C
• W3C Schools XSL
• XSLT Wikipedia
• XSLT Second Edition de Doug Tidwell

Écrire un tutoriel Plus

Saviez-vous que vous pouvez gagner jusqu'à 600 USD en écrivant un tutoriel et / ou un screencast PLUS pour nous?? Nous recherchons des didacticiels détaillés et bien écrits sur HTML, CSS, PHP et JavaScript. Si vous en avez la possibilité, veuillez contacter Jeffrey à l'adresse [email protected]..

Veuillez noter que la rémunération réelle dépendra de la qualité du didacticiel final et du screencast..

• Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..