DTR Trading: Spring MVC 4 - Thymeleaf Prep and Mockup

This example builds on the last post, Spring MVC 4 - Hibernate 4 CRUD, where Spring 4 and Hibernate 4 were used to build end-to-end CRUD functionality. We will now prepare the application for Thymeleaf. I will do this in two posts and borrow heavily from Krams article on the same topic.

1. Add the Thymeleaf configuration to the config directory:

package com.dtr.oas.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.thymeleaf.spring4.SpringTemplateEngine;
import org.thymeleaf.spring4.view.ThymeleafViewResolver;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;
import org.thymeleaf.templateresolver.TemplateResolver;

@Configuration
public class ThymeleafConfig {

    @Bean
    public TemplateResolver templateResolver(){
        ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver();
        templateResolver.setPrefix("/WEB-INF/views/");
        templateResolver.setSuffix(".html");
        templateResolver.setTemplateMode("HTML5");
        return templateResolver;
    }

    @Bean
    public SpringTemplateEngine templateEngine(){
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        return templateEngine;
    }

 @Bean 
 public ThymeleafViewResolver thymeleafViewResolver() {
  ThymeleafViewResolver resolver = new ThymeleafViewResolver();
  resolver.setTemplateEngine(templateEngine());
  return resolver;
 }
}

2. Update the initializer to load the ThymeleafConfig file:

package com.dtr.oas.config;

import org.springframework.core.annotation.Order;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

import com.dtr.oas.config.DatabaseConfig;
import com.dtr.oas.config.ThymeleafConfig;
import com.dtr.oas.config.WebAppConfig;

@Order(1)
public class Initializer extends
  AbstractAnnotationConfigDispatcherServletInitializer {

 @Override
 protected Class<?>[] getRootConfigClasses() {
  return new Class[] { DatabaseConfig.class };
 }

 @Override
 protected Class<?>[] getServletConfigClasses() {
  return new Class<?>[] { ThymeleafConfig.class, WebAppConfig.class };
 }

 @Override
 protected String[] getServletMappings() {
  return new String[] { "/" };
 }

}

3. Update the WebAppConfig file by changing the mapping directory from views to pages:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.support.ResourceBundleMessageSource;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.JstlView;
import org.springframework.web.servlet.view.UrlBasedViewResolver;

@Configuration
@EnableWebMvc
@ComponentScan("com.dtr.oas")
public class WebAppConfig extends WebMvcConfigurerAdapter {
 
 @Bean
 public UrlBasedViewResolver setupViewResolver() {
  UrlBasedViewResolver resolver = new UrlBasedViewResolver();
  resolver.setPrefix("/WEB-INF/pages/");
  resolver.setSuffix(".jsp");
  resolver.setViewClass(JstlView.class);
  return resolver;
 }
 
 
 // Maps resources path to webapp/resources
 public void addResourceHandlers(ResourceHandlerRegistry registry) {
  registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
 }

 // Provides internationalization of messages
 @Bean
 public ResourceBundleMessageSource messageSource() {
  ResourceBundleMessageSource source = new ResourceBundleMessageSource();
  source.setBasename("messages");
  return source;
 }

}

4. We are now finished with the java code under the main folder. There are no updates to the resources directory under the main folder. We do have updates and changes to the files and directories in the webapp directory. First we will add a css directory under the webapp/resources directory.

5. In this directory we will add the following css file:

body {
 font-family: Arial, sans-serif;
 font-size: 1em;
}

caption {
 font-size: 18px;
}

/**
 * Table style from Top 10 CSS Table Designs
 * http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
 */
 
.box-table-a {
 font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
 font-size: 12px;
 margin: 45px;
 width: 700px;
 text-align: left;
 border-collapse: collapse;
}

.box-table-a th {
 font-size: 13px;
 font-weight: normal;
 text-align: left;
 padding: 8px;
 background: #b9c9fe;
 border-top: 4px solid #aabcfe;
 border-bottom: 1px solid #fff;
 color: #039;
}

.box-table-a td {
 padding: 8px;
 background: #e8edff; 
 border-bottom: 1px solid #fff;
 color: #669;
 border-top: 1px solid transparent;
}

.box-table-a tr:hover td {
 background: #d0dafd;
 color: #339;
}

6. We now have a little house cleaning to do under the WEB-INF directory. We need to change the name of the directory containing our jsps from "views" to "pages". We need to create a new directory under WEB-INF named "views". This directory is empty now, but will contain our Thymeleaf templates soon.

7. Now create our mockup file named home.html in the directory named "views". This file and the css filew were copied from Krams.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta charset="utf-8" />
 <link type="text/css" rel="stylesheet" href="resources/css/style.css"/>
 <title>Title</title>
</head>
 
<body>
<div>
 <table class="box-table-a">
  <caption>Site Users</caption>
  <thead>
   <tr>
    <th scope="col">Id</th>
    <th scope="col">Strategy Type</th>
    <th scope="col">Strategy Name</th>
    <th scope="col">Actions</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>1</td>
    <td>Iron Condor</td>
    <td>High Prob Hedged</td>
    <td><a href="#">del</a> | <a href="#">edit</a></td>
   </tr>
       
   <tr>
    <td>2</td>
    <td>Iron Condor</td>
    <td>Low Prob</td>
    <td><a href="#">del</a> | <a href="#">edit</a></td>
   </tr>
   <tr>
    <td>3</td>
    <td>Butterfly</td>
    <td>M3</td>
    <td><a href="#">del</a> | <a href="#">edit</a></td>
   </tr>
   <tr>
    <td>4</td>
    <td>Butterfly</td>
    <td>Bearish</td>
    <td><a href="#">del</a> | <a href="#">edit</a></td>
   </tr>
   <tr>
    <td>5</td>
    <td>Iron Condor</td>
    <td>Portillos</td>
    <td><a href="#">del</a> | <a href="#">edit</a></td>
   </tr>
  </tbody>
 </table>
 
 <form action="#" method="post">
 <table class="box-table-a">
  <caption>New Strategy</caption>
  <thead>
   <tr>
    <th>Strategy Type</th>
    <th>Strategy Name</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><input type="text" hidden="hidden"/>
     <input type="text"/></td>
    <td><input type="text"/></td>
   </tr>
   <tr>
    <td><button type="submit">Action</button></td>
    <td></td>
   </tr>
  </tbody>
 </table>
 </form>
</div>
</body>
</html>

8. When we run the project on the server, we should see the following page: