1. The first step is to modify the StrategyController HTTP-GET method for deleting a strategy. The old and new versions of the relevant HTTP-GET method are shown below.
The old method simply deleted the strategy. The new method is structured around a confirmation page, that uses a new request parameter called "phase" to direct method processing. Initially, the delete page is displayed with the read-only details of the strategy ("stage" phase). On this page a user can either confirm the deletion ("confirm" phase), or cancel the deletion ("cancel" phase). Both of these actions will result in the user being returned to the list page.
@RequestMapping(value="/delete/{id}", method=RequestMethod.GET)
public ModelAndView deleteStrategy(@PathVariable Integer id) {
ModelAndView modelAndView = new ModelAndView("home");
strategyService.deleteStrategy(id);
String message = "Strategy was successfully deleted.";
modelAndView.addObject("message", message);
return modelAndView;
}
@RequestMapping(value="/delete", method=RequestMethod.GET)
public ModelAndView deleteStrategyPage(@RequestParam(value="id", required=true) Integer id,
@RequestParam(value="phase", required=true) String phase) {
Strategy strategy = strategyService.getStrategy(id);
ModelAndView modelAndView = null;
if (phase.equals("stage")) {
modelAndView = new ModelAndView("strategy-delete");
StrategyDTO strategyDTO = StrategyMapper.getDTO(strategy);
String message = "Strategy " + strategy.getId() + " queued for display.";
modelAndView.addObject("strategyDTO",strategyDTO);
modelAndView.addObject("message", message);
}
if (phase.equals("confirm")) {
modelAndView = new ModelAndView("redirect:/strategy/list");
strategyService.deleteStrategy(id);
String message = "Strategy " + strategy.getId() + " was successfully deleted";
modelAndView.addObject("message", message);
}
if (phase.equals("cancel")) {
modelAndView = new ModelAndView("redirect:/strategy/list");
String message = "Strategy delete was cancelled.";
modelAndView.addObject("message", message);
}
return modelAndView;
}
2. The second step is to create the html page for deleting the strategy. We will call this page strategy-delete.html, and the full file is shown below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="../../resources/css/style.css" th:href="@{/resources/css/style.css}"/>
<title th:text="#{strategy.delete.page.title}">Title</title>
</head>
<body>
<h1 data-th-text="#{strategy.delete.head.title}">temp heading</h1>
<table class="box-table-a">
<tr>
<td data-th-text="#{strategy.list.id.label}">Temp id</td>
<td data-th-text="${strategyDTO.id}">
</td>
</tr>
<tr>
<td data-th-text="#{strategy.list.type.label}">Temp type</td>
<td data-th-text="${strategyDTO.type}">
</td>
</tr>
<tr>
<td data-th-text="#{strategy.list.name.label}">Temp name</td>
<td data-th-text="${strategyDTO.name}">
</td>
</tr>
<tr>
<td><a href="#" data-th-href="@{/strategy/delete(id=${strategyDTO.id},phase=confirm)}">
<button type="button" data-th-text="#{delete.button.label}">Delete</button></a>
</td>
<td><a href="#" data-th-href="@{/strategy/delete(id=${strategyDTO.id},phase=cancel)}">
<button type="button" data-th-text="#{cancel.button.label}">Cancel</button></a>
</td>
</tr>
</table>
</body>
</html>
This page is rendering the strategy details contained in the StrategyDTO object passed to this page. The initial get request to the delete method will populate the DTO and pass it back to the page. The page contains both delete and cancel buttons, with the backing data-th-href values dynamically generated for a given strategy id. Lastly, each button has a unique phase value, so that get request for each button can be handled correctly by the HTTP-GET request to the delete method on the controller.3. The last step before demoing the application is to modify the list page to correctly link to the delete page we just created. The relevant section of code in the strategy-list.html file is shown below. The only change that was made to this code was to add the data-th-href entry for the delete functionality. As with "edit," the code will build a link for each strategy in the list, with the link containing the id of a given strategy.
<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="#" data-th-href="@{/strategy/delete(id=${strategy.id},phase=stage)}">delete</a> |
<a href="#" data-th-href="@{/strategy/edit(id=${strategy.id})}">edit</a>
</td>
</tr>
4. We can now run the application, navigate to the list page, and select delete on a strategy. The screenshot below is the delete page for the second strategy.
In future posts we will look at integrating Twitter Bootstrap and integrating Spring Security. After these steps are complete, we should be ready to start building out the trading system core.
Code at GitHub: https://github.com/dtr-trading/spring-ex04
