Freigeben über

Webressourcen von Stylesheets (XSL)

Verwenden Sie XSL-Webressourcen (Stylesheet), um XML-Daten zu transformieren.

Verwendungsmöglichkeiten für XSL-Webressourcen

Verwenden Sie XSL-Webressourcen, um XML-Daten zu transformieren, die von Ihrer Lösung verwendet werden.

Folgende Webressourcen arbeiten zusammen, um eine Seite zu rendern, die eine Tabelle mit den Daten in der XML-Webressource anzeigt. Die Quelldateien für diese Webressourcen sind Teil des Beispiels zum Importieren von Webressourcen, das im Ordner filestoimport enthalten ist. Herunterladen der Beispiel-Importdateien als Webressourcen.

HTML-Webressource: 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>

XSL-Webressource: 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>

XML-Webressource: 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>

Skript-Webressource: 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 Webressource: 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;
}

Siehe auch

Webressourcen
Webressourcen für Webseiten (HTML) verwenden
Verwendung von StyleSheet (CSS)-Webressourcen
Verwenden der JavaScript-Webressourcen
Webressourcen für Daten (XML) verwenden
Verwenden von Bild (JPG, PNG, GIF)-Webressourcen

  • Last updated on