CODEWITHSUNDEEP
javaspringspring-mvcspring-boot
No One
No One

Reputation: 704

Using templates/includes in Spring Boot

im 'developing' an application made using Spring Boot, i am not so sure how to manage templates.

I've tought two ways to do this:

Using custom tags and returning the value of the HTML/JSP file as a String and use it

Something like this

<th:header></th:header>
<!-- This would be the header (The implementation of this tag in Java) -->

<body>
  Things that are not common


  <th:footer></th:footer>
  <!-- This would be the footer -->
</body>

The other way could be using includes, but im not so sure how to do it...

Not sure if theres another way of doing this using Spring. Hope that you could understand me.

Thanks you before hand :·).

Upvotes: 3

Views: 3972

Answers (1)

Marco Tedone
Marco Tedone

Reputation: 602

You could use Thymeleaf. Then you can use 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/header :: common-header" />

<body>

    <div th:replace="common/navbar :: common-navbar" />
    <your content here>
</body
</html>

Then you would have the common-header and common-navbar thymeleaf fragments in separate files like so (note the th:fragment in the common files. Also note that these files are under a common folder): 

<head th:fragment="common-header">

<title>DevOps Buddy</title>

<!-- Bootstrap core CSS -->
<link th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
      rel="stylesheet" media="screen" />

<!-- Custom styles for this template -->
<link type="text/css" th:href="@{/css/styles.css}" rel="stylesheet" media="screen"/>

And so

<div th:fragment="common-navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a th:text="#{navbar.home.text}" href="/"></a></li>
                <li><a th:text="#{navbar.about.text}" href="/about"></a></li>
                <li><a th:text="#{navbar.contact.text}" href="/contact"></a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li th:if="${#authorization.expression('!isAuthenticated()')}">
                    <a th:href="@{/login}" th:text="#{navbar.login.text}" />
                </li>
                <li th:if="${#authorization.expression('isAuthenticated()')}">
                    <form id="f" th:action="@{/logout}" method="post" role="form" class="navbar-form">
                        <button type="submit" th:text="#{navbar.logout.text}" class="btn btn-primary" />
                    </form>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

Upvotes: 6

Related Questions