E-Book Startseite Karteikarten-Programm
0

Allgemeines

Nun ist es endlich soweit: Sie haben den Unterbereich XSLT von dem Bereich XSL-Kurs von dem Hauptkapitel "XML, XSL und DTD lernen" nun fast absolviert. Der letzte Teil dieses Bereichs sind die Beispiele. Hier im XSLT-Bereich haben wir 2 XSLT Beispiele erstellt. Wir wollen diese Beispiele für Sie Schritt für Schritt erklären. Wir machen nur aus diesem Grund eine Schritt für Schritt Anleitung um Ihnen das Programmieren etwas näher zu bringen und dass Sie dafür ein Gefühl bekommen, wie man Webseitenteile im Gesamten programmiert. Bei dem 1. Beispiel handelt es sich um eine kleine Datenbank der 5 beliebtesten Städte Deutschlands. Durch Formatierungen werden die Datenpunkte Name, Bundesland, Fläche und Einwohnerzahl schön gestaltet und in einen Text umgewandelt. In dem Beispiel wird hauptsächlich mit den XSLT-Elementen element, attribute und attribute-set gearbeitet. Das 2. Beispiel ist schon ein wenig aufwendiger. Es handelt sich um eine Formelsammlung von mathematischen Formeln. Mit den Elementen for-each, if und mehreren XPath-Funktionen haben wir ein schönes dynamisches Skript erstellt, dass die Formeln in zwei Teile zerlegt und weitere interessante Features hat.


Städte-Datenbank

Wir beginnen mit der Programmierung der XML-Datei. Ganz oben benötigen wir die XML-Deklaration und den Stylesheet-Verarbeitungshinweis. Das Hauptelement der XML-Datei heißt datenbank. Eine Ebene tiefer befinden sich nun die Elemente für die Städte (stadt), von denen es insgesamt 5 Stück gibt. Innerhalb von jedem stadt-Element gibt es noch 4 untergeordnete Elemente: name, bundesland, flaeche und einwohnerzahl. Sonst gibt es zu der XML-Datei nicht viel zu sagen. Daher hier nun die komplette XML-Datei:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<datenbank>
  <stadt>
    <name>Berlin<name>
    <bundesland>Berlin<bundesland>
    <flaeche>891,85 km²<flaeche>
    <einwohnerzahl>3.543.676<einwohnerzahl>
  </stadt>
  <stadt>
    <name>München<name>
    <bundesland>Bayern<bundesland>
    <flaeche>310,43 km²<flaeche>
    <einwohnerzahl>1.378.176<einwohnerzahl>
  </stadt>
  <stadt>
    <name>Hamburg<name>
    <bundesland>Hamburg<bundesland>
    <flaeche>755,26 km²<flaeche>
    <einwohnerzahl>1.813.587<einwohnerzahl>
  </stadt>
  <stadt>
    <name>Frankfurt am Main<name>
    <bundesland>Hessen<bundesland>
    <flaeche>248,31 km²<flaeche>
    <einwohnerzahl>691.518<einwohnerzahl>
  </stadt>
  <stadt>
    <name>Köln<name>
    <bundesland>Nordrhein-Westfalen<bundesland>
    <flaeche>405,17 km²<flaeche>
    <einwohnerzahl>1.017.155<einwohnerzahl>
  </stadt>
</datenbank>

Wir beginnen nun mit dem XSL-Dokument index.xsl: Dazu benötigen wir als erstes die Deklaration und dann das öffnende xsl:stylesheet-Element. Nun können wir mit der eigentlichen Programmierung anfangen. Jedoch müssen wir als erstes einmal die verschiedenen Attribute in den verschiedenen attribute und attribut-set-Elementen festlegen, die wir später für unsere Formatierungen benötigen. Wir haben insgesamt 3 verschiedene Attributen-Sätze: Einer für den Titel, ein weiteren für die Untertitel / Unterüberschriften und den letzten für den normalen Text. In allen 3 wird das Attribut style mit verschiedenen Werten erstellt. Des Weiteren gibt es bei allen dreien das align-Attribut. Bei titel und untertitel wird der Wert left für align gesetzt, bei text dagegen auf justify.

<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:attribute-set name="titel">
  <xsl:attribute name="style">font-family: Arial; font-size: 27px; font-weight: bold;</xsl:attribute>
  <xsl:attribute name="align">left</xsl:attribute>
</xsl:attribute-set>
 
<xsl:attribute-set name="untertitel">
  <xsl:attribute name="style">font-family: Times; font-size: 20px;</xsl:attribute>
  <xsl:attribute name="align">left</xsl:attribute>
</xsl:attribute-set>
 
<xsl:attribute-set name="text">
  <xsl:attribute name="style">font-family: sans-serif; font-size: 18px;</xsl:attribute>
  <xsl:attribute name="align">justify</xsl:attribute>
</xsl:attribute-set>

Nun benötigen wir die Template-Definition für das Wurzelelement. Innerhalb des Templates wird das HTML-Grundgerüst notiert, die Hauptüberschrift erstellt, ein apply-templates Verweis gemacht und zum Schluss ein kleiner Hinweis-Text eingeblendet wird. Die Hauptüberschrift wird durch xsl:element mit dem Attribut-Set titel verbunden und das Element h1 erstellt. Bei dem Hinweis-Text handelt es sich auch um ein mit xsl:element erzeugtes i-Element von HTML. Dort ist ein Quellvereis mit Datum notiert. Verbunden wird das Element mit dem Attribut-Set text.

<xsl:template match="/">
  <html><head></head><body>
    <xsl:element name="h1" use-attribute-set="titel">Die 5 beliebtesten Städte Deutschlands</xsl:element>
    <xsl:apply-templates />
    <xsl:element name="i" use-attribute-set="text">Quelle: de.wikipedia.org - Webseiten-Stand: 17.05.2013</xsl:element>
  </body></html>
</xsl:template>

Zum Schluss benötigen wir noch eine weitere Template-Definition. Innerhalb des Templates verwenden wir eine for-each-Schleife, die jedes stadt-Element einzeln abarbeitet. Als erstes notieren wir ein Überschriften-Element (h3) mit xsll:element und verbinden es mit dem Attribut-Set untertitel. Dadurch haben wir nun eine kleinere Überschrift für den Text, welcher im name-Element notiert ist. Nun erstellen wir einen HTML-Absatz und verbinden diesen mit dem Attribut-Set text. Innerhalb des Elements notieren wir nun einen Text der mit mehreren value-of-Elementen sehr dynamisch wirkt. Da es sich um den letzten Teil des Dokuments handelt, können wir xsl:stylesheet wieder schließen: So sieht es aus:

<xsl:template match="datenbank">
  <xsl:for-each select="stadt">
    <xsl:element name="h3" use-attribute-set="untertitel"><xsl:value-of select="name" /></xsl:element>
    <xsl:element name="p" use-attribute-set="text">Die Stadt <xsl:value-of select="name" /> befindet sich 
     im Bundesland <xsl:value-of select="bundesland" />. Sie hat eine Fläche von 
     <xsl:value-of select="flaeche" /> auf der <xsl:value-of select="einwohnerzahl" />Menschen leben.
    </xsl:element>
    <xsl:element name="br" use-attribute-set="text"></xsl:element>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Zum Schluss noch mal alle Codes zusammengefügt:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<datenbank>
  <stadt>
    <name>Berlin<name>
    <bundesland>Berlin<bundesland>
    <flaeche>891,85 km²<flaeche>
    <einwohnerzahl>3.543.676<einwohnerzahl>
  </stadt>
  <stadt>
    <name>München<name>
    <bundesland>Bayern<bundesland>
    <flaeche>310,43 km²<flaeche>
    <einwohnerzahl>1.378.176<einwohnerzahl>
  </stadt>
  <stadt>
    <name>Hamburg<name>
    <bundesland>Hamburg<bundesland>
    <flaeche>755,26 km²<flaeche>
    <einwohnerzahl>1.813.587<einwohnerzahl>
  </stadt>
  <stadt>
    <name>Frankfurt am Main<name>
    <bundesland>Hessen<bundesland>
    <flaeche>248,31 km²<flaeche>
    <einwohnerzahl>691.518<einwohnerzahl>
  </stadt>
  <stadt>
    <name>Köln<name>
    <bundesland>Nordrhein-Westfalen<bundesland>
    <flaeche>405,17 km²<flaeche>
    <einwohnerzahl>1.017.155<einwohnerzahl>
  </stadt>
</datenbank>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:attribute-set name="titel">
  <xsl:attribute name="style">font-family: Arial; font-size: 27px; font-weight: bold;</xsl:attribute>
  <xsl:attribute name="align">left</xsl:attribute>
</xsl:attribute-set>
 
<xsl:attribute-set name="untertitel">
  <xsl:attribute name="style">font-family: Times; font-size: 20px;</xsl:attribute>
  <xsl:attribute name="align">left</xsl:attribute>
</xsl:attribute-set>
 
<xsl:attribute-set name="text">
  <xsl:attribute name="style">font-family: sans-serif; font-size: 18px;</xsl:attribute>
  <xsl:attribute name="align">justify</xsl:attribute>
</xsl:attribute-set>
 
<xsl:template match="/">
  <html><head></head><body>
    <xsl:element name="h1" use-attribute-set="titel">Die 5 beliebtesten Städte Deutschlands</xsl:element>
    <xsl:apply-templates />
    <xsl:element name="i" use-attribute-set="text">Quelle: de.wikipedia.org - Webseiten-Stand: 17.05.2013</xsl:element>
  </body></html>
</xsl:template>
 
<xsl:template match="datenbank">
  <xsl:for-each select="stadt">
    <xsl:element name="h3" use-attribute-set="untertitel"><xsl:value-of select="name" /></xsl:element>
    <xsl:element name="p" use-attribute-set="text">Die Stadt <xsl:value-of select="name" /> befindet sich
     im Bundesland <xsl:value-of select="bundesland" />. Sie hat eine Fläche von
     <xsl:value-of select="flaeche" /> auf der <xsl:value-of select="einwohnerzahl" />Menschen leben.
    </xsl:element>
    <xsl:element name="br" use-attribute-set="text"></xsl:element>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (HTML-Datei)



Formelsammlung

Bei unserem 2. Beispiel handelt es sich um eine kleine Formelsammlung. Als erstes erklären wir mal die XML-Datei. Das Wurzelelement der Datei heißt formelsammlung. Unterhalb dieses Elements gibt es nun mehrere Kategorien: Rechteck, Trapez, Parallelogramm, Prisma und Kreis. Unterhalb dieser Kategorie-Elemente befinden sich ein oder mehrere Elemente mit dem Namen formel. Alle formel-Elemente enthalten irgendeine mathematische Formel. Bei der Formel handelt es sich entweder um eine Flächeninhaltsformel, Oberflächenformel, Volumenformel oder Umfangformel. Später werden die Formeln mit bestimmten Befehlen im XSL-Skript schön in einer Tabelle gestaltet und bearbeitet. So sieht nun das vollständige XML-Skript aus:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<formelsammlung>
  <rechteck>
    <formel>A = a * b</formel>
    <formel>O = 6 * a²</formel>
    <formel>O = 2 * a * b + 2 * a * c + 2 * b * c</formel>
    <formel>V = a³</formel>
    <formel>V = a * b *c</formel>
  </rechteck>
  <trapez>
    <formel>A = ((a + b) / 2) * h</formel>
  </trapez>
  <parallelogramm>
    <formel>A = a * ha</formel>
  </parallelogramm>
  <prisma>
    <formel>O = 2 * G + M</formel>
    <formel>V = G * h</formel>
  </prisma>
  <kreis>
    <formel>u = Pi * d</formel>
    <formel>u = Pi * r * 2</formel>
    <formel>A = Pi * r²</formel>
    <formel>O = 2 * Pi * r² +M</formel>
    <formel>V = Pi * r² * h</formel>
  </kreis>
</formelsammlung>

Nachdem die XML-Datei nun vollständig ist, machen wir weiter mit der XSL-Datei. Als erstes benötigen wir wieder die Deklaration, das Wurzelelement und das Haupt-Template. Im Haupt-Template wird das HTML-Grundgerüst aufgebaut und die Tabelle erstellt. Des Weiteren wird dort auch die Kopfzeile der Tabelle (th statt td) erstellt. Um eine feste Breite zu haben, wurde in den th-Elementen auch gleich die Breite der einzelnen Spalten festgelegt. Unter dem 1. tr-Element folgt dann der xsl:apply-templates Aufruf.

<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html><head></head><body>
  <table border="1">
    <tr>
      <th width="250px">Bereich</th>
      <th width="250px">Formel (linker Teil - Ergebnis)</th>
      <th width="250px">Formel (rechter Teil - Rechnung)</th>
      <th width="250px">Formel (ganzer Teil)</th>
    </tr>
    <xsl:apply-templates />
  </table>
  </body></html>
</xsl:template>

Wie sie ja bereits wissen, gibt es insgesamt 5 verschiedene Kategorien. Um weiter arbeiten zu können benötigen wir nun für jede Kategorie ein eigenes Template. Dort wird eine for-each-Schleife auf das Element formel angewendet. Dann erstellen wir eine Tabellen-Spalte. In die erste Zelle wird das Wort Rechteck geschrieben. In der nächsten Zelle werden mehrere if-Bedingungen gestellt. Mit der Funktion starts-with() wird der erste Buchstaben überprüft, ob es sich um ein A, O, V oder u handelt. Anhand dessen wird mit der if-Bedingung überprüft, ob es sich um eine Flächeninhalts-, Oberflächen-, Volumen- oder Umfangsformel handelt. Als Inhalt in der Zelle erhalten wir dann Flächeninhalt, Oberfläche, Volumen oder Umfang. In der nächsten Zelle wird mit der Funktion substring-after() der Inhalt des XML-Elements formel nach dem Gleichheitszeichen extrahiert und ausgegeben. Somit wird nicht die komplette Formel angezeigt sondern nur die Rechnung. In der letzten Zelle wird die Formel nochmals komplett angezeigt. Die Unterschiede zwischen den 5 verschiedenen Templates sind sehr gering, denn nur der Wert des match-Attributs des template-Elements und das Wortes innerhalb der ersten Zelle sind je nach Kategorie anders. Deshalb hier nun alle 5 Templates und zum Schluss mit dem schließenden XSL-Wurzelelement:

<xsl:template match="rechteck">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Rechteck</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
 
<xsl:template match="trapez">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Trapez</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
 
<xsl:template match="parallelogramm">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Parallelogramm</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
 
<xsl:template match="prisma">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Prisma</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
 
<xsl:template match="kreis">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Kreis</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Das war es auch schon: Hier noch mal die kompletten Codes:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<formelsammlung>
  <rechteck>
    <formel>A = a * b</formel>
    <formel>O = 6 * a¦</formel>
    <formel>O = 2 * a * b + 2 * a * c + 2 * b * c</formel>
    <formel>V = a¦</formel>
    <formel>V = a * b *c</formel>
  </rechteck>
  <trapez>
    <formel>A = ((a + b) / 2) * h</formel>
  </trapez>
  <parallelogramm>
    <formel>A = a * ha</formel>
  </parallelogramm>
  <prisma>
    <formel>O = 2 * G + M</formel>
    <formel>V = G * h</formel>
  </prisma>
  <kreis>
    <formel>u = Pi * d</formel>
    <formel>u = Pi * r * 2</formel>
    <formel>A = Pi * r¦</formel>
    <formel>O = 2 * Pi * r¦ +M</formel>
    <formel>V = Pi * r¦ * h</formel>
  </kreis>
</formelsammlung>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html><head></head><body>
  <table border="1">
    <tr>
      <th width="250px">Bereich</th>
      <th width="250px">Formel (linker Teil - Ergebnis)</th>
      <th width="250px">Formel (rechter Teil - Rechnung)</th>
      <th width="250px">Formel (ganzer Teil)</th>
    </tr>
    <xsl:apply-templates />
  </table>
  </body></html>
</xsl:template>
 
<xsl:template match="rechteck">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Rechteck</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
 
<xsl:template match="trapez">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Trapez</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
 
<xsl:template match="parallelogramm">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Parallelogramm</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
 
<xsl:template match="prisma">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Prisma</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
 
<xsl:template match="kreis">
  <xsl:for-each select="formel">
    <tr>
      <td align="center">Kreis</td>
      <td align="center"><xsl:if test="starts-with(.,'A')">Flächeninhalt</xsl:if>
                         <xsl:if test="starts-with(.,'O')">Oberfläche</xsl:if>
                         <xsl:if test="starts-with(.,'V')">Volumen</xsl:if>
                         <xsl:if test="starts-with(.,'u')">Umfang</xsl:if></td>
      <td align="center"><xsl:value-of select="substring-after(., '=')" /></td>
      <td align="center"><xsl:value-of select="." /></td>
    </tr>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (HTML-Datei)



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de