Le XML (3) - mise en forme

Note: Exécuter les fichiers depuis un serveur web personnel local, la plupart des navigateurs ont désactivé ou restreint la prise en charge des transformations xslt pour des raisons de sécurité

XSL (eXtensible Stylesheet Language) est un langage de style pour XML.
XSLT signifie “Transformations XSL” : permet de transformer des documents XML dans d'autres formats (comme transformer XML en HTML par exemple).

Le XML est un langage de structuration de données utilisant des balises. Il existe plusieurs moyens pour mettre en forme du XML, mais le plus puissant est le XSLT (le CSS est aussi utilisable, mais limité).

Nous allons utiliser le fichier de bibliographie vu précédemment pour le mettre en forme dans un tableau :

<?xml version="1.0" encoding="UTF-8"?>
<!-- La ligne ci-dessus est le prologue -->
<!-- Élément racine -->
<biblio>
  <!-- Premier enfant -->
  <livre>
    <!-- Élément enfant titre -->
    <titre>Les Misérables</titre>
    <auteur>Victor Hugo</auteur>
    <nb_tomes>3</nb_tomes>
  </livre>
  <livre>
    <titre>L'Assomoir</titre>
    <auteur>Émile Zola</auteur>
  </livre>
  <livre lang="en">
    <titre>David Copperfield</titre>
    <auteur>Charles Dickens</auteur>
    <nb_tomes>3</nb_tomes>
  </livre>
</biblio>

En principe vous avez déjà ce fichier (ou un équivalent), si ce n’est pas le cas, créez-le dans un dossier « bibliographie » et enregistrerez-le sous le nom « biblio.xml » et placez-y ce code.

Soit le fichier XML suivant :

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="menu.xsl" type="text/xsl"?>
<breakfast_menu>
  <food>
   <name>Belgian Waffles</name>
   <price>$5.95</price>
   <description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
   <calories>650</calories>
  </food>
  <food>
   <name>Strawberry Belgian Waffles</name>
   <price>$7.95</price>
   <description>Light Belgian waffles covered with strawberries and whipped cream</description>
   <calories>900</calories>
  </food>
  <food>
   <name>Berry-Berry Belgian Waffles</name>
   <price>$8.95</price>
   <description>Light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
   <calories>900</calories>
  </food>
  <food>
   <name>French Toast</name>
   <price>$4.50</price>
   <description>Thick slices made from our homemade sourdough bread</description>
   <calories>600</calories>
  </food>
  <food>
   <name>Homestyle Breakfast</name>
   <price>$6.95</price>
   <description>Two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
   <calories>950</calories>
  </food>
</breakfast_menu>

Son fichier XSLT attaché :

<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
    <h1>MENU</h1>
    <xsl:for-each select="breakfast_menu/food">
      <div style="background-color:teal;color:white;padding:4px">
        <span style="font-weight:bold"><xsl:value-of select="name"/> - </span>
        <xsl:value-of select="price"/>
      </div>
      <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
        <p>
          <xsl:value-of select="description"/>
          <span style="font-style:italic"> (<xsl:value-of select="calories"/> calories per serving)</span>
        </p>
      </div>
    </xsl:for-each>
  </body>
</html>

Créer ses fichiers dans un dossier « menu », le fichier xml se nomme menu.xml et le fichier xsl menu.xsl

Exécuter le fichier xml dans un navigateur, observer la mise en forme
Dans le fichier XML :
- repérer la ligne de définition du fichier XSL à utiliser
- faire l'arborescence des balises du fichier
Dans le fichier XSL :
- repérer les balises xsl et expliquez-les

Créer le fichier biblio.xsl sur le même modèle et appliquer sa mise en forme à votre fichier biblio.xml

Présenter maintenant votre bibliographie sous la forme d’un tableau.

Quelques ressources :

Le XML (3) - mise en forme

XML et XSLT

Observez un exemple et appliquez-le à votre bibliographie

SIO Wiki