Login/Register
Extend A View With Thymeleaf
Asked Answered
Solved springspring-mvcrazorthymeleaf
C

2

5

is it possible extend a shared view with thymeleaf?

I saw that is possible use framents but is not what I want. Instead I want something similar to .NET MVC, with something like @RenderBody() and another view that extend the shared view by including the shared view.

Canine answered 6/3, 2014 at 0:36 Comment(1)
This worked for me. I hope this works – Semantics
A
10

You can use the Thymeleaf Layout Dialect to extend a view.

Layout page

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    ...
    <body layout:fragment="body">
      ...
    </body>
</html>

Content page

In your content page, you refer to the layout (decorator) page using the layout:decorator attribute.

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="layout.html">
    ...
    <body layout:fragment="body">
      <p>Actual page content</p>
    </body>
</html>

It is possible to have multiple fragments in one page.

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    ...
    <body>
      <div layout:fragment="content"></div>
      <footer layout:fragment="footer"></footer>
    </body>
</html>
Addison answered 6/3, 2014 at 7:32 Comment(4)
I will use Rythm instead Thymeleaf. It is a lot faster and with more functionality. github.com/greenlaw110/spring-rythm – Canine
Rythm is a general template engine, while Thymeleaf is an XML/XHTML/HTML5 template engine. Rythm may be faster, but the cost of rendering a view is negligible nowadays. Thymeleaf would provide you cleaner templates and template validation, which increases productivity. But whatever floats your boat :). – Addison
I understand. By the way Rythm has been developed from one of my actual colleague. – Canine
Awesome!! Layout Dialect is exactly what I need. I'm happy I don't need to employ Tiles. – Pomeroy
U
1

Looks like as for the Thymeleaf version 3.1 template extension is supposed to be done using the other mechanism described in Tutorial: Using Thymeleaf (3.1.2.RELEASE), chapter 8.5 Layout Inheritance:

The layout is (src/main/resources/templates/layout/layout_simple.html):

<!DOCTYPE html>
<html lang="en" th:fragment="layout(title, main)"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:replace="${title}">Layout title</title>
</head>
<body>
<header>Common block: header</header>
<main id="mainpart" th:replace="${main}">
    <p><em>This content must not be visible.</em></p>
</main>
<footer>Common block: footer</footer>
</body>
</html>

The page is (src/main/resources/templates/thymeleaf_first_page_simple.html):

<!DOCTYPE html>
<html th:replace="~{layout/layout_simple :: layout(~{::title}, ~{::main})}"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf demo simple</title>
</head>
<body>
<main>
    <h1>Thymeleaf template extension simple demo</h1>
    <p>Actual page content: [<th:block th:text="${modelValue}" />]</p>
</main>
</body>
</html>

The result is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf demo simple</title>
</head>
<body>
<header>Common block: header</header>
<main>
    <h1>Thymeleaf template extension simple demo</h1>
    <p>Actual page content: [some simple value from the model]</p>
</main>
<footer>Common block: footer</footer>
</body>
</html>
Unguentum answered 2/12, 2023 at 19:25 Comment(2)
Thank you. Is there a way to make it so it doesn't include the element it's selecting in ~{::main}? The base HTML that I want to replace into the layout is more than one element, how do I grab everything i need – Jello
Nevermind, apparently you can have multiple th:fragment="content" – Jello

© 2022 - 2024 — McMap. All rights reserved.