Monday, January 20, 2014

Thymeleaf Page Layouts

Usually websites share common page components like the header, footer, menu and possibly many more. These page components can be used by the same or different layouts. There are two main styles of organizing layouts in projects: include style and hierarchical style. Both styles can be easily utilized with Thymeleaf without losing its biggest value: natural templating.

Update (25/04/2017): Read about Thymeleaf 3 layout improvements : Thymeleaf 3 Standard Layout System Improvements

Include Style Layouts

In this style pages are built by embedding common page component code directly within each view to generate the final result. In Thymeleaf this can be done using Thymeleaf Standard Layout System:


<body>
    <div th:include="footer :: copy"></div>
</body>

The include-style layouts are pretty simple to understand and implement and in fact they offer flexibility in developing views, which is their biggest advantage. The main disadvantage of this solution, though, is that some code duplication is introduced so modifying the layout of a large number of views in big applications can become a bit cumbersome.

Hierarchical Style Layouts

In hierarchical style, the templates are usually created with a parent-child relation, from the more general part (layout) to the most specific ones (subviews; e.g. page content). Each component of the template may be included dynamically based on the inclusion and substitution of template fragments. In Thymeleaf this can be done using: Thymeleaf Layout Dialect and Thymeleaf Tiles Integration.

The main advantages of this solution are the reuse of atomic portions of the view and modular design, whereas the main disadvantage is that much more configuration is needed in order to use them, so the complexity of the views is bigger than with Include Style Layouts which are more "natural" to use.

Thymeleaf Standard Layout System, Thymol, Tiles Integration, Layout Dialect, Custom Layout

The full version of this article, that I wrote for thymeleaf.org, with a great help of Daniel Fernández, can be found here: http://www.thymeleaf.org/doc/articles/layouts.html. The corresponding project can be found on GitHub: https://github.com/thymeleaf/thymeleafexamples-layouts

5 comments:

  1. Hey,
    I've discovered thymeleaf thanks to your amazing spring-mvc-quickstart-archetype and I'm just starting my journey with it :). Could you tell me why are you using there both href and th:href tags ? E.g. link href="../../../resources/css/core.css" rel="stylesheet" media="screen" th:href="@{/resources/css/core.css}"?
    Cheers!
    Michał

    ReplyDelete
    Replies
    1. Hi,

      Thanks for the comment!

      Href attributes is used for static prototyping. Thanks to that you don't need a server to see the views. This article can give you some hands-on example of natural templating: http://www.thymeleaf.org/petclinic.html. More articles here: http://www.thymeleaf.org/documentation.html

      Delete
    2. Hello,
      Thank you for a petclinic example. Now I finally get it :)

      Delete
  2. Thanks for the post. Can you please help me understand what actually $(.. means and how does that compile. I am not getting the use/definition for use of dollar ($) here. I beleive the syntax is in java right? Please point me if I am missing something.

    ReplyDelete
    Replies
    1. "${...} expressions are in fact OGNL (Object-Graph Navigation Language) expressions executed on the map of variables contained in the context."

      http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#variables

      Delete