How to use Layout Page in Spring Boot with Thymeleaf (Master and Content Page)

In this tutorial, you would learn how to use layout and content page in a Spring application. This is also called Master and Content page in .Net.

  1. The Dependencies
  2. The Layout Page
  3. The Content Page
  4. Working with Scrips

 

Normally, websites and web applications share some page components across pages. For instance, headers, sidebar and footer. This component, would only be defined in a single page and then it would be made to affect all the pages using it.

The figure below shows this.

Layout and Content pages in Spring
Layout pages in Spring

Let’s now first look at how to create the layout page(layout)

 

1. The Dependencies

Before you can use layout pages in your Spring application, you need to add two dependencies:

  • the thymeleaf dependency
  • the layout-dialect dependency

These two dependencies are given below:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
    <version>2.5.1</version>
</dependency>

 

2. The Layout Page

The layout page is similar to any other HTML page. However, you must add the xmlns:layout attribute to the  html tag.

This is shown below:

<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

Next, you need to specify the part of the layout page where you want the content to appear. This is done using a div tag with the fragment attribute. So anything outside this div tag would remain fixed while the content of the div tag would be changing. The code below shows how you do this.

<div layout:fragment="content">
    <p>Changing contents</p>
</div>

 

3. The Content Page

Just like in the layout page, you need to add the xmlns:layout attribute. But additionally, you also must add the layout: decorate attribute as well. The layout:decorate attribute would have a value set to the layout page(without the .html extension).  This is shown below:

<html lang="en" 
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="_layout">

Here, the layout page is _layout.html placed inside the templates folder.

Having added this HTML markup, you then need to specify the div tag that would wrap the whole content of the page. This is done as shown below:

<div layout:fragment="content">

<!--Content of the page-->

</div>

At this point, anything you want in the content page must be inside this div tag include modals.

 

4. Using Scripts in Layout-Content Page

I would also like to explain how script work in layout/content page.

First, note that scripts defined in the layout page, apply to both the layout and the content page. However, you may want a script that applies only to the layout page. This is achieved using the th:block tag.

For instance, we want a script called account.js to execute only for the content page. Then take the steps below:

In the layout page, add the following block,

<th:block layout:fragment="script"></th:block>

 

In the content page, add

<th:block layout:fragment="script">
    <script th:src="@{/js/accounts.js}"></script>
</th:block>

In this case, the accounts.js script is placed inside the js folder in the static folder.

 

I hope this helps you! Please do watch the video as well. And if you have any challenges, leave a comment.

Finally, join us at International Computer Programmers.

Admin bar avatar

kindsonthegenius

Kindson Munonye is currently completing his doctoral program in Software Engineering in Budapest University of Technology and Economics

View all posts by kindsonthegenius →

Leave a Reply

Your email address will not be published. Required fields are marked *