Contents
- Introduction
- Content Organisation
- Flow of control
- Brief-on-usage
- Dependencies
- Defining Layout page
- Defining content page
- Using script in layout-Content page
- Resources and references
Contents can be organised on UI as:
- master-page[layman term] orLayout page[thyme-leaf specific term] which loads other pages on it (header/Footer)
- Content page
Flow of control
- Sprinboot(once added with thymeleaf dependecy) looks for src/main/resources/template folder for UI pages
- the template or the view pages (basically html files in template folder) interact with Controller
- Use Model to return data to view and in the return statement put the name of view/template to return to.
- One thing to note about template is that it’s a normal html file but has a extra attribute specific to thyme-leaf to support it’s features. refer below for syntax
Dependencies-
<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>
Defining Layout Page
The layout page is similar to any other HTML page. However, you must add the xmlns:layout attribute to the html tag.
<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>
Defining 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 [Confusing – need to see reference resources]
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.
Techglot 