by ·Keine Kommentare

Die Template Engine Thymeleaf kann über Fragments bestimmte Blöcke einer HTML Datei verarbeiten. Fragmente können z.B. eingefügt oder ersetzt werden.

Bootstrap CSS Beispiel

Damit Bootstrap CSS auf den Seiten funktioniert, müssen im Header JS und CSS Dateien eingebunden werden. Ansonsten funktioniert Bootstrp CSS nicht korrekt oder der Inhalt wird nicht wie gewünscht angezeigt. Da dieses immer wieder der selbe Block an Anweisungen ist, ist es ein idealer Kandidat, um ihn zu inkludieren.

Wo werden Fragmente abgelegt?

Thymeleaf Fragmente werden üblicherweise unter templates/fragments abgelegt.

Wie wird ein Fragment gekennzeichnet?

Ein Fragment wird im HTML Code mit th:fragment=”name” gekennzeichnet.

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:fragment="header-css" th:remove="tag">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Bootstrap -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    ...
    </div>
</head>

In unserem Header hat das Fragment den Namen header-css. Das th:remove Attribut hat hier eine besondere Funktion. Später mehr dazu.

Umsetzung mit Thymeleaf Fragments

Das HTML das an den Browser ausgeliefert werden soll, muss natürlich valide sein. So soll das fertige Ergebnis aussehen:

<!DOCTYPE HTML>
<html>
<head>
<title>Hallo Welt !!!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Bootstrap -->
<script src="/webjars/jquery/3.3.1-1/jquery.min.js"></script>
<script src="/webjars/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="/webjars/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="/webjars/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

...

Inkludierung des Fragments

Das Fragment soll uns nun den oben gekennzeichneten Block einfügen. Das Thymeleaf Attribut th:replace benötigt 2 Angaben. Die erste Angabe ist der Dateiname die das Framgent enthält und nach dem :: den Namen des Fragments. Hier also wird in dem Verzeichnis fragments nach der Datei header.html gesucht, welche das Fragment header-css enthält.

Daraus ergibt sich folgender Code:

<head>
<title>Customers</title>
<title th:replace="fragments/header.html :: header-css"></title>
</head>

Hier muss man einen kleinen Trick anwenden, da nur wenige Elemente im HEAD erlaubt sind, damit wir in der IDE keine Warnungen angezeigt bekommen. Wir verwenden einfach einen zweiten TITLE-Tag und ersetzen den Inhalt mit dem Fragment header-css. Das zusätzliche Attribut th:remove=”tag” in dem Fragment sorgt nun dafür dass das umschließende Tag entfernt wird und nur der gewünschte Inhalt im gerenderten Template ausgeliefert wird.