CustomMenu

Tuesday, February 18, 2014

Spring MVC 4 - Thymeleaf CRUD - Part 2

This is the second part of a series on moving a simple Spring MVC 4 CRUD application from JSP to Thymeleaf.  The first part of the series can be found at Spring MVC 4 - Thymeleaf CRUD - Part 1.  In part one, simple list functionality was built.  In this post we will create the "add" functionality on the same page.

1. The first step is to modify the StrategyController method for adding a strategy.  An http-get method will not be needed, so we can delete that method from the controller.  Here are the old and new versions of the relevant http-post method.  They are essentially the same except for the addition of the StrategyDTO created earlier, and redirecting the user to the list page after a strategy has been created.

Recall that the StrategyDTO object was passed to the list page.  On the list page, this object will be the container that holds our strategy values to be added to the database.  The object containing the new strategy fields will be processed by the new method below.
    @RequestMapping(value="/add", method=RequestMethod.POST)
    public ModelAndView addingStrategy(@ModelAttribute Strategy strategy) {
        ModelAndView modelAndView = new ModelAndView("home");
        strategyService.addStrategy(strategy);
        String message = "Strategy was successfully added.";
        modelAndView.addObject("message", message);
        return modelAndView;
    }
    @RequestMapping(value="/add", method=RequestMethod.POST)
    public ModelAndView addingStrategy(@ModelAttribute StrategyDTO strategyDTO) {
        ModelAndView modelAndView = new ModelAndView("redirect:/strategy/list");
        Strategy strategy = StrategyMapper.getStrategy(strategyDTO);
        strategyService.addStrategy(strategy);
        String message = "Strategy " + strategy.getId() + " was successfully added";
        modelAndView.addObject("message", message);
        return modelAndView;
    }

2. Now the strategy-list.html page will need to be updated to have the "add" functionality added to the page.  The add functionality is contained in the form at the bottom of the html page.

In the form, the data-th-object is the dto object sent to the list page when the page was rendered.  The *{} fields are fields on this object that will be set to the values in the corresponding form fields.  The *{id} field is hidden because this value is generated by the database and is not a user entered value.  The new strategy-list.html page is show below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
    
<head data-th-fragment="header">
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="../../resources/css/style.css" data-th-href="@{/resources/css/style.css}"/>
    <title data-th-text="#{strategy.list.page.title}">Title</title>
</head>

<body>
<div>
    <table class="box-table-a">
        <caption data-th-text="#{strategy.list.table.title}">Temp table title</caption>
        <thead>
            <tr>
                <th scope="col" data-th-text="#{strategy.list.id.label}">Temp ID</th>
                <th scope="col" data-th-text="#{strategy.list.type.label}">Temp Type</th>
                <th scope="col" data-th-text="#{strategy.list.name.label}">Temp Name</th>
                <th scope="col" data-th-text="#{strategy.list.actions.label}">Temp Action</th>
            </tr>
        </thead>
        <tbody>
            <tr data-th-each="strategy : ${strategies}">
                <td data-th-text="${strategy.id}">1</td>
                <td data-th-text="${strategy.type}">Iron Butterfly</td>
                <td data-th-text="${strategy.name}">Triple Butter</td>
                <td><a href="#" >delete</a> | 
                    <a href="#" >edit</a>
                </td>
            </tr>
            <tr data-th-remove="all">
                <td>2</td>
                <td>Iron Condor</td>
                <td>High Prob Hedged</td>
                <td><a href="#">delete</a> | <a href="#">edit</a></td>
            </tr>
        </tbody>
    </table>
 
 <form action="#" data-th-action="@{/strategy/add}" data-th-object="${strategyDTO}" method="post">
 <table class="box-table-a">
  <caption data-th-text="#{strategy.list.add.title}">Add Title</caption>
  <thead>
   <tr>
    <th data-th-text="#{strategy.list.type.label}">Type Label</th>
    <th data-th-text="#{strategy.list.name.label}">Name Label</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><input type="text" hidden="hidden" data-th-field="*{id}"/>
        <input type="text" data-th-field="*{type}"/></td>
    <td><input type="text" data-th-field="*{name}"/></td>
   </tr>
   <tr>
    <td>
     <button type="submit" data-th-text="#{add.button.label}">Action</button>
    </td>
    <td></td>
   </tr>
  </tbody>
 </table>
 </form>
</div>
</body>
</html>

3. Now, when you run the application on the server and go to the list page, you should see the screen below.

4. If you add some options trading strategies, the should show up in the list after selecting the "add" button.

In Part 3, we will create the update/edit functionality so that we can edit the strategies in the database.  There are links on the list page for this functionality, but these links are currently stubs.

Code at GitHub: https://github.com/dtr-trading/spring-ex04

No comments:

Post a Comment