TUTORIELS 
Rendre un fichier RSS lisible avec XSL (2)
Bien maîtrisé, XSL permet de tout faire à partir d'un fichier de type XML. Deuxième partie: affichage des informations du fichier sous forme de page HTML classique.  (03 octobre2003)
 
Discutez en sur les forums
Après avoir vu dans la première partie comment remplacer par un message d'explication l'affichage XML d'un fichier RSS dans un navigateur moderne (IE6, Mozilla...), nous allons voir ici comment, malgré tout, faire en sorte que notre visiteur puisse avoir les informations qu'il recherche : nous allons afficher le contenu de notre fichier RSS à l'aider de balises et autres styles HTML (sans oublier d'ajouter la fameuse explication sur les agrégateurs).

Le fichier RSS
Rappelons le contenu de notre fichier RSS d'exemple :

<?xml version="1.0" encoding="iso-8859-1"?>
  <rss version="2.0">
    <channel>
       <title>Nouvelles de mon site</title>
       <link>http://www.monsite.com/</link>
       <description>Mon Site - ma vie, mon oeuvre</description>
       <language>fr</language>
       <item>
          <title>Le dernier article en date...</title>
          <description>
            Encore plus de choses passionnantes.
          </description>
          <guid>
             http://www.monsite.com/2003/09/26/encore_un_scoop
          </guid>
       </item>
       <item>
          <title>L'avant-dernier article en date...</title>
          <description>
            Plein de choses passionnantes.
          </description>
         <guid>
            http://www.monsite.com/2003/09/25/un_scoop
          </guid>
       </item>
    </channel>
  </rss>

Vous pouvez le visionner tel que le verrait le visiteur en cliquant ici.

Voici notre nouveau fichier XSL :

<?xml version="1.0" encoding="iso-8859-1"?>
  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html"/>
    <xsl:template match="/developpeur/rss" >
      <html xml:lang="fr">
        <head>
          <title>MonSite.com</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        </head>
        <body>
          <xsl:for-each select="channel">
            <div class="channel">
              <h2><xsl:value-of select="title" /></h2>
              <p><xsl:value-of select="description" /></p>
              <ul>
                <xsl:for-each select="item">
                  <li><a href="{guid}" title="{description}><xsl:value-of select="title" /></a></li>
                </xsl:for-each>
              </ul>
            </div>
          </xsl:for-each>
<hr />
Notez que vous accédez à une mise en page d'un fichier RSS, qui autrement ne serait pas lisible dans un navigateur.<br />
Pour pouvoir vous abonner au flux RSS de notre site, et ainsi être tenu au courant de nos nouveautés dès qu'elles sont publiées, vous devez télécharger un aggregateur, tel que <a href="http://www.bradsoft.com/feeddemon/beta/" title="FeedDemon">FeedDemon</a>.
        </body>
      </html>
    </xsl:template>
  </xsl:stylesheet>

Le code XSL, en gras, n'est pas trop difficile à comprendre : une boucle for-each applique son contenu à tous les éléments channel du fichier RSS.
On extrait l'élément title pour en faire un titre, l'élément description pour en faire un chapeau sous le titre, puis une seconde boucle permet de créer une liste de tous les éléments item, en utilisant le titre comme texte affiché, l'élément guid comme URL, la description étant lisible en survolant le lien avec la souris.
Notez que la {guid} correspond à un modèle d'attribut pour la balise guid, qui permet de reconnaître la valeur d'un attribut au sein du noeud en cours (ici, item). C'est en quelque sorte une autre manière d'écrire :
<xsl:value-of select="guid" />.

Le résultat peut bien entendu être modifié à loisir, notamment par l'ajout d'une le CSS, voire par l'intégration de l'interface normale du site dans la sortie HTML.

 
[ Xavier BorderieJDNet
 
Accueil | Haut de page