Java D: 4,90 EUR A: 5,60 EUR CH: 9,80 CHF Benelux: 5,80 EUR ISSN 2191-6977
4 191978 304903 02 Javaaktuell mit Apache Spark Predictive Analytics Big Data Java imMittelpunkt Praxis. Wissen. Networking. fürEntwickler DasMagazin Framework Lagom, das neue Microservices aktuell Aus derCommunity — lung von Java SE und Vertei- Nutzung Achtung, Audit 02-2017 | Sommer | www. ijug.eu |www. 02-2017|Sommer fürdieCommunity iJUG Verbund Template-Engine
Thymeleaf – eine Template-Engine für Entwickler und Designer Gerrit Meier
In den letzten Jahren wurde mit Single Page Applications auf JavaScript-Basis immer mehr der Schritt weg vom serverseitigen Rendering gemacht. Auch die Aussage von Oracle im Rahmen der JavaOne, dass die meisten Anwendungen in der Cloud gänzlich ohne Oberfläche auskommen werden, gibt diesem Ansatz wenig Rückenwind. Warum aber erfreut sich, ganz gegen diesen Trend, die Template-Engine Thymeleaf immer weiter steigender Nutzerzahlen? Der Artikel zeigt, was Thymeleaf anders macht und warum es gerade bei neuen Projekten eine interessante Alternative sein kann.
Bei der Entscheidung, ob eine Web-Anwen- allem durch eine übersichtliche, aber den- hen ist (siehe Abbildung 1). Im Vergleich dazu dung server- oder clientseitig gerendert wer- noch nicht einschränkend wirkende Syntax die statisch geöffnete JSP-Quelldatei (siehe den sollte, gibt es viele möglichen Faktoren, auszeichnet, existiert seit dem Jahr 2011. Abbildung 2). die man berücksichtigen und bewerten muss. Dazu gibt es eine hervorragende Integrati- Wer den Sourcecode beider Template-En- Dabei sollte, wie immer, das grundlegende on in das Spring-Ökosystem, unter anderem gines genauerer betrachtet, erkennt schnell, (Kunden-)Problem und dessen Lösung die durch einen Spring Boot Starter [2]. Auf die- dass Thymeleaf im Gegensatz zu JSP keine Hauptrolle spielen. Ist einmal die Entschei- sen Weg lassen sich sehr schnell Anwen- Custom Tags für die Logik verwendet, son- dung getroffen, sich nicht auf JavaScript- dungen unter Verwendung von Thymeleaf- dern mit Pseudo-Attributen arbeitet. Dieser Frameworks wie ReactJS oder Angular zu Templates erstellen und die ersten Schritte Ansatz, auch als „Natural Templating“ be- verlassen, sondern die HTML-Repräsentati- mit der Engine unternehmen. zeichnet, beschreibt vor allem die Nutzung on auf dem Server zu generieren, steht man der Quelldateien als Prototyp/Mocks. vor der nächsten Frage: Mit welcher Engine Natural Templating Ein großer Vorteil besteht darin, dass die soll die Seite verarbeitet werden? Vor der Besprechung der Syntax und der Entwickler diese Quelldateien etwa an einen An dieser Stelle kann zu traditionellen Funktionsweise von Thymeleaf wird ein ein- Grafiker geben können, der diese ohne eine Bibliotheken wie JavaServer Pages (JSP), faches JSP- mit einem Thymeleaf-Template laufende Anwendung auf dem Server weiter Velocity oder Freemarker gegriffen und das verglichen (siehe Listings 1 und 2). Beide Da- stylen kann. Solange die Datei direkt geöff- Rendering wie immer gelöst werden. Ein teien erzeugen die gleiche Ausgabe, wenn net und nicht durch die Engine verarbeitet Blick über den Tellerrand beziehungsweise die Seiten aus einer laufenden Anwendung wird, werden die unbekannten Attribute eine Google-Suche nach Alternativen in der aufgerufen werden. Das Besondere an Thy- vom Browser verworfen und die gemockten Java-Welt bringt einen weiteren Kandidaten meleaf ist, dass das HTML-Template auch Daten aus den bekannten Attributen und zum Vorschein: Thymeleaf [1]. statisch geöffnet werden kann und ein ge- Texten in den HTML-Tags angezeigt. Wird Das Open-Source-Projekt, das sich vor mocktes, grafisch korrektes Ergebnis zu se- die View durch einen Server ausgeliefert,
26 |
iii iii iiiiii www.ijug.eu
ersetzt Thymeleaf die Attribute, für die ent- sprechende Werte definiert wurden. Alternativ zur Standard-Syntax können auch Data Attributes verwendet werden (also „data-th-href“ statt „th:href“). So lässt sich anstelle mit unbekannten HTML-Attri- Abbildung 1: Statische Ausgabe von Thymeleaf buten, die vom Browser ignoriert werden, mit korrekten HTML5-Attributen arbeiten. Dies betrifft nur den statischen Zustand der Datei und ist aus Sicht des Autors als „nice to have“ einzuordnen. Im weiteren Verlauf gilt die Konvention, die Attribute aus dem Thymeleaf-Namespace zu nutzen.
Einfache Syntax Abbildung 2: Statische Ausgabe von JSP Wie man schon am Beispiel erkennen kann, ist die Syntax auch beim ersten Kontakt mit <%@ page contentType="text/html;charset=UTF-8" language="java" %> der Engine leicht zu verstehen. Das liegt vor <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> allem daran, dass sich Thymeleaf lediglich auf zwei Kern-Komponenten im Markup konzen-
triert: Expressions und Processors. In Listinggegriffen, dessen Attribute werden direkt | Meine Jug | referenziert. Falls kein äußeres Objekt vor-
Java aktuell 2-2017 | 27 Template-Engine
Anwendung auf dem Server oder ein ganz Platzhalter Platzhalter anderes System zeigen, kann dieses auch in den URL-Expressions mit angegeben
Reintext Processors unescaped Text Unter „Processor“ wird im Thymeleaf- Meine JUG: [[${jug.name}]]! Kontext nicht nur das verwendete HTML- Listing 4 Attribut verstanden, sondern auch seine dahinterliegende Logik und das Resultat bei der Verarbeitung durch die Engine. In Thy- meleaf steht eine theoretisch überschauba-
erste JUG | Viele Anwendungen basieren auf der Anzei-
zweite JUG | stellungsformen, die meist in einer Schleife
dritte JUG | mit „th:each“ (siehe Listing 5) genau eine Lö-
28 |
iii iii iiiiii www.ijug.eu
gearbeitet werden kann. doch etwas Vorsicht geboten, da hier nicht Schleifen realisiert werden, aber kein El- Wenn das Beispiel in der Form auf dem nur pauschal auf einen booleschen Wert im tern-Element verwendet werden kann, das Server aufgerufen wird, bekommt man nicht Java-Sinn zu achten ist. Abhängig von der als Iterations-Anfang dient. Das Element nur die Werte geliefert, die unsere Anwen- Art des Objekts beziehungsweise seines wird nach der Verarbeitung nicht an den dung bereitstellt, sondern am Ende auch Werts ergeben sich folgende Möglichkeiten Browser ausgeliefert, erzeugt jedoch in der noch die Mock-Daten. Um dieses Problem für true: Boolean mit dem Wert „true“, eine statischen Ansicht durch das unbekannte zu umgehen, wurde ein weiterer Processor Zahl oder ein Character ungleich „0“ oder ein HTML-Tag Fehler im HTML-Source. Wen die- („th:remove“) bereitgestellt (siehe Listing 6). String, der nicht „no“, „false“ oder „off“ als se stören, der kann diesen Block mit einem Wie der Name schon erraten lässt, entfernt Wert hat. bestimmten Kommentar sowohl vom Brow- dieser je nach gewähltem Wert etwa den Soll es zu einer Fall-Unterscheidung ser ignorieren als aber auch von der Engine ganzen Tag („all“), alle Kinder („body“) oder kommen, sollte man anstelle von komplexen erkennen lassen. alle Kinder bis auf das erste („all-but-first“). „if“-Kaskaden die Processors „th:switch“ Bei Verwendung des letztgenannten Werts und „th:case“ verwenden. In Thymeleaf gibt Templating kann genau das gewünschte Verhalten er- es keinen Fallthrough, sondern der erste Durch die Verwendung von Fragments, ei- reicht werden: Nach dem Rendern werden zutreffende Case wird verwendet. Um den nem weiteren Processor, ist es möglich, nur noch die echten Daten aus der Anwen- Default-Fall abzufangen, gibt es den spezi- einfaches Templating mit Thymeleaf vorzu- dung angezeigt und die gemockten Elemen- ellen Wert „th:case="*"“. nehmen (siehe Listing 8). Die Definition der te sind entfernt. einzufügenden Inhalte erfolgt dabei in einer Der Block-Prozessor ausgelagerten HTML-Datei (siehe Listing 9). Bedingungen Da Ausnahmen die Regel bestätigen, hat So ergibt sich wieder der Vorteil, dass das Für die Abfrage von Bedingungen gibt es in auch Thymeleaf seine ganz eigene Ausnah- zu inkludierende Fragment in ein vollstän- Thymeleaf wiederum eine überschaubare me, den Blockprozessor. Wie in Listing 7 zu diges HTML-Dokument eingebettet werden Anzahl von Processors. Bedingungsabfra- sehen ist, ist dieser Processor kein HTML- kann, um es statisch zu bearbeiten. Bevor gen lassen sich durch „th:if“ beziehungs- Attribut, sondern ein − genau genommen das Einbetten der Fragmente gezeigt wird, weise invers durch „th:unless“ realisieren. das einzige − HTML-Tag in der Thymeleaf- sei an dieser Stelle der Hinweis gegeben, Bei der Verwendung der Expression ist je- Welt. Er wird vor allem verwendet, wenn dass es bei komplexeren Fragmenten auch
NIK IST EXPERTE FÜR KOFFEIN SAXOPHON
UND WEB DESIGN
BE YOURSELF AND MAKE A DIFFERENCE Jetzt bewerben auf accenture.com/MakeADi erence Java#MakeADi aktuell 2-2017 erence| 29 Template-Engine
zu einem komplexen Mocking in der Haupt-
seite kommen kann. Das Hinzuziehen von HTML-Bestandtei- len aus anderen Dateien ist intuitiv mit der Listing 8 Wahl einer von drei unterschiedlichen Ein- bindungsarten möglich. Zur Auswahl stehen „th:insert“ (ab Thymeleaf 3), „th:replace“ und „th:include“, die dazu führen, dass ein Frag- ment entweder komplett als Kind eingefügt, das Tag in der Hauptseite ersetzt oder nur30 |