Ressources web de feuille de style (XSL)

  • Article

Utilisez les ressources web de feuille de style (XSL) pour transformer des données XML.

Fonctionnalités des ressources web XSL

Utilisez les ressources web XSL pour transformer des données XML utilisées par votre solution.

Les ressources web suivantes fonctionnent ensemble pour restituer une page qui affiche une table à l’aide des données de la ressource web XML. Les fichiers source de ces ressources web font partie de l’exemple d’importation de ressources web qui se trouve dans le dossier filestoimport. Téléchargez l’exemple Importer des fichiers en tant que ressources web.

Ressource web HTML : sample_/ImportWebResources/Content/ShowData.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title></title>
    <script src="Script/Script.js" type="text/javascript"></script>
    <link href="CSS/Styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body onload="SDK.ImportWebResources.showData()">
    <div id="results" />
  </body>
</html>

Ressource web XSL : sample_/ImportWebResources/XSL/Transform.xslt

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
               xmlns:xsl="https://www.w3.org/1999/XSL/Transform"
               xmlns:msxsl="urn:schemas-microsoft-com:xslt"
               exclude-result-prefixes="msxsl"
>
<xsl:output method="xml"
            indent="yes"/>

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

<xsl:template match="people">
 <xsl:element name="table">
  <xsl:element name="thead">
   <xsl:element name="tr">
    <xsl:element name="th">
     <xsl:text>First Name</xsl:text>
    </xsl:element>
    <xsl:element name="th">
     <xsl:text>Last Name</xsl:text>
    </xsl:element>
   </xsl:element>
  </xsl:element>
  <xsl:element name="tbody">
   <xsl:apply-templates />
  </xsl:element>
 </xsl:element>

</xsl:template>

<xsl:template match="person">
 <xsl:element name="tr">
  <xsl:element name="td">
   <xsl:value-of select="@firstName"/>
  </xsl:element>
  <xsl:element name="td">
   <xsl:value-of select="@lastName"/>
  </xsl:element>
 </xsl:element>

</xsl:template>

</xsl:stylesheet>

Ressource web XML : sample_/ImportWebResources/Data/Data.xml

<?xml version="1.0" encoding="utf-8" ?>
<people>
<person firstName="Apurva"
        lastName="Dalia" />
<person firstName="Ofer"
        lastName="Daliot" />
<person firstName="Jim"
        lastName="Daly" />
<person firstName="Ryan"
        lastName="Danner" />
<person firstName="Mike"
        lastName="Danseglio" />
<person firstName="Alex"
        lastName="Darrow" />
</people>

Ressource web de script : sample_/ImportWebResources/Script/Script.js

//If the SDK namespace object is not defined, create it.
if (typeof SDK == "undefined") {
  SDK = {};
}
// Create Namespace container for functions in this library;
SDK.ImportWebResources = {
  dataFile: "Data/Data.xml",
  transformFile: "XSL/Transform.xslt",
  showData: function () {
    //Create an XML document from the Data.xml file
    var dataXml = new ActiveXObject("Msxml2.DOMDocument.6.0");
    dataXml.async = false;
    dataXml.load(this.dataFile);

    //Create an XML document from the Transform.xslt file
    var transformXSLT = new ActiveXObject("Msxml2.DOMDocument.6.0");
    transformXSLT.async = false;
    transformXSLT.load(this.transformFile);

    // Set the innerHTML of the results area to the output of the transformation.
    var resultsArea = document.getElementById("results");
    resultsArea.innerHTML = dataXml.transformNode(transformXSLT);
  },
};

CSS Ressource web : sample_/ImportWebResources/CSS/Styles.css

body {
  font-family: Calibri;
}
table {
  border: 1px solid gray;
  border-collapse: collapse;
}
th {
  text-align: left;
  border: 1px solid gray;
}
td {
  border: 1px solid gray;
}

Voir aussi

Ressources Web
Utilisation des ressources web de page web (HTML)
Utilisation des ressources web de feuille de style (CSS)
Utilisation des ressources web JavaScript
Utilisation des ressources web de données (XML)
Utilisation des ressources Web d’image (JPG, PNG, GIF)

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).