Wetterbericht
Übung 6
Schreiben Sie eine XSLT-Transformation, welche die aktuellen Wetterdaten von openweathermap.org einer gegebenen PLZ mit Hilfe von xsl:stream abruft und diese in einem HTML-Wetterbericht darstellt.
Da es keine lokale Input-Datei gibt, verwenden Sie / als Wert für das match-Attribut für das Einstiegs-Template. Die Transformation kann anschließend auf das XSLT angewendet werden.
Code-Beispiel: Output-Vorgabe zu Übung 6 (Auszug).
<html>
<head>
<title>Wetter</title>
<link href="../styling/styles.css" rel="stylesheet" />
<meta charset="utf-8"/>
</head>
<body>
<div class="city">
<h1>Heslach</h1>
<iframe src="..." class="map"></iframe>
<div class="sun">
<p>Sonnenaufgang: 7:03 Uhr</p>
<p>Sonnenuntergang: 15:27 Uhr</p>
</div>
<div class="temperature">
<p>Aktuelle Temperatur: 3 °C</p>
<p>Min Temperatur: 3 °C</p>
<p>Max Temperatur: 3 °C</p>
</div>
<p class="lastUpdate">Letzte Aktualisierung: 20:20 Uhr</p>
</div>
</body>
</html>
Transformierter Wetterbericht im HTML-Format.
Verwenden Sie das Transformationsszenario [Übung 6] xsl:stream - Wetterbericht (XSL >> HTML) (siehe die Erläuterungen zu den Übungen) und die folgende XSLT-Datei:
Code-Beispiel: Stylesheet für Übung 6: Wetterbericht.
<?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" xmlns:hdm="http://www.hdm-stuttgart.de" exclude-result-prefixes="xs hdm" version="3.0">
<!-- OpenWeatherMap-URL: (PLZ ersetzen) http://api.openweathermap.org/data/2.5/weather?zip=PLZ,de&appid=2de143494c0b295cca9337e1e96b00e0&mode=xml
Output-Vorlage:
<html>
<head>
<title>Wetter</title>
<link href="../styling/styles.css" rel="stylesheet" />
<meta charset="utf-8"/>
</head>
<body>
<div class="city">
<h1>Bempflingen</h1>
<iframe src="https://www.google.com/maps/embed/v1/place?q=48.57,9.27&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU" class="map"></iframe>
<div class="sun">
<p>Sonnenaufgang: 7:13 Uhr</p>
<p>Sonnenuntergang: 15:46 Uhr</p>
</div>
<div class="temperature">
<p>Aktuelle Temperatur: 3 °C</p>
<p>Min Temperatur: 2 °C</p>
<p>Max Temperatur: 4 °C</p>
</div>
<p class="lastUpdate">Letzte Aktualisierung: 12:34 Uhr</p>
</div>
</body>
</html>
-->
<xsl:output method="xhtml" indent="yes" />
<xsl:mode streamable="yes" on-no-match="shallow-skip" />
<xsl:template match="/">
<html>
<head>
<title>Wetter</title>
<link href="../styling/styles.css" rel="stylesheet" />
<meta charset="utf-8"/>
</head>
<body>
<!-- HIER WETTER-SEITE EINSETZEN -->
</body>
</html>
</xsl:template>
<!-- HIER CITY-DIV ERSTELLEN -->
<!-- HIER CITY-H1 ERSTELLEN -->
<!-- HIER TEMPERATURE-DIV ERSTELLEN -->
<!-- die restlichen HTML-Elemente erstellen -->
<xsl:template match="coord">
<xsl:variable name="googleMapsUrl" select="concat('https://www.google.com/maps/embed/v1/place?q=',@lat,',',@lon,'&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU')" />
<iframe src="{$googleMapsUrl}" class="map" />
</xsl:template>
<xsl:template match="sun">
<div class="sun">
<p>Sonnenaufgang: <xsl:value-of select="hdm:formatDate(@rise)" /></p>
<p>Sonnenuntergang: <xsl:value-of select="hdm:formatDate(@set)" /></p>
</div>
</xsl:template>
<xsl:template match="lastupdate">
<p class="lastUpdate">Letzte Aktualisierung: <xsl:value-of select="hdm:formatDate(@value)" /></p>
</xsl:template>
<!-- Hilfs-Funktionen -->
<xsl:function name="hdm:kelvinToCelsius">
<xsl:param name="kelvin" as="xs:float" required="yes" />
<xsl:value-of select="round(($kelvin - 273.15) * 1) div 1" />
</xsl:function>
<xsl:function name="hdm:formatDate">
<xsl:param name="date" as="xs:dateTime" required="yes" />
<xsl:value-of select="format-dateTime($date, '[H]:[m] Uhr')" />
</xsl:function>
</xsl:stylesheet>
Tipps
Wetterdaten abrufen
Über die folgende URL können die Wetterdaten abgerufen werden. Die PLZ gibt die gewünschte Stadt an: "http://api.openweathermap.org/data/2.5/weather?zip={PLZ},de&appid=2de143494c0b295cca9337e1e96b00e0&mode=xml".
Google-Karte einbinden
Über ein iframe kann ganz einfach eine Google-Karte eingebunden werden. Die Position wird über Längen- und Breitengrad angegeben.
<iframe src="https://www.google.com/maps/embed/v1/place?q={Breitengrad},{Längengrad}&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU" class="map"/>
Styling
Binden Sie die CSS-Datei styles.css ein und verwenden Sie die gegebenen Klassen in der Output-Vorgabe zu Übung 6.
Hilfs-Funktionen
Um die Temperatur von Kelvin in Celsius umzurechnen, können Sie die Funktion hdm:kelvinToCelsius verwenden.
Um die Uhrzeit zu formatieren, können Sie die Funktion hdm:formatDate verwenden.
Erweiterung
Kopieren Sie die Datei openWeather.xml aus dem Demodaten-Ordner in den in-Ordner.
Passen Sie die Transformation so an, dass zuerst das lokale Wetter und darunter die Wetterdaten der Städte aus der XML-Datei erscheinen.
Lösung
Das vollständige Output-HTML und das Lösungsstylesheet finden Sie unter Lösungen zu Übung 6: Wetterbericht.
<< zurück | vor >> |
Tipp der data2type-Redaktion: Zum Thema XSLT bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |