Create your first application in Thymeleaf with Spring MVC

We have already seen the basics and the integration of Thymeleaf with Spring MVC. And I hope we are good to proceed with creating our first sample application in Thymeleaf with Spring MVC as well as Maven.

So let’s first prepare our pom.xml with the needed dependencies:

For a Spring MVC based application, let’s make sure that we have properly created the web.xml that should look like:

Note that we have specified the dispatcher-servlet for our application, which would take in all the incoming requests matching the configured url-pattern (‘/’) and delegate the processing of these requests to the handler, which finds the right controller method to invoke.

Note that the dispatcher-servlet name <servlet-name> we have specified to be ‘mvc-dispatcher’. Therefore, when the dispatcher-servlet is initialized on server start-up, the Spring Framework will attempt to load the application context from the file named mvc-dispatcher-servlet.xml.

Let’s check out our application context file mvc-dispatcher-servlet.xml:

There are several points to note in the above code, like –

  1. We need to and we have defined the Thymeleaf specific View Resolver, template engine and the templateResolver beans.
  2. We opted for FileTemplateResolver since we will be externalizing the view components for our application, which actually highlights the capability of Thymeleaf (and you will further acknowledge this as we proceed).We have already learnt about all possible choices we have for defining the templateResolver (Click here to learn more).
  3. Note that we have set the “prefix” property of FileTemplateResolver to be “E:/Demo/”, which points to the local “E:/Demo/” directory where all the external thymeleaf template files need to be placed. Quite similar, the “suffix” property of FileTemplateResolver with value “.html” tells that all the external Thymeleaf template files must have an extension “.html”.
  4. Also to be noted that this externalization would never be possible with JSP and any future update to Thymeleaf files won’t even need a server restart. Thymeleaf template is more like an HTML markup with some added super-powers.

Now let’s create the Thymeleaf files at the external file location we have specified (E:/Demo/).

index.html – The landing page

hello.html – Where the dropdown list populates using the Spring model data and Thymeleaf dialects, which undoubtedly uses the Spring Expression language internally.

I hope everything looks self-explanatory in the above file content. There is an iteration of the model data dropDownItems using th:each to populate the dropdown list. dropDownItems contain the Hashmap which actually holds the required data key-value pairs to populate the dropdown list.

So what our controller class looks like is –

When our application is first run on server startup, the landing page is displayed through the showLandingPage() method, which returns the view “index” with the model data “message”, thereby displaying the resolved content of index.html file on the browser. Below is what we see the landing page to be –

Application in Thymeleaf with Spring MVC - Landing Page

Clicking on the ‘Navigate to the demo page’ link will invoke the controller method with RequestMapping “hello”, returning the dropDownItems model data and the hello view. The resolved content of the hello.html file then shows up on the browser, with a well populated dropdown list, and the page looks something like:

Application in Thymeleaf with Spring MVC - Demo page

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.