Create a TODO app in Java 7 Create Header

Hello. In this article, I would like to touch on the creation of the header part of the TODO application created with Spring and Thymeleaf.

TODO application creation link collection

1: [Understanding the super basics] A brief description of MVC 2: [Prepare a template] I want to create a template with Spring Initializr and do Hello world 3: [Connection / Settings / Data display with MySQL] Save temporary data in MySQL-> Get all-> Display on top 4: [POST function] Implementation of posting function 5: [PATCH function] Switch TODO display 6: [Easy to use JpaRepository] Implementation of search function 7: [Common with Thymeleaf template fragments] Create Header (now here)

Current page structure

・ Http: // localhost: 8080 / top ・ Http: // localhost: 8080 / search

Currently, only two pages are displayed in this way.

In the future as View in this TODO app

・ Page displaying the error ・ Edit page

Will be created, so the front display area will be a total of 4 pages.

And the specification is that all four pages have a common header.

If it is about 4 pages, it will be in individual HTML

`html`


<header>....</header>

I can add

When you want to add some new link to the header, you can edit one page and it will be reflected on all pages, which makes editing very easy.

What is a template fragment?

Template fragment is a Thymeleaf function that manages HTML that you want to share.

It is used when displaying one HTML file or element in multiple HTML.

I think this idea is close to the concept of components used in Vue.js and React, so it may be good to be aware of it.

Now how to use template fragments

this is

** 1. Fragment the elements you want to display on multiple pages **

** 2. Call the fragment on the page you want to use **

It will be exhausted.

Positional relationship of HTML files

This time the header

main/resources/templates/common/header.html

Create it with this path and fragment it.

And that

main/resources/templates/top.html main/resources/templates/search.html

Let's display it in the header of!

Fragment HTML elements

Now let's do fragmentation.

First, I will briefly explain the concept of fragmentation.

What does fragmentation mean?

Fragment means * "fragment / fragment / fragment" *.

In other words, fragmentation is a good image of registering (variable) HTML elements as * one piece *!

How to fragment

For elements that you want to share (for example, header)

<header th:fragment="header_fragment()>
  ...
</header>

th: fragment =" Fragment name (argument if you want to pass an argument)

You can fragment it by doing as.

Try fragmenting the header

`main/resources/templates/common/header.html`


<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
    <header th:fragment="header_fragment()">
        <div class="text-center bg-primary">
            <div class="d-flex p-3">
                <p class="display-4 w-75 pl-5 mb-0 text-left font-weight-bold">
                    <a th:href="@{/top}" class="text-dark">ToDo list</a>
                </p>
                <p class="display-4 w-25 mb-0 mr-5 text-right font-weight-bold ">
                    <a th:href="@{/search}" class="text-dark">Search</a>
                </p>
            </div>
        </div>
    </header>
</html>

As you can see, this header is fragmented by writing <header th: fragment =" header_fragment () ">.

Let's call this from another HTML!

Fragment and call View from another HTML.

`main/resources/templates/top.html`


<body>
  <header th:replace="common/header :: header_fragment()"></header>
    .....Abbreviation
  </header>
</body>

What I want to pay attention to is the part of th: replace =" .... ".

replace has the meaning of * replace * and literally replaces the HTML element.

So it is an image that completely overwrites. There are other display methods such as th: insert and th: include, so if you want to use them properly, you should check it out.

th: replace =" Relative path of the fragment you want to call :: Fragment name you want to call "

You can call that fragment by doing!

Now you can easily call the common header even if the number of views increases in the future!

Summary

Roughly writing how to use template fragments

-Fragment the View you want to standardize (th: fragment)

-Call that View (th: replace, th: insert, th: include)

Will be!

This time, replace completely overwrites the element, but depending on the specifications, I think that I want to call something that is partly common (for example, a button), so in that case try using insert or include Let's do it!