[JAVA] HTML was made into a common part with Thymeleaf to unify the design and improve development efficiency.

In a Spring Boot + Thymeleaf environment, multiple people may develop the front end, It is a memo that when the same structure and design often appear, there was such a problem and it was solved. (Even if someone takes over, it may be an ant to make it a common part)

environment

Spring Boot: 1.3.2 RELEASE Thymeleaf: 2.14 RELEASE

What is Thymeleaf

It is one of the template engines and is recommended for use in the Java environment. What I like is that you can embed Thymeleaf's own syntax in HTML. First write native HTML, roughly determine the structure and design, and without breaking the code too much You can complete it. (I've never used any other template engine ... maybe that's what the world is all about) It is said that you can do various things (although it is rough) by combining with Spring Boot. Official site: http://www.thymeleaf.org/

Challenges at the site where I was

Actually, it was a little less than two years ago, and I recently returned to the front end and remembered it, so I wrote it. At that time, in the midst of development, we had the following issues.

Common parts made with Thymeleaf

From the conclusion, it looks like this (I will omit the Thymeleaf grammar).

Caller


<!-- form.text in html-Call a part called form.
As an argument, templateId, label,Pass required.
templateId"accountName"Pass the string.
label is msg in the message resource.account.Pass the string defined in name.
Pass false for required-->
<div th:replace="form :: text-form(
    templateId = 'accountName',
    label      = #{msg.account.name},
    required   = false)">
</div>

Common parts


<!-- text-It is a part named form.
As an argument, templateId, label,Receive required.-->
<div th:fragment="text-form(templateId, label, required)">
    <label th:for="${templateId}" th:text="${label}"></label>
    <div>
        <input type="text" th:id="${templateId}" th:name="${templateId}" th:field="*{__${templateId}__}"
               th:required="${required}? required"/>
    </div>
</div>

Actually, there are CSS class application and Javascript call, which makes it complicated, but if you define common parts, You can efficiently create a structure with a unified design simply by passing the necessary parameters to the necessary parts and calling them.

Issues after making common parts

We were able to unify the design, develop screen templates efficiently, and release them as planned. However, as the development progressed, the following issues came up.

What I personally think

Recommended Posts

HTML was made into a common part with Thymeleaf to unify the design and improve development efficiency.
[Rails] How to introduce kaminari with Slim and change the design
Convert line feed code to html line feed tag with Thymeleaf and output
Connecting to a database with Java (Part 1) Maybe the basic method
I tried to summarize the key points of gRPC design and development
[Copy and paste] Build a Laravel development environment with Docker Compose Part 2
[Purchase agency service individual development --No.009] Figma will be used to improve the switching and design of companies.