Creating Templates with Mustache

Mustache is nothing but a web template system. It is a “logic-less template engine” for creating dynamic content. Logic-less because it doesn’t support conditional statements like “if-else” and iterative statements like “for loops”. So for handling these types of conditions, we need to manipulate the data only, which can be done with the help of the lambdas and collections.

The Mustache is using the Spring Web MVC Architecture. MVC is Model View Controller. The MVC is responsible for encapsulating the data in form of Java POJOs that will be further created into loosely coupled and flexible Web Applications.

Flow Diagram of Spring Boot Mustache

This flow diagram gives us an example of how a web application uses a Mustache.

Let’s start to create a simple HTML template of displaying articles on different topics with the help of mustache in few simple steps:

We will be creating a Spring Boot Application, so we need Maven Dependency to enable Mustache in our application.

Apart from Mustache dependency, we need one more dependency “starter-web” for creating a web application.

2. Create An API

The Controller plays an important role here. It connects the data which is coming from the service to the HTML template.

Here, the Model is a java object that carries the data, but by default it is null. There is a list of ArticleDTO that collects the description of different articles. The ArticleDTO comprises the id, name, and content of the Article.

In the controller, the Intstream.range(int startIndex, int endIndex) will run a loop from 0 to 5 and fetch the data from the ArticleDisplayService.

Here, I have added the static data from the Lists but it can be fetched from the database also. Now the ArticleAPI will collect all the data from ArticleDisplayService in the List of ArticleDTO.

Now, we have data in articles, we will pass this to Model through Model.addAttribute() method. Model.addAttribute() method has two parameters String var1, @Nullable Object var2. The value of both the parameters will be the same as-

As you can see the return type of the method defined is ModelAndView. ModelAndView is a holder for both Model and View Class that helps the controller to return both model and view in a single return value.

The parameter of ModelAndView must be equal to the name of the HTML file from which the data is needed to be populated onto the web application. For the extension identification that which type of file is associated in the application.properties, we provide the details of the port also(Not necessary, by default it will run at 8080).

In the resources folder, we can see that there are two subfolders, static and templates. The templates folder will have the HTML files where the dynamic content is needed to be displayed and the static folder will have the designing part, eg- .css files.

In the template folder, we have three files:
1. intro.html — The introduction file. This will have all the initial HTML tags and the head tags.

In this file, we can see that we have embedded the .css file as well which is being fetched from the static folder from the resources folder.

2. article.html- This file will be having the main data that is being fetched from the services and it will display on a web browser.

As discussed above, the name of the file must be in the parameter of the ModelAndView. So the main joint of HTML and Spring is through the article.html file only.

3. footer.html- This file is having the ending tags of the HTML file.

Now you have added all the files and set the configuration. If you have added a code similar to the above, then the service will start.

Now, sometimes if want to populate the data onto an HTML file, but if the data is not present example if the content of a particular article is not present or the value of the content is null, then to prevent our application from throwing an error, we will add one bean in the MustacheIntroApplication.java.

The Mustache.Compiler will set one default value that we want to add to our application. If the default value is not added, it will give an exception. So, to prevent this exception we will add this bean.

If the bean is not added, and if no value is present. Here, I have created the data of the article but without content.

If we add the bean with some default value, on hitting the same API, it will give the result as:

Now, in place of the content, it will display some default value that was assigned in the bean.

Conclusion:
We have successfully created an HTML template with the help of Mustache in Spring Boot.

Related posts:

O mercado financeiro é um grande campo de atuação da Ciência de Dados, sendo possível ser realizada a previsão do preço de ações, clusterização de empresas similares, análise de sentimentos de…

What oxygen is to living organisms, is what customers are to any business. Considering the present day scenario, we use technology for almost every action we take. The advent of technology has taken…

This is an analysis of the de Sade’s family name in The Case Study of Vanitas (VnC). This is mostly to serve as a prelude to Louis’s and Dominique’s birth flower analysis in a future article, and for…