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!

Recommended Posts

Create a TODO app in Java 7 Create Header
Create a new app in Rails
Try making a calculator app in Java
Let's create a TODO application in Java 4 Implementation of posting function
Let's create a TODO application in Java 8 Implementation of editing function
Let's create a TODO application in Java 1 Brief explanation of MVC
Let's create a TODO application in Java 5 Switch the display of TODO
Rock-paper-scissors app in Java
[Java] Create a filter
Create JSON in Java
Create a CSR with extended information in Java
Try to create a bulletin board in Java
Let's create a super-simple web framework in Java
Create a docker image that runs a simple Java app
How to create a Java environment in just 3 seconds
Create a java method [Memo] [java11]
How to create a data URI (base64) in Java
[Java] Create a temporary file
Find a subset in Java
Create Azure Functions in Java
[Programming complete] §5 Create a review management app in Ruby
Let's create a TODO application in Java 11 Exception handling when accessing TODO with a non-existent ID
Create a SlackBot with AWS lambda & API Gateway in Java
Create a method to return the tax rate in Java
How to develop and register a Sota app in Java
3 Implement a simple interpreter in Java
I created a PDF in Java.
I made a shopify app @java
Create a database in a production environment
Create a Java project using Eclipse
A simple sample callback in Java
Create a Servlet program in Eclipse
Try to create a server-client app
Get stuck in a Java primer
Create a clear time ranking in Firebase's Realtime Database (Android app)
Create a named Skip List like redis sorted set in Java
I tried to create a simple map app in Android Studio
How to create a new Gradle + Java + Jar project in Intellij 2016.03
[Java] Returns a Japanese name file in filename of HTTP header
Let's create a TODO application in Java 13 TODO form validation 1: Character limit ・ Gradle update to use @Validated
Let's create a TODO application in Java 3 Save temporary data in MySQL-> Get all-> Display on top
[Java] Create and apply a slide master
About returning a reference in a Java Getter
What is a class in Java language (3 /?)
When seeking multiple in a Java array
[Rails6] Create a new app with Rails [Beginner]
[Creating] A memorandum about coding in Java
Java creates a table in a Word document
Java creates a pie chart in Excel
Create Java Spring Boot project in IntelliJ
What is a class in Java language (1 /?)
Let's create a Java development environment (updating)
What is a class in Java language (2 /?)
Deploy a Java web app on Heroku
Implement something like a stack in Java
[Rails 5] Create a new app with Rails [Beginner]
Split a string with ". (Dot)" in Java
Creating a matrix class in Java Part 1
To create a Zip file while grouping database search results in Java
GetInstance () from a @Singleton class in Groovy from Java
Two ways to start a thread in Java + @