Exemple basique

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="https://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="https://www.w3.org/1999/XSL/Transform"
                           xmlns:myNS="https://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);
}

« Précédent Suivant »

Exemple basique

Exemple basique

Étiquettes et contributeurs liés au document