Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 28
Zur Übersicht

28. XML + XSL —> HTML (21.05.2000)

Der MSIE 5.x verarbeitet XML-Dateien und stellt diese als Baumstruktur dar. Mittels XSL-Anweisungen lassen sich die XML-Daten in eine "Browser-kompatiblere" Darstellung überführen. In der Quellcode-Ansicht wird jedoch nicht das evtl. zur Weiterverarbeitung benötigte HTML-Dokument angezeigt, sondern der Original-XML-Code.

Auch ohne zusätzliche Software gibt der IE diese Informationen preis. Der Schlüssel ist das im IE implementierte MS-XML-DOM (Document Object Model). Im folgenden Beispiel wird eine XML-Bücherliste als Tabelle ausgegeben. Die verwendeten Dateien haben diese Struktur: 

      buecher.dtd – die Document Type Definition

      <!ELEMENT buecher (eintrag)+>
      <!ELEMENT eintrag (autor, titel, verlag, jahr, preis, isbn)>
      <!ELEMENT autor (#PCDATA)>
      <!ELEMENT titel (#PCDATA)>
      <!ELEMENT verlag (#PCDATA)>
      <!ELEMENT jahr (#PCDATA)>
      <!ELEMENT preis (#PCDATA)>
      <!ELEMENT isbn (#PCDATA)>
      <!ATTLIST eintrag nr CDATA #REQUIRED>


      buecher.xml – die eigentlichen XML-Daten

      <?xml version="1.0" encoding="iso-8859-1" ?>
      <?xml-stylesheet href="buecher.xsl" type="text/xsl" ?>
      <!DOCTYPE buecher SYSTEM "buecher.dtd">

      <buecher>
        <eintrag nr="001">
          <autor>Chuck Musciano / Bill Kennedy</autor>
          <titel>HTML - Das umfassende Referenzwerk</titel>
          <verlag>O'REILLY Verlag</verlag>
          <jahr>1999</jahr>
          <preis>69.00 DM</preis>
          <isbn>3-89721-102-5</isbn>
        </eintrag>
        <eintrag nr="002">
          ...
        </eintrag>
      </buecher>


      buecher.xsl – das Stylesheet zur Umwandlung in HTML

      <?xml version="1.0" encoding="iso-8859-1" ?>
      <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

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

      <HTML>
      <HEAD>
      <TITLE>Buecherliste</TITLE>
      <LINK REL="stylesheet" HREF="buecher.css" TYPE="text/css" />
      </HEAD>
      <BODY BGCOLOR="#EEEEEE">
      <H2>XML-Buecherliste als Tabelle</H2>

      <TABLE BORDER="1" WIDTH="100%">
      <TR CLASS="ueberschrift">
      <TD>Nr.</TD>
      <TD>Autor</TD>
      <TD>Titel</TD>
      <TD>Verlag</TD>
      <TD>Jahr</TD>
      <TD>Preis</TD>
      <TD>ISBN</TD>
      </TR>

      <xsl:for-each select="buecher/eintrag">
      <TR>
      <TD CLASS="schwarz"><xsl:value-of select="@nr" /></TD>
      <TD CLASS="blau"><xsl:value-of select="autor" /></TD>
      <TD CLASS="rot"><xsl:value-of select="titel" /></TD>
      <TD CLASS="gruen"><xsl:value-of select="verlag" /></TD>
      <TD CLASS="schwarz"><xsl:value-of select="jahr" /></TD>
      <TD CLASS="blau"><xsl:value-of select="preis" /></TD>
      <TD CLASS="orange"><xsl:value-of select="isbn" /></TD>
      </TR>
      </xsl:for-each>

      </TABLE>
      </BODY>
      </HTML>

      </xsl:template>
      </xsl:stylesheet>
Zur Formatierung der XML-Daten kommt zusätzlich die externe CSS-Datei buecher.css zum Einsatz.

Das Grundprinzip der Verarbeitung zeigt die JavaScript-Funktion ConvertXML2HTML(). Aus den Forumularfeldern werden die Namen der XML- bzw. XSL-Dateien ausgelesen und anschließend durch ActiveX-Methodenaufrufe verarbeitet. Das Ergebnis ist HTML-Code, der in einen TEXTAREA-Bereich geschrieben wird und mittels Zwischenablage weiterverarbeitet werden kann.

Anmerkung: Das Script funktioniert nur, wenn im IE die Optionen "ActiveX-Steuerelemente ausführen, die für Scripting sicher sind" und "ActiveX-Steuerelemente ausführen" eingeschaltet sind.

      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function ConvertXML2HTML()
      {
      var xmlfile, xslfile, xmlinput, xslinput;

      // Dateinamen uebergeben
      xmlfile=document.inout.xml.value;
      xslfile=document.inout.xsl.value;

      // XML laden
      xmlinput = new ActiveXObject("Microsoft.XMLDOM");
      xmlinput.async = false;
      xmlinput.load(xmlfile);

      // XSL laden
      xslinput = new ActiveXObject("Microsoft.XMLDOM");
      xslinput.async = false;
      xslinput.load(xslfile);

      // generierten HTML-Code ausgeben
      document.inout.code.value =
            xmlinput.transformNode(xslinput.documentElement);
      }

      //-->
      </SCRIPT>


In der zum Download bereit stehenden "Komfortversion" lassen sich die Dateien mittels Dateidialog auswählen (TYPE="file" statt TYPE="text" in den INPUT-Feldern). Zusätzlich wurde das lokale Abspeichern des HTML-Outputs ermöglicht. Dabei wird das "File System Object" (FSO) verwendet.


      function OutputHTML()
      {
      var filename, fso;
      
      if ((document.inout.html.value=="") || (document.inout.code.value==""))
      {
      alert("Kein HTML-Dateiname angegeben\noder kein HTML-Output vorhanden!")
      }
      
      else
      {
      fso=new ActiveXObject("Scripting.FileSystemObject");
      filename=fso.CreateTextFile(document.inout.html.value);
      filename.write(document.inout.code.value);
      filename.close();
      }
      }