mozilla
Vos résultats de recherche

    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);
    }
    

    Interwiki Languages Links

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: Fredchat, Jeremie
    Dernière mise à jour par : Jeremie,