Arbeiten mit Fragmenten in Thymeleaf

1. Übersicht

In diesem Tutorial zeigen wir, wie Sie Thymeleaf-Fragmente verwenden, um einige häufig verwendete Teile einer Site wiederzuverwenden . Nachdem wir ein sehr einfaches Spring MVC-Projekt eingerichtet haben, konzentrieren wir uns auf Ansichten.

Wenn Sie Thymeleaf noch nicht kennen, können Sie andere Artikel auf dieser Website wie diese Einführung sowie diesen Artikel über die 3.0-Version der Engine lesen.

2. Maven-Abhängigkeiten

Wir benötigen einige Abhängigkeiten, um Thymeleaf zu aktivieren:

 org.thymeleaf thymeleaf 3.0.11.RELEASE   org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Die neueste Version von Thymeleaf und Thymeleaf-Spring5 finden Sie auf Maven Central.

3. Frühlingsprojekt

3.1. Spring MVC-Konfiguration

Um Thymeleaf zu aktivieren und das Vorlagensuffix festzulegen, müssen Sie MVC mit einem Ansichtsauflöser und einem Vorlagenauflöser konfigurieren .

Wir werden auch das Verzeichnis für einige statische Ressourcen festlegen:

@Bean public ViewResolver htmlViewResolver() { ThymeleafViewResolver resolver = new ThymeleafViewResolver(); resolver.setTemplateEngine(templateEngine(htmlTemplateResolver())); resolver.setContentType("text/html"); resolver.setCharacterEncoding("UTF-8"); resolver.setViewNames(ArrayUtil.array("*.html")); return resolver; } private ITemplateResolver htmlTemplateResolver() { SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver(); resolver.setApplicationContext(applicationContext); resolver.setPrefix("/WEB-INF/views/"); resolver.setCacheable(false); resolver.setTemplateMode(TemplateMode.HTML); return resolver; } @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**", "/css/**") .addResourceLocations("/WEB-INF/resources/", "/WEB-INF/css/"); }

Beachten Sie, dass diese Konfiguration bei Verwendung von Spring Boot möglicherweise nicht erforderlich ist, es sei denn, wir müssen unsere eigenen Anpassungen vornehmen.

3.2. Der Controller

In diesem Fall ist die Steuerung nur ein Fahrzeug für die Ansichten. Jede Ansicht zeigt ein anderes Szenario zur Verwendung von Fragmenten.

Der letzte lädt einige Daten, die durch das Modell geleitet werden, um in der Ansicht angezeigt zu werden:

@Controller public class FragmentsController { @GetMapping("/fragments") public String getHome() { return "fragments.html"; } @GetMapping("/markup") public String markupPage() { return "markup.html"; } @GetMapping("/params") public String paramsPage() { return "params.html"; } @GetMapping("/other") public String otherPage(Model model) { model.addAttribute("data", StudentUtils.buildStudents()); return "other.html"; } }

Beachten Sie, dass die Ansichtsnamen aufgrund der Art und Weise, wie wir unseren Resolver konfiguriert haben, das Suffix ".html" enthalten müssen . Wir werden das Suffix auch angeben, wenn wir auf Fragmentnamen verweisen.

4. Die Ansichten

4.1. Einfache Fragmenteinbeziehung

Zunächst werden wir gemeinsame Teile auf unseren Seiten wiederverwenden.

Wir können diese Teile als Fragmente definieren, entweder in isolierten Dateien oder auf einer gemeinsamen Seite. In diesem Projekt werden diese wiederverwendbaren Teile in einem Ordner mit dem Namen Fragmente definiert .

Es gibt drei grundlegende Möglichkeiten, Inhalte aus einem Fragment einzuschließen:

  • Einfügen - Fügt Inhalte in das Tag ein
  • Ersetzen - Ersetzt das aktuelle Tag durch das Tag, das das Fragment definiert
  • include - Dies ist veraltet, wird jedoch möglicherweise noch in einem Legacy-Code angezeigt

Das nächste Beispiel, fragment.html, zeigt die Verwendung aller drei Möglichkeiten. Diese Thymeleaf-Vorlage fügt Fragmente im Kopf und im Hauptteil des Dokuments hinzu:

   Thymeleaf Fragments: home      

Go to the next page to see fragments in action

Schauen wir uns nun eine Seite an, die einige Fragmente enthält. Es heißt general.html und ist wie eine ganze Seite mit einigen Teilen, die als gebrauchsfertige Fragmente definiert sind:

Go to the next page to see fragments in action

This is a sidebar This is another sidebar Fragments Index | Markup inclussion | Fragment params | Other

Das Der Abschnitt enthält nur ein Stylesheet. Wir können jedoch auch andere Tools wie Bootstrap, jQuery oder Foundation direkt oder mithilfe von Webjars anwenden.

Beachten Sie, dass alle wiederverwendbaren Tags dieser Vorlage das Attribut th: fragment haben. Als Nächstes werden wir jedoch sehen, wie Sie einen anderen Teil der Seite einschließen.

Nach dem Rendern und Einschließen der Fragmente lautet der zurückgegebene Inhalt:

   Thymeleaf Fragments: home 

Go to the next page to see fragments in action

Fragments Index | Markup inclussion | Fragment params | Other

4.2. Markup-Selektoren für Fragmente

Eines der großartigen Dinge an Thymeleaf-Fragmenten ist, dass wir jeden Teil einer Vorlage auch mit den einfachen Selektoren , über Klassen, IDs oder einfach über Tags abrufen können .

Diese Seite zum Beispiel enthält einige Komponenten aus general.html - Datei: eine Seite sperren und den div.another Block:

4.3. Parametrisierte Fragmente

Wir können Parameter an a übergebenFragment, um einen bestimmten Teil davon zu ändern. Dazu muss das Fragment als Funktionsaufruf definiert werden, bei dem eine Liste von Parametern deklariert werden muss.

In diesem Beispiel definieren wir ein Fragment für ein generisches Formularfeld:

 Field 

Und hier ist eine einfache Verwendung dieses Fragments, an das wir Parameter übergeben:

Und so sieht das zurückgegebene Feld aus:

 Name 

4.4. Fragmenteinschlussausdrücke

Thymeleaf-Fragmente bieten andere interessante Optionen, z. B. die Unterstützung von bedingten Ausdrücken, um zu bestimmen, ob ein Fragment eingeschlossen werden soll .

Wenn Sie den Elvis- Operator mit einem der von Thymeleaf bereitgestellten Ausdrücke (z. B. Sicherheit, Zeichenfolgen und Sammlungen) verwenden, können Sie verschiedene Fragmente laden.

Zum Beispiel können wir dieses Fragment mit einigen Inhalten definieren, die wir abhängig von einer bestimmten Bedingung anzeigen. Dies kann eine Datei sein, die verschiedene Arten von Blöcken enthält:

 Data received No data 

Und so könnten wir sie mit einem Ausdruck laden:

 0} ? ~{fragments/menus.html :: dataPresent} : ~{fragments/menus.html :: noData}">

Weitere Informationen zu Thymeleaf Expressions finden Sie in unserem Artikel hier.

4.5. Flexible Layouts

Das nächste Beispiel zeigt auch zwei andere interessante Verwendungen von Fragmenten zum Rendern einer Tabelle mit Daten . Dies ist das wiederverwendbare Tabellenfragment mit zwei wichtigen Teilen: einem Tabellenkopf, der geändert werden kann, und dem Hauptteil, in dem Daten gerendert werden:


    
0 Name

When we want to use this table, we can pass our own table header using the fields function. The header is referenced with the class myFields. The table body is loaded by passing data as a parameter to the tableBody function:


    
Id Name

And this is how the final page will look:

 Data received 
    
Id Name
1001 John Smith
1002 Jane Williams
Fragments Index | Markup inclussion | Fragment params | Other

5. Conclusion

In this article, we've shown how to reuse view components through the use of Thymeleaf Fragments, a powerful tool that can make template management easier.

We have also presented some other interesting features that go beyond the basics. We should take these into account when choosing Thymeleaf as our view rendering engine.

If you want to learn about other Thymeleaf features, you should definitely take a look at our article about Layout Dialects.

Wie immer ist der vollständige Implementierungscode des Beispiels auf GitHub verfügbar.