CODEWITHSUNDEEP
springspring-mvcthymeleaf
Ibrahim Yasin
Ibrahim Yasin

Reputation: 41

Thymeleaf Template

Thymeleaf enables template to display statically on browser as a prototype This example explains that http://www.thymeleaf.org/doc/articles/petclinic.html

<!-- ownersList.html -->
<!DOCTYPE html>

<html lang="en">

<head th:substituteby="fragments/headTag :: headTag">

  <!-- ============================================================================ -->
  <!-- This <head> is only used for static prototyping purposes (natural templates) -->
  <!-- and is therefore entirely optionl, as this markup fragment will be included  -->
  <!-- from "fragments.html" at runtime.                                            -->
  <!-- ============================================================================ -->

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>PetClinic :: a Spring Framework demonstration</title>

  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/2.3.0/css/bootstrap.min.css}" rel="stylesheet" />
  <link href="../../../resources/css/petclinic.css" th:href="@{/resources/css/petclinic.css}" rel="stylesheet" />

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" th:src="@{/webjars/jquery/1.9.0/jquery.js}"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" th:src="@{/webjars/jquery-ui/1.9.2/js/jquery-ui-1.9.2.custom.js}"></script>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" th:href="@{/webjars/jquery-ui/1.9.2/css/smoothness/jquery-ui-1.9.2.custom.css}" rel="stylesheet" />

</head>

<body>

  <div class="container">

    <div th:include="fragments/bodyHeader" th:remove="tag">

      <!-- =========================================================================== -->
      <!-- This div is only used for static prototyping purposes (natural templates)   -->
      <!-- and is therefore entirely optionl, as this markup fragment will be included -->
      <!-- from "fragments.html" at runtime.                                           -->
      <!-- =========================================================================== -->

      <img th:src="@{/resources/images/banner-graphic.png}" src="../../../resources/images/banner-graphic.png" />

      <div class="navbar" style="width: 601px;">
        <div class="navbar-inner">
          <ul class="nav">
            <li style="width: 100px;">
              <a href="../welcome.html" th:href="@{/}">
                <i class="icon-home"></i>Home
              </a>
            </li>
            <li style="width: 130px;">
              <a href="../owners/findOwners.html" th:href="@{/owners/find.html}">
                <i class="icon-search"></i>Find owners
              </a>
            </li>
            <li style="width: 140px;">
              <a href="../vets/vetList.html" th:href="@{/vets.html}">
                <i class="icon-th-list"></i>Veterinarians
              </a>
            </li>
            <li style="width: 90px;">
              <a href="../exception.html" th:href="@{/oups.html}" title="trigger a RuntimeException to see how it is handled">
                <i class="icon-warning-sign"></i>Error
              </a>
            </li>
            <li style="width: 80px;">
              <a href="#" title="not available yet. Work in progress!!">
                <i class=" icon-question-sign"></i>Help
              </a>
            </li>
          </ul>
        </div>
      </div>

    </div>


    <!-- ... -->


    <table th:substituteby="fragments/footer :: footer" class="footer">

      <!-- =========================================================================== -->
      <!-- This table section is only used for static prototyping purposes (natural    -->
      <!-- templates) and is therefore entirely optionl, as this markup fragment will  -->
      <!-- be included from "fragments.html" at runtime.                               -->
      <!-- =========================================================================== -->

      <tr>
        <td></td>
        <td align="right">
          <img src="../../../resources/images/springsource-logo.png" th:src="@{/resources/images/springsource-logo.png}" alt="Sponsored by SpringSource" />
        </td>
      </tr>

    </table>

  </div>

</body>

</html>

my question is suppose you need to change the bodyHeader fragment, you change it in the fragment definition, but still you need to change the static content across all of other pages to still be able to view them the same as rendered version. does static prototyping worth that extra code in all pages ?

Upvotes: 2

Views: 1294

Answers (1)

user297600
user297600

Reputation: 94

You might want to take a look at thymol (http://www.thymoljs.org/), which tries to solve the problem you describe.

It's a JavaScript implementation of a subset of Thymeleaf. With thymol you're able to resolve includes and a lot of template expressions directly in the browser without the need for a web server.

A simple way to get around this limitation without using thymol would be to limit static content to a structural placeholder. In the example above, you'd not include the complete body header, but only the first level of HTML tags of the include, so the page structure is intact, but only the content that's actually defined in the template is completely spelled out. Example:

<div th:include="fragments/bodyHeader" th:remove="tag">
  <img th:src="@{/resources/images/banner-graphic.png}" src="../../../resources/images/banner-graphic.png" />
  <div class="navbar" style="width: 601px;">
      NAVIGATION
  <div>
</div>

This way, you'll only need to change templates that include a fragment if the included fragment dramatically changes.

Upvotes: 3

Related Questions