Bringing Thymeleaf and Natural Templates to the Spring PetClinic

By Soraya Sánchez <sschz AT users.sourceforge.net>

Note: The Spring PetClinic application received a major update from SpringSource in March 2013, and the thymeleafexamples-petclinic application has been updated consequently, along with this article.

The Spring PetClinic application

PetClinic is one of the example applications created by SpringSource for the Spring Framework. It is designed to display and manage information related to pets and veterinarians in a pet clinic. The original SpringSource version lives in GitHub here, and the thymeleaf-enabled version lives also in GitHub here.

PetClinic home page

Pet Clinic originally includes a view layer created with JSP, which we will replace using Thymeleaf:

All the code of the PetClinic+Thymeleaf application can be obtained at the Thymeleaf Project's Documentation page. Note that the original JSP files and JSP tags have not been removed from the source tree but rather moved to the doc/old_viewlayer folder at the source tree, so that you can still access them in order to compare with the new templates.

The version of the PetClinic application used as a base is the state of its master branch at Github as of 17 March 2013.

The original JSP view layer

The original JSP view layer has a number of problems we will try to fix when converting the view layer to Thymeleaf:

Configuration

Basic project configuration

Some basic configuration steps will be needed:

mvc-view-config.xml

Our next configuration step will be to add three required beans at the Spring beans configuration file, mvc-view-config.xml:

Note that, as a difference from the original application, our templates will live at the /WEB-INF/thymeleaf folder instead of the original /WEB-INF/jsp.

From JSP to Thymeleaf

PetClinic includes more than 10 JSP templates, and we will rewrite all of them using Thymeleaf. However, for the sake of brevity, we will focus on owners/ownerslist.jsp, which we will convert into owners/ownersList.html.

Remember you can see all the templates at the source code, downloadable from the documentation page, and also that you can review the original JSP files at the doc/old_viewlayer folder.

The owners/ownersList page looks like this:

Owners page

In order to convert this page to Thymeleaf, we will:

Note how our ownersList.html contains more code at its head, header and footer sections than the original JSP file. Doing it this way is merely optional, and its only aim is to allow the ownersList.html Thymeleaf-enabled template to display statically as a prototype (something nearly impossible with JSP).

Is this additional code worth it? If you need or want to use design prototypes, indeed! You will see clearly how much a difference this is at the last section of this article. And anyway... remember this prototyping code is optional!

Which we will replace with:

And what about the Natural Templates thing?

Before we started this migration, we set a goal that our new Thymeleaf templates would be able to display correctly when open statically in a browser (without starting the application server) thanks to the Natural Templating capabilities of Thymeleaf.

Well, let's have a look at how the original owners/ownersList.jsp template looks like when seen statically:

Owners list (JSP), statically opened

...and now let's have a look at our new Thymeleaf-powered owners/ownersList.html:

Owners list (thymeleaf), statically opened

There we are. Data is not valid, because it is a prototype. But it looks good!