Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Exemple basique

  1. Introduction
  2. Les liaisons JavaScript/XSLT
  3. Exemple basique
  4. Définition de paramètres
  5. Exemple avancé
  6. Liste des interfaces
  7. Ressources
Cette page vient d'être traduite, mais elle a besoin d'un relecteur différent du traducteur. Pensez également à toujours vérifier le contenu avec sa toute dernière version en anglais.

Exemple basique

L'exemple que nous allons voir va charger un fichier XML et lui appliquer une transformation XSL. Nous utiliserons les même fichiers que dans l'exemple Génération de HTML de l'article XSLT dans Gecko. Le fichier XML décrit un article et le fichier XSL formate les informations pour l'affichage.

Figure 4 : fichier XML

Document XML (example1.xml):

  <?xml version="1.0"?>
  <myNS:Article
                         xmlns:myNS="http://devedge.netscape.com/2002/de">
    <myNS:Title>Mon article</myNS:Title>
    <myNS:Authors>
      <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author>
      <myNS:Author>M. Bar</myNS:Author>
    </myNS:Authors>
    <myNS:Body>
      En <em>Espagne</em>, les <strong>pluies</strong> se concentrent
      principalement dans les plaines.
    </myNS:Body>
  </myNS:Article>

Figure 5 : feuille de style XSLT

feuille de style XSL (example1.xsl):

  <?xml version="1.0"?>
  <xsl:stylesheet version="1.0"
                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                           xmlns:myNS="http://devedge.netscape.com/2002/de">

    <xsl:output method="html" />

    <xsl:template match="/">
      <html>

        <head>

          <title>
            <xsl:value-of select="/myNS:Article/myNS:Title"/>
          </title>

          <style type="text/css">
            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
          </style>

        </head>

        <body>
          <p class="myBox">
            <span class="title">
              <xsl:value-of select="/myNS:Article/myNS:Title"/>
            </span> <br />

            Auteurs :   <br />
              <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
            </p>

          <p class="myBox">
            <xsl:apply-templates select="//myNS:Body"/>
          </p>

        </body>

      </html>
    </xsl:template>

    <xsl:template match="myNS:Author">
       --   <xsl:value-of select="." />

      <xsl:if test="@company">
       ::   <strong>  <xsl:value-of select="@company" />  </strong>
      </xsl:if>

      <br />
    </xsl:template>

    <xsl:template match="myNS:Body">
      <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
      </xsl:copy>
    </xsl:template>

    <xsl:template match="@*|node()">
        <xsl:copy>
          <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
  </xsl:stylesheet>

L'exemple charge en mémoire les deux fichiers .xsl (xslStylesheet) et .xml (xmlDoc) à l'aide de XMLHTTPRequest synchrone. Le fichier .xsl est alors importé (xsltProcessor.importStylesheet(xslStylesheet)) et la transformation exécutée (xsltProcessor.transformToFragment(xmlDoc, document)). Cela permet d'extraire des données après le chargement de la page, sans avoir à la rafraîchir.

Figure 6 : Exemple voir l'exemple

var xslStylesheet;
var xsltProcessor = new XSLTProcessor();
var myDOM;

var xmlDoc;

function Init(){

  // chargement du fichier xslt, example1.xsl
  var myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "example1.xsl", false);
  myXMLHTTPRequest.send(null);

  xslStylesheet = myXMLHTTPRequest.responseXML;
  xsltProcessor.importStylesheet(xslStylesheet);

  // chargement du fichier xml, example1.xml
  myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "example1.xml", false);
  myXMLHTTPRequest.send(null);

  xmlDoc = myXMLHTTPRequest.responseXML;

  var fragment = xsltProcessor.transformToFragment(xmlDoc, document);

  document.getElementById("example").innerHTML = "";

  myDOM = fragment;
  document.getElementById("example").appendChild(fragment);
}

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Sebastianz, Jeremie, Fredchat
 Dernière mise à jour par : Sebastianz,