Search code examples
springspring-bootthymeleaftaglibtagx

How can I use a custom tag library with Thymeleaf and Spring Boot?

I created a custom tag library with Spring MVC, JSP, and Tyles, so I have several .tagx files. With the new project I decided to try Spring Boot and Thymelaf, but I would like to keep my custom library...

So do you if is possible to create a custom tag library using thymleaf? Or if can I import my custom tag library in any way?

EDIT

I add some piece of code to be more clear. The following used tags are my customized tags. So I included inside the JSP with xmlns:form="urn:jsptagdir:/WEB-INF/tags/form"

<form:create id="fu_utente" modelAttribute="utente" path="/utente">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1 class="fa fa-user-plus" style="color:green;"><b>&#160;&#160;Stai creando un nuovo utente di tipo: <var class="varFont">&#160;${utente.ruolo}</var></b></h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-2">
            <field:input field="nome" id="c_utente_nome" required="true"/>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
            <field:input field="userName" id="c_utente_username" min="5" max="15" required="true"/>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">
            <field:input field="email" id="c_Utente_email" required="true" validationRegex="^[a-z0-9_\+-]+(\.[a-z0-9_\+-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,4})$"/>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-2">
            <field:input field="nuovaPassword" id="c_utente_password" min="6" max="15" required="true" type="password"/>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
            <field:input field="confermaNuovaPassword" id="c_utente_confirmPassword" required="true" type="password"/>
        </div>
    </div>
</form>

The result of this page is a standard HTML page, with a form, some fields and labels inside it and a submit button..

In this way I can write quickly a lot of html codes. For example instead of write <label>..... </label><input....../> for each fields, I can write only <field:input......> using also the internationalization.

I would like to have (and I think could be very useful) the same thing in Thymeleaf.

Otherwise, if you know a method using Thymeleaf to avoid to save codes and time, please tell me..

Solution

  • I used the following as a kind of solution/workaround. At the moment I created only 2 simple tags, I'm not sure if this is a good way to implement more complex tags.

    INPUT TAG

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <section th:fragment="input(name, value, type, required)" class="form-group" th:switch="${required}">
        <label th:text="#{${name}}" th:for="${name}" class="control-label"></label>
        <input th:case="true" th:type="${type}" th:id="${name}" th:name="${name}" th:value="${value}" class="form-control" required="required"/>
        <input th:case="false" th:type="${type}" th:id="${name}" th:name="${name}" th:value="${value}" class="form-control"/>
    </section>
</body>
</html>

    DISPLAY TAG

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <section th:fragment="display(name, value)" class="form-group">
        <label th:text="#{${name}}" th:for="${name}" class="control-label"></label>
        <div class="box" th:id="${name}" th:text="${value}"></div>
    </section>
</body>
</html>

    Then I used these 2 tags passing the parameters that I want like:

    <section th:replace="~{/tags/input :: input(username, *{username}, text, true)}"></section>

    and

    <section th:replace="~{/tags/display :: display(nome, *{nome})}"></section>