Thymeleaf Interactive Tutorial

Exercise 14: same template fragments

This exercise introduces concepts new in Thymeleaf 2.1. See same-template fragments section of the What's New article.

  1. You can see a div with the id bannerElement at the top of the page. The goal is convert this element into a fragment that will be reused throughout the page.
  2. First, set /images/logo.png as the source for the img logo element.
  3. Now, turn the div element into a fragment by using th:fragment, and include it twice after the Product information section and after the Customer information section. Comments have been set to help you locate these places.
    Please include the fragment using two different ways:
    • Firstly, using its fragment name (standard Thymeleaf-to-Thymeleaf) inclusion mechanism.
    • Secondly, using the DOM selector expression //div[@id='bannerElement'].
  4. You can check the proposed solution by pressing the Show solution button () above the code editor.

Welcome to the Thymeleaf Interactive Tutorial. Thymeleaf version used in this tutorial is 2.1.5.RELEASE.

This interactive tutorial has been created by the Thymeleaf Team using The Thymeleaf Template Engine and other great open source tools like:

The tutorial is gracefully hosted at the Heroku Cloud Platform

Icons used in this app, except Thymeleaf logo, are created by Mark James

You can get the source code of this tutorial at GitHub.

You can find much more documentation on Thymeleaf at the Thymeleaf website.

For any questions or help, you can use the user forum.

Source code

Static view

Generated source

Dynamic view