The JavaServer (tm) page has five entry fields: present value, future value, interest rate, number of payments, and amortized payment. Enter any four and calculate the fifth.

Web Calculator Application

Part 3: JSP Calculator Form

In this module we will display a view of the calculator using an HTML form like the one shown on the right. We will obtain the value for each form field directly from the TVM bean. The servlet controller that we created in Part 2 validated the request parameters (Present Value, Future Value, etc.), set them into the bean, and calculated the result before the dispatcher forwarded the request to this module. Since all logic is contained in the servlet controller and the TVM bean model, the page designer can now concentrate on just the HTML page layout.

We will implement the calculator view as a JavaServer Page^TM (JSP). JSP technology provides a way to quickly build dynamic web pages from an HTML template, Java Standard Tag Library (JSTL) tags, and reusable Java components (typically beans).

Source - calculatorForm.jsp


<%-- -------------------------------------------------------------
We will use the formatNumber tag from the Java Standard Tag Library 
(JSTL)to retrieve each BigDecimal number from the bean and format 
it as a text string that can be used in the HTML form. There are 
currently four libraries of standard actions: core, XML processing, 
formatting, and SQL.  We only need formatting for this application.

  uri an absolute URI that identifies the tag library. 

  prefix a short XML namespace identifier used as a prefix to
       all tags from this library.  For example: <fmt:formatNumber />
------------------------------------------------------------- --%>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>
 
 
<html>
<head>
<title>Financial Calculator</title>
<link rel="stylesheet"  href="standard.css">
</head>
<body>
<div align="center">



<%-- -------------------------------------------------------
Display the HTML form.  Notice that the action attribute 
will cause the request to be posted to the servlet controller 
(calculator) when the submit button is clicked. The servlet 
will then edit each form field, set the values into the TVM 
bean, and ask the bean to calculate the result.  If all goes 
well, the servlet will then forward the bean back to this 
page for display.  If there are errors, the request is 
forwarded to an error page for display instead. This cycle 
will repeat until the viewer leaves the application.
------------------------------------------------------ --%>
<form method="post" action="calculator">


<table border="0" cellpadding="10" cellspacing="0">
 <tr>
 <td align="center" colspan="2"><h2>Financial Calculator</h2></td>
 </tr>

<%-- -------------------------------------------------------
Display Present Value.  
------------------------------------------------------ --%>
  <tr>
  <td align="right">Present Value:</td>
  <td><input 
	   name="presentValue" 
	   type="text" size="20" 
	   value='<fmt:formatNumber value="${tvm.presentValue}" 
	       minFractionDigits="2" maxFractionDigits="2" />' >
  </td>
  </tr>

<%-- -------------------------------------------------------
Display Future Value
------------------------------------------------------ --%>
  <tr>
  <td align="right">Future Value:</td>
  <td><input 
	   name="futureValue" 
	   type="text" size="20" 
	   value='<fmt:formatNumber value="${tvm.futureValue}" 
	      minFractionDigits="2" maxFractionDigits="2" />' >
  </td>
  </tr>

<%-- -------------------------------------------------------
Display Amortized Payment
------------------------------------------------------ --%>
  <tr>
  <td align="right">Payment:</td>
  <td><input 
	   name="payment" 
	   type="text" size="20" 
	   value='<fmt:formatNumber value="${tvm.payment}" 
		minFractionDigits="2" maxFractionDigits="2" />' >

  </td>
  </tr>


<%-- -------------------------------------------------------
Display the Interest Rate
------------------------------------------------------ --%>
  <tr>
  <td align="right">Interest Rate:</td>
  <td><input 
         name="interestRate" 
         type="text" size="5" 
         value='<fmt:formatNumber value="${tvm.interestRate}"  
            minFractionDigits="4" maxFractionDigits="4" />' >

  </td>
  </tr>


<%-- -------------------------------------------------------
Display the Number Of Periods
------------------------------------------------------ --%>
  <tr>
  <td align="right">Periods:</td>
  <td><input 
	   name="numberOfPeriods" 
	   type="text" size="5" 
	   value='<fmt:formatNumber value="${tvm.numberOfPeriods}" 
            maxFractionDigits="0" />' >
  </td>
  </tr>


<%-- -------------------------------------------------------
Display the form's Submit (calculate) button and a Select
drop-down component that allows the viewer to choose which 
of the five fields to compute.
------------------------------------------------------ --%>
  <tr>
   <td colspan="2"><hr></td>
  </tr>
  <tr>
  <td colspan="2" align="center">
    <input type="submit" value="Calculate">  
    <select name="op" size="1">
	<option SELECTED>Payment
	<option>Present Value
	<option>Future Value
	<option>Interest Rate
	<option>Periods
    </select>
    <br> 
  </td>
  </tr>

</table>
</form>
</div>
</body>
</html>