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&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: |