CustomMenu

Monday, May 12, 2014

Iron Condor Backtest - RUT - 52 DTE

In this post we will look at the automated backtesting results for four variations of a 52 days-to-expiration (DTE) iron condor (IC).  As with the prior two tests, the short strikes for both the call credit spreads and put credit spreads will be at roughly the same delta.  See my post Thoughts on Options Strategy Backtests for some background on my testing approach.  The prior IC backtesting results posts can be found at:
As with the other tests, in these backtests there will be no adjustments during the trade and no hedging to start the positions leaning one direction or another.  Many of these settings are available in the backtester, but we will continue to look at this basic IC case.  Here are the setup details:



(1) The backtester will start looking for trades that meet the entry DTE requirement after this date
(2) The backtester will not take any trades that will have an exit DTE after this date
(3) Some trading platforms call 52 DTE, 50 DTE (e.g., TOS).  The OSB uses a DTE based on the number of days to the expiration date in the option code/opra code, which is a Saturday for indexes
(4) Some trading platforms call 8 DTE, 6 DTE (e.g., TOS)
(5) Russell 2000 Index options
(6) Four 52 DTE "no-touch" condors will be tested with their short strikes at varying deltas (8, 12, 16, and 20)
(7) The distance between the short call and long call (also, the distance between the short and long puts)

The equity curves for each of the four strategies are shown in the graph below.  In addition to the equity curves, the ATM IV at trade initiation is also plotted (the average of the ATM call and ATM put).  Also, the dates in the chart are expiration dates.

If I pick a random expiration date, for example 03/22/2008, we can see that when the trade was initiated, the ATM IV was 31.  When the trade was closed, the cumulative non-compounded profit had grown to between $21.5k and $30.4k depending on the short delta of the strategy.


For these trades, the maximum reg-t margin requirement is between $15.8k and $18.6k assuming your brokerage only margin's on one side of your IC.  If you have portfolio margin, your requirement is somewhere around one-quarter to one-half the reg-t margin numbers.

In the table below are the standard trade metrics for the four ICs with different short strikes (8 delta, 12 delta, 16 delta, and 20 delta).


Similar to the 66 and 80 DTE "no touch" trades, there are some big drawdowns in these trades because of the lack of adjustments and hedging.  The size of the losing trades and the number of losing trades increases with the size of the short deltas.  The combination of shorter DTE and closeness of the short strikes makes these higher delta condors less resilient.  It's interesting to note that with this 52 DTE strategy, the 8 delta trade has taken the lead in terms of best Sharpe and Sortino and smallest "worst trade".

We can look at just the 12 delta of this IC in a bit more detail.  In the heat map below, we can see the performance by expiration month of each of the individual trades of each of these strategies.  The 0% cells represent expiration months were no trade was initiated.  Some of these 0% cells are due to lack of data or bad prints on the trade entry day...leading the backtester to skip that month for testing.


We can also look at the 12 delta IC in terms of the P&L range (in %), range of the underlying (in %), and IV range (in %), for each trade by expiration month.  This data is shown in the three graphs below.  These graphs are showing the open, which is the 0% level, the high (green bar), the low (red bar), and the value at trade close (the blue line).  Also, note that the months shown on the horizontal axis are not displaying expiration dates in order to make the chart less cluttered with axis labels.

The top graph displays P&L range.  You can see that when the trade closes profitably, the range is mostly on the positive side of the graph, with losing trades being exactly the opposite.

The middle graph shows the range of the underlying, the RUT, in percent terms during the life of each trade. With a bullish bias for US indexes, it's not surprising to see that it is more common for the market to finish higher relative to the day the ICs were entered.

The bottom graph shows the ATM IV range and closing value in percent terms, during the life of each IC trade.  IV decays to zero as we approach expiration, so you would expect these bars to be mostly red, with the closing value to be negative (the blue line).  There were several times where ATM IV finished higher, and green...usually when there were market drops...as expected.


In the next backtesting post I will look at this same IC entered at 38 DTE, two weeks later than this test.  Drop me a note if you'd like to see different data presented, and I'll do my best to incorporate your suggestions in the next post or two.


Thursday, May 8, 2014

Iron Condor Backtest - RUT - 66 DTE

In this post we will look at the automated backtesting results for four variations of a 66 DTE iron condor (IC).  In these tests, the short strikes for both the call credit spreads and put credit spreads will be at roughly the same delta.  See my post Thoughts on Options Strategy Backtests for some background on my testing approach.

In these backtests there will be no adjustments during the trade and no hedging to start the positions leaning one direction or another.  Many of these settings are available in the backtester, but we will just look at a base case this time.  Here are the setup details:



(1) The backtester will start looking for trades that meet the entry DTE requirement after this date
(2) The backtester will not take any trades that will have an exit DTE after this date
(3) Some trading platforms call 66 DTE, 64 DTE (e.g., TOS).  The OSB uses a DTE based on the number of days to the expiration date in the option code/opra code, which is a Saturday for indexes
(4) Some trading platforms call 8 DTE, 6 DTE (e.g., TOS)
(5) Russell 2000 Index options
(6) Four 66 DTE "no-touch" condors will be tested with their short strikes at varying deltas (8, 12, 16, and 20)
(7) The distance between the short call and long call (also, the distance between the short and long puts)

The equity curves for each of the four strategies are shown in the graph below.  In addition to the equity curves, the ATM IV at trade initiation is also plotted (the average of the ATM call and ATM put).  Also, the dates in the chart are expiration dates.

If I pick a random expiration date, for example 03/22/2008, we can see that when the trade was initiated, the ATM IV was 29.  When the trade was closed, the cumulative non-compounded profit had grown to between $29.7k and $41.1k depending on the short delta of the strategy.


For these trades, the maximum reg-t margin requirement is between $15.1k and $18.6k assuming your brokerage only margin's on one side of your IC.  If you have portfolio margin, your requirement is somewhere around one-quarter to one-half the reg-t margin numbers.

In the table below are the standard trade metrics for the four ICs with different short strikes (8 delta, 12 delta, 16 delta, and 20 delta).


Similar to the 80 DTE "no touch," there are some big drawdowns in these trades because of the lack of adjustments and hedging.  No trader would put on strategies like these in any decent size.  On the positive side, the percentage of winning trades and AGR are both pretty good.  Also, notice how the 8 delta strategy performs relative to the other strategies.  It has a higher win rate, but due to the smaller credits received for the credit spreads, it has a smaller non compounded AGR and a smaller "best trade" in the summary statistics.

We can look at just the 8 delta and 20 delta versions of this IC in a bit more detail.  In the heat map below, we can see the performance by expiration month of each of the individual trades of each of these strategies.  The 0% cells represent expiration months were no trade was initiated.  Some of these 0% cells are due to lack of data or bad prints on the trade entry day...leading the backtester to skip that month for testing.



The losing months for the 8 delta strategy overlap with the losing months of the 20 delta strategy.  The 20 delta strategy has additional losing months though, since there is less distance between the short strikes for the 20 delta strategy than the 8 delta strategy.  On the flip side, the percent returns for the winning months of the 20 delta strategy are much larger (in general) than the percent returns for the winning months of the 8 delta strategy.

We can also look at the 8 and 20 delta ICs in terms of the P&L range (in %), range of the underlying (in %), and IV range (in %), for each trade by expiration month.  This data is shown in the two groups of three graphs below.  These graphs are essentially showing the open, which is the 0% level, the high (green bar), the low (red bar), and the value at trade close (the blue line).  Also, note that the months shown on the horizontal axis are not displaying expiration dates in order to make the chart less cluttered with axis labels.

The top graph displays P&L range.  You can see that when the trade closes profitably, the range is mostly on the positive of the graph, with losing trades being exactly the opposite.

The middle graph shows the range of the underlying, the RUT, in percent terms during the life of each trade.  The middle graphs are identical in the 8 delta and 20 delta groups.  Up until early 2013, it was not uncommon for the underlying to move nearly 10% during the 58 days that one of these trades was active.  With a bullish bias for US indexes, it's not surprising to see that it is more common for the market to finish higher relative to the day the ICs were entered.

The bottom graph shows the ATM IV range and closing value in percent terms, during the life of each IC trade.  The bottom graphs are identical in the 8 delta and 20 delta groups.  IV decays to zero as we approach expiration, so you would expect these bars to be mostly red, with the closing value to be negative (the blue line).  There were several times where ATM IV finished higher, and green...usually when there were market drops...as expected.



That's it for this trade.

In the next backtesting post I will look at this same IC entered at 52 DTE, two weeks later than this test.  Drop me a note if you'd like to see different data presented, and I'll do my best to incorporate your suggestions in the next post or two.


Wednesday, May 7, 2014

Spring Thymeleaf Roles CRUD - Part 2

This post builds on the code from part 1 of this series,Spring Thymeleaf Roles CRUD - Part 1.  In the past post we refactored some code and bulit the role controller.  In this post we will finish off the CRUD functionality for the Role entity by creating the Thymeleaf CRUD pages.


1. Before I show the Thymeleaf pages for managing roles, there were two updates to the user pages and user controller to handle the situation where a user is not assigned to a role.  Here are the relevant user code fragments with the changes highlighted in blue.
    ...
    @PreAuthorize("hasAnyRole('CTRL_USER_EDIT_GET','CTRL_USER_DELETE_GET')")
    public UserDTO getUserDTO(User user) {
        UserDTO userDTO = new UserDTO();
        userDTO.setId(user.getId());
        userDTO.setUsername(user.getUsername());
        userDTO.setPassword(user.getPassword());
        userDTO.setEnabled(user.getEnabled());
        
        Role role = new Role();
        if (user.getRole() == null || user.getRole().getId() == 0) {
            role = setNullRole();
        } else {
            role = user.getRole();
        }
        userDTO.setRoleId(role.getId());
        return userDTO;
    }

    @PreAuthorize("hasAnyRole('CTRL_USER_ADD_POST','CTRL_USER_EDIT_POST')")
    public User getUser(UserDTO userDTO) {
        User user = new User();
        user.setId(userDTO.getId());

        Role role = new Role();
        try {
            role = roleService.getRole(userDTO.getRoleId());
        } catch (RoleNotFoundException e) {
            role = setNullRole();
        }
        user.setRole(role);

        user.setUsername(userDTO.getUsername());
        user.setPassword(userDTO.getPassword());
        user.setEnabled(userDTO.getEnabled());
        return user;
    }
    
    @PreAuthorize("hasAnyRole('CTRL_USER_EDIT_GET','CTRL_USER_DELETE_GET','CTRL_USER_ADD_POST','CTRL_USER_EDIT_POST')")
    public Role setNullRole() {
        Role role = new Role();
        role.setId(0);
        role.setRolename("ROLE_NOT_SET");
        return role;
    }
    ...
    ...
    <tr data-th-each="user : ${users}">
        <td data-th-text="${user.id}">1</td>
        <td data-th-text="${user.username}">user1</td>
        <td data-th-text="${user.password}">password1</td>
        <td data-th-text="${user.enabled}">true</td>
        <td data-th-text="(${user.role == null} ? null : ${user.role.rolename})">ROLE_TEST1</td>
        <td>
    ...
    ...
         <div class="form-group">
            <label class="col-sm-5 control-label" data-th-text="#{user.list.role.label}">Role</label>
            <div class="col-sm-7">
                <input type="text" class="form-control" data-th-value="(${user.role == null} ? null : ${user.role.rolename})" disabled="disabled" ></input>
            </div>
        </div>
    </form>
    ...

2. Next we create the role list page.  The first highlighted line below is showing the loop that will display all of  the roles in tabular format.  The second highlighted line shows the form for adding new roles, and the DTO object used for adding.  This page should look pretty similar to the strategy list and user list pages.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Core CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="../../resources/css/bootstrap-3.1.1.min.css" 
        data-th-href="@{/resources/css/bootstrap-3.1.1.min.css}" />
        
    <link type="text/css" rel="stylesheet" href="../../resources/font-awesome/css/font-awesome.css" 
        data-th-href="@{/resources/font-awesome/css/font-awesome.css}" />

    <!-- SB Admin CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="../../resources/css/sb-admin.css" 
        data-th-href="@{/resources/css/sb-admin.css}" />
    
    <style>
        .no-border-on-me>thead>tr>th,
        .no-border-on-me>tbody>tr>th,
        .no-border-on-me>tfoot>tr>th,
        .no-border-on-me>thead>tr>td,
        .no-border-on-me>tbody>tr>td,
        .no-border-on-me>tfoot>tr>td
        {
            border-top-style: none;
            border-bottom-style: none;
        }
    </style>
    <style>
        .dropdown-menu {
          min-width: 0px;
        }    
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    <title data-th-text="#{role.list.page.title}">Title</title>
</head>

<body>

<div id="wrapper">                <!-- /#wrapper -->

    <div data-th-replace="fragments/sb-admin :: top-nav"></div>
    
    <div data-th-replace="fragments/sb-admin :: vert-nav"></div>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-xs-12">
            
                <h4 class="page-header" data-th-text="#{role.list.table.title}">Configured Strategies</h4>
                <div class="table responsive">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="col-xs-1" data-th-text="#{role.list.id.label}">Id</th>
                            <th class="col-xs-10" data-th-text="#{role.list.rolename.label}">Strategy Type</th>
                            <th class="col-xs-1" data-th-text="#{role.list.actions.label}">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-th-each="role : ${roles}">
                            <td data-th-text="${role.id}">1</td>
                            <td data-th-text="${role.rolename}">USER_TEST</td>
                            <td>
                                <div class="btn-group">
                                  <button type="button" class="btn btn-warning btn-xs dropdown-toggle" data-toggle="dropdown">
                                    Actions<span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu">
                                    <li>
                                        <a href="#" data-th-href="@{/role/edit(id=${role.id})}">
                                            <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;
                                            <span data-th-text="#{button.label.edit}">edit</span>
                                       </a>
                                    </li>
                                    <li>
                                        <a href="#" data-th-href="@{/role/delete(id=${role.id},phase=stage)}">
                                           <span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;
                                           <span data-th-text="#{button.label.delete}">delete</span>
                                       </a>
                                    </li>
                                  </ul>
                                </div>                            
                            </td>
                        </tr>
                        <tr data-th-remove="all">
                            <td>2</td>
                            <td>ROLE_TEST2</td>
                            <td>
                                <div class="btn-group">
                                  <button type="button" class="btn btn-warning btn-xs dropdown-toggle" data-toggle="dropdown">
                                    Actions<span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">
                                            <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;
                                            <span data-th-text="#{button.label.edit}">edit</span>
                                       </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                           <span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;
                                           <span data-th-text="#{button.label.delete}">delete</span>
                                       </a>
                                    </li>
                                  </ul>
                                </div>                            
                            </td>
                        </tr>
                    </tbody>
                </table>
                </div>
                
                <form class="form" action="#" data-th-action="@{/role/add}" data-th-object="${role}" method="post">
                <div class="table responsive">
                    <table class="no-border-on-me table ">
                        <thead>
                            <tr>
                                <th class="col-xs-1"></th>
                                <th class="col-xs-10" data-th-text="#{role.list.rolename.label}">Strategy Name</th>
                                <th class="col-xs-1" data-th-text="#{role.list.actions.label}">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" hidden="hidden" data-th-field="*{id}"></input></td>
                                <td><input class="form-control" type="text" data-th-field="*{rolename}" placeholder="Name"></input></td>
                                <td>
                                    <button type="submit" class="btn btn-primary" data-th-text="#{button.label.add}">Add Role</button>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-1"></td>
                                <td class="col-xs-10 text-danger" data-th-if="${#fields.hasErrors('rolename')}" data-th-errors="*{rolename}">name error</td>
                                <td class="col-xs-1"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                </form>
                
                 <div class="alert alert-danger alert-dismissable" th:if="${error != null}">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <h4 data-th-text="${error}">Error!</h4>
                </div>
                <div class="alert alert-success alert-dismissable" th:if="${message != null}">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <h4 data-th-text="${message}">Success!</h4>
                </div>              
                
                
            </div>  <!-- /.col-lg-12 -->                
        </div>      <!-- /.row -->              
    </div>          <!-- page wrapper -->
</div>              <!-- /#wrapper -->

        
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="text/javascript" src="../../resources/js/jquery-1.11.0.min.js" 
        data-th-src="@{/resources/js/jquery-1.11.0.min.js}"></script>
        
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="../../resources/js/bootstrap-3.1.1.min.js" 
        data-th-src="@{/resources/js/bootstrap-3.1.1.min.js}"></script>

    <!-- Core Scripts - Include with every page -->
    <script type="text/javascript" src="../../resources/js/plugins/metisMenu/jquery.metisMenu.js" 
        data-th-src="@{/resources/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
        
    <!-- SB Admin Scripts - Include with every page -->
    <script type="text/javascript" src="../../resources/js/sb-admin.js" 
        data-th-src="@{/resources/js/sb-admin.js}"></script>

</body>
</html>

3. The role edit page is shown below.  This page is very similar to the strategy edit page discussed in the past.  The start of the form is highlighted in blue.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Core CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="../../resources/css/bootstrap-3.1.1.min.css" 
        data-th-href="@{/resources/css/bootstrap-3.1.1.min.css}" />
        
    <link type="text/css" rel="stylesheet" href="../../resources/font-awesome/css/font-awesome.css" 
        data-th-href="@{/resources/font-awesome/css/font-awesome.css}" />

    <!-- SB Admin CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="../../resources/css/sb-admin.css" 
        data-th-href="@{/resources/css/sb-admin.css}" />
    
    <style>
        .no-border-on-me>thead>tr>th,
        .no-border-on-me>tbody>tr>th,
        .no-border-on-me>tfoot>tr>th,
        .no-border-on-me>thead>tr>td,
        .no-border-on-me>tbody>tr>td,
        .no-border-on-me>tfoot>tr>td
        {
            border-top-style: none;
            border-bottom-style: none;
        }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    <title data-th-text="#{role.edit.page.title}">Title</title>
</head>

<body>

<div id="wrapper">                <!-- /#wrapper -->

    <div data-th-replace="fragments/sb-admin :: top-nav"></div>
    
    <div data-th-replace="fragments/sb-admin :: vert-nav"></div>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">

                <h4 class="page-header" data-th-text="#{role.edit.head.title}">Edit Strategy</h4>
                <div class="col-sm-2"></div>
                <div class="col-sm-6">
                    <form class="form-horizontal" action="#" data-th-action="@{/role/edit}" data-th-object="${role}" method="post">
                        <div class="form-group">
                            <label class="col-sm-5 control-label" data-th-text="#{role.list.rolename.label}">Strategy Type</label>
                            <div class="col-sm-7">
                                <input type="text" hidden="hidden" data-th-value="*{id}" data-th-field="*{id}" ></input>
                                <input type="text" class="form-control" data-th-value="*{rolename}" data-th-field="*{rolename}" ></input>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-5 col-sm-7" >
                                <button type="submit" class="btn btn-primary"        name="action" data-th-value="#{button.action.save}"   data-th-text="#{button.label.save}"  >Save</button>
                                <button type="submit" class="btn btn-default active" name="action" data-th-value="#{button.action.cancel}" data-th-text="#{button.label.cancel}">Cancel</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-5 col-sm-7" >
                                <p class="text-danger" data-th-if="${#fields.hasErrors('rolename')}" data-th-errors="*{rolename}">name error</p> 
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-sm-4"></div>
                    
            </div>  <!-- /.col-lg-12 -->                
        </div>      <!-- /.row -->              
    </div>          <!-- page wrapper -->
</div>              <!-- /#wrapper -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="text/javascript" src="../../resources/js/jquery-1.11.0.min.js" 
        data-th-src="@{/resources/js/jquery-1.11.0.min.js}"></script>
        
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="../../resources/js/bootstrap-3.1.1.min.js" 
        data-th-src="@{/resources/js/bootstrap-3.1.1.min.js}"></script>

    <!-- Core Scripts - Include with every page -->
    <script type="text/javascript" src="../../resources/js/plugins/metisMenu/jquery.metisMenu.js" 
        data-th-src="@{/resources/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
        
    <!-- SB Admin Scripts - Include with every page -->
    <script type="text/javascript" src="../../resources/js/sb-admin.js" 
        data-th-src="@{/resources/js/sb-admin.js}"></script>

</body>
</html>

            

4.  Finally the delete page is shown.  By now you should be feeling pretty comfortable with creating Thymeleaf CRUD pages.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Core CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="../../resources/css/bootstrap-3.1.1.min.css" 
        data-th-href="@{/resources/css/bootstrap-3.1.1.min.css}" />
        
    <link type="text/css" rel="stylesheet" href="../../resources/font-awesome/css/font-awesome.css" 
        data-th-href="@{/resources/font-awesome/css/font-awesome.css}" />

    <!-- SB Admin CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="../../resources/css/sb-admin.css" 
        data-th-href="@{/resources/css/sb-admin.css}" />
    
    <style>
        .no-border-on-me>thead>tr>th,
        .no-border-on-me>tbody>tr>th,
        .no-border-on-me>tfoot>tr>th,
        .no-border-on-me>thead>tr>td,
        .no-border-on-me>tbody>tr>td,
        .no-border-on-me>tfoot>tr>td
        {
            border-top-style: none;
            border-bottom-style: none;
        }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    <title data-th-text="#{role.delete.page.title}">Title</title>
</head>

<body>

<div id="wrapper">                <!-- /#wrapper -->

    <div data-th-replace="fragments/sb-admin :: top-nav"></div>
    
    <div data-th-replace="fragments/sb-admin :: vert-nav"></div>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">

                <h4 class="page-header" data-th-text="#{role.delete.head.title}">Delete Role</h4> 
                <div class="col-sm-2"></div>
                <div class="col-sm-6">
                    <form class="form-horizontal" action="#" method="get">
                        <div class="form-group">
                            <label class="col-sm-5 control-label" data-th-text="#{role.list.id.label}">Role Id</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" data-th-field="${role.id}" disabled="disabled"></input>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label" data-th-text="#{role.list.rolename.label}">Role Name</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" data-th-field="${role.rolename}" disabled="disabled"></input>
                            </div>
                        </div>
                    </form>
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-5 control-label"></label>
                            <div class="col-sm-7" >
                                <a href="#" data-th-href="@{/role/delete(id=${role.id},phase=#{button.action.delete} )}">
                                <button type="button" class="btn btn-primary" data-th-text="#{button.label.delete}">Delete</button></a>
                                
                                <a href="#" data-th-href="@{/role/delete(id=${role.id},phase=#{button.action.cancel} )}">
                                <button type="button" class="btn btn-default active" data-th-text="#{button.label.cancel}">Cancel</button></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4"></div>

            </div>  <!-- /.col-lg-12 -->                
        </div>      <!-- /.row -->              
    </div>          <!-- page wrapper -->
</div>              <!-- /#wrapper -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="text/javascript" src="../../resources/js/jquery-1.11.0.min.js" 
        data-th-src="@{/resources/js/jquery-1.11.0.min.js}"></script>
        
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="../../resources/js/bootstrap-3.1.1.min.js" 
        data-th-src="@{/resources/js/bootstrap-3.1.1.min.js}"></script>

    <!-- Core Scripts - Include with every page -->
    <script type="text/javascript" src="../../resources/js/plugins/metisMenu/jquery.metisMenu.js" 
        data-th-src="@{/resources/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
        
    <!-- SB Admin Scripts - Include with every page -->
    <script type="text/javascript" src="../../resources/js/sb-admin.js" 
        data-th-src="@{/resources/js/sb-admin.js}"></script>

</body>
</html>

5. The application now has working role CRUD functionality. Here are a few screenshots of the running application.
Role list / add page

Role edit page

Role delete page


We now have working CRUD functionality for our Role Entity. In the next series, we will add CRUD functionality to our Permission Entity. The list/add and edit pages for the Permission Entity will be a bit different than similar pages in the past, so I will discuss the modifications to those pages.

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