Gelbe Seiten

Übung 8

Schreiben Sie eine XSLT-Transformation, mit welcher alle OpenStreetMap-Daten aus dem Input-Ordner (Berlin_Ausschnitt.xml, Muenchen_Ausschnitt.xml und Stuttgart_Mitte.xml) zusammengefasst werden. Das Ergebnis soll eine HTML-Seite mit einer gemeinsamen Tabelle aller Shops von allen Städten sein. Wenden Sie die Transformation auf die XSLT-Datei an.

Code-Beispiel: Output-Vorgabe zu Übung 8 (Auszug).

<table id="liste" class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Typ</th>
      <th>Shop</th>
      <th>Adresse</th>
      <th>Telefon</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
    ...
    <tr>
      <td>bakery</td>
      <td>H&amp;F Bäckerei</td>
      <td>Friedrichstraße 9A, 70174 Stuttgart</td>
      <td>+49 711 3007409</td>
      <td><a href="http://www.hf-baeckerei.de/">Website</a></td>
    </tr>
    ...
  </tbody>
</table>

Ausschnitt der HTML-Tabelle im Transformationsergebnis.

Kopieren Sie die gelisteten JavaScript- und CSS-Einbindungen um die Tabelle in den head der HTML-Datei, um die HTML-Tabelle durchsuchbar zu machen.

Code-Beispiel: Styling.

<link rel="stylesheet" href="../styling/dataTables/bootstrap.min.css" />
<link rel="stylesheet" href="../styling/dataTables/dataTables.bootstrap.css" />
<link rel="stylesheet" href="../styling/dataTables/dataTables.colVis.css" />
<link rel="stylesheet" href="../styling/styles.css" />
<script src="../styling/dataTables/jquery-1.11.1.min.js"></script>
<script src="../styling/dataTables/jquery.dataTables.min.js"></script>
<script src="../styling/dataTables/dataTables.bootstrap.js"></script>
<script src="../styling/dataTables/dataTables.colVis.js"></script>
<script src="../styling/dataTables/dataTables.fixedHeader.js"></script>
<script src="../styling/script.js"></script>

Verwenden Sie das Transformationsszenario [Übung 8] xsl:merge - Gelbe Seiten (n XML >> 1 HTML) (siehe die Erläuterungen zu den Übungen) und die folgende XSLT-Datei:

Code-Beispiel: Stylesheet zu Übung 8: Gelbe Seiten.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" exclude-result-prefixes="xs" version="3.0">
  <!-- Output-Vorlage:
    <html>
      <head>
        <title>Gelbe Seiten</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="../styling/dataTables/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="../styling/dataTables/dataTables.bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="../styling/dataTables/dataTables.colVis.css" />
        <link rel="stylesheet" type="text/css" href="../styling/styles.css" />
        <script type="text/javascript" src="../styling/dataTables/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../styling/dataTables/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="../styling/dataTables/dataTables.bootstrap.js"></script>
        <script type="text/javascript" src="../styling/dataTables/dataTables.colVis.js"></script>
        <script type="text/javascript" src="../styling/dataTables/dataTables.fixedHeader.js"></script>
        <script type="text/javascript" src="../styling/script.js"></script>
      </head>
      <body>
        <h1>Gelbe Seiten</h1>
        <table id="liste" class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Typ</th>
              <th>Shop</th>
              <th>Adresse</th>
              <th>Telefon</th>
              <th>Website</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>garden_centre</td>
              <td>Dehner Zoo</td>
              <td>Reichenbachstraße 3, 80469 München </td>
              <td></td>
              <td><a href="http://www.dehner.de/">Website</a></td>
            </tr>
          </tbody>
        </table>
      </body>
    </html>    
  -->
  <xsl:output indent="yes" method="xhtml" />
  <xsl:mode streamable="yes" />
  <xsl:mode streamable="no" name="no-Streaming" />
  <xsl:template match="/">
    <html>
      <head>
        <title>Gelbe Seiten</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="../styling/dataTables/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="../styling/dataTables/dataTables.bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="../styling/dataTables/dataTables.colVis.css" />
        <link rel="stylesheet" type="text/css" href="../styling/styles.css" />
        <script type="text/javascript" src="../styling/dataTables/jquery-1.11.1.min.js" />
        <script type="text/javascript" src="../styling/dataTables/jquery.dataTables.min.js" />
        <script type="text/javascript" src="../styling/dataTables/dataTables.bootstrap.js" />
        <script type="text/javascript" src="../styling/dataTables/dataTables.colVis.js" />
        <script type="text/javascript" src="../styling/dataTables/dataTables.fixedHeader.js" />
        <script type="text/javascript" src="../styling/script.js" />
      </head>
      <body>
        <h1>Gelbe Seiten</h1>
        <table id="liste" class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Typ</th>
              <th>Shop</th>
              <th>Adresse</th>
              <th>Telefon</th>
              <th>Website</th>
            </tr>
          </thead>
          <tbody>
            <!-- HIER XML-DATEIEN MERGEN -->
          </tbody>
        </table>
      </body>
    </html>
  </xsl:template>
  <!-- HIER TABELLEN-ZEILE ERSTELLEN (mode="no-Streaming") -->
  <!-- die restlichen HTML-Elemente erstellen -->
  <xsl:template match="node[not(tag/@k = 'shop')]" mode="no-Streaming" />
  <xsl:template match="tag[matches(@k, '(name|contact:phone|opening_hours|shop)')]" mode="no-Streaming">
    <xsl:value-of select="@v" />
  </xsl:template>
  <xsl:template match="tag[matches(@k, 'addr:(street|postcode|city)')]" mode="no-Streaming">
    <xsl:value-of select="@v" />
    <xsl:text> </xsl:text>
  </xsl:template>
  <xsl:template match="tag[matches(@k, 'addr:(housenumber)')]" mode="no-Streaming">
    <xsl:value-of select="@v" />
    <xsl:text>, </xsl:text>
  </xsl:template>
  <xsl:template match="tag[matches(@k, '(website)')]" mode="no-Streaming">
    <a href="{@v}">Website</a>
  </xsl:template>
</xsl:stylesheet>

Tipps

Alle XML-Dateien eines Ordners auslesen

Mit Hilfe der Funktion uri-collection('../in?select=*.xml') können alle XML-Dateien im Input-Ordner ausgelesen werden.

Sortierung umgehen

Die einzelnen Dateien sind nicht vorsortiert. Da diese aber gestreamt werden sollen, kann mit der Angabe eines beliebigen Elements oder Attributs die Sortierung umgangen werden (<xsl:merge-key select="spieltHierKeineRolle"/>).

Lösung

Das vollständige Output-HTML und das Lösungsstylesheet finden Sie unter Lösungen zu Übung 8: Gelbe Seiten.

   

<< zurück vor >>
Tipp der data2type-Redaktion:
Zum Thema XSLT bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: