Show TOC

 Developing the Calculator.jspLocate this document in the navigation structure

Use this procedure to create a JSP that invokes the CalcProxy JavaBean and acts as a front end to your application.

The JSP contains an input form where you can specify which type of operation you want the enterprise bean to perform, and the numbers that are calculated. The JSP sends the input to the enterprise bean, and then displays the result.

Prerequisites
  • You have created the Web module project CalculatorWeb.
Procedure

Creating the JSP

  1. In the J2EE Explorer, select CalculatorWeb and open the context menu.
  2. Choose Start of the navigation path New Next navigation step JSP… End of the navigation path.
  3. Give your JSP the name Calculator .
  4. Choose Finish.

    The wizard creates the JSP in the project folder CalculatorWeb/webContent and opens the JSP Editor automatically. This editor displays the default content in the Preview pane.

Adding Source Code

  1. To edit the JSP code, choose the Source tab. 
    1. After the page language declaration at the beginning of the page, write a <jsp:useBean> statement that enables the JSP to use the CalcProxy JavaBean:
      <jsp:useBean id="calc" scope="session"
  class="com.sap.examples.calculator.beans.CalcProxy"/>
    2. In the HTML part of the JSP, create a form for the input parameters. Insert the code for the form between the<body></body> tags, after the<h1></h1> tags. The form must include a drop-down menu where the user can choose an operation, input fields for the numbers to be calculated, and a button for submitting the input parameters. The method of the form is post .
      <FORM METHOD="post" ACTION="Calculator.jsp">
<P>Select Operation:</P>
<P><SELECT NAME="expression">
<OPTION VALUE=1>Multiply
<OPTION VALUE=2>Divide
<option VALUE=3>Add
<option VALUE=4>Subtract
</SELECT></P>
<P>First number:</P>
<P><INPUT NAME="firstnumber" size=10></P>
<P>Second number:</P>
<P><INPUT name="secondnumber" size=10></P>
<P><INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Calculate"></P>
</FORM>
<P>
<HR HEIGHT="1px" WIDTH="80%" COLOR="#000000">
</P>
    3. In the HTML part of the JSP, enter the code that enables the JSP to retrieve the result of the calculations using the JavaBean, or return a message in case of error. Append this code between the <body></body> tags.
       
<% try { %>
<P>
<B><%="Result is " + calc.getResult(request.getParameter("firstnumber"), request.getParameter("secondnumber"), request.getParameter("expression"))%></B>
</P>
<% } catch (Exception ex) { %>
     <%=ex.getMessage() %>
<% } %>
 
    4. You can edit HTML contents to design the view of the JSP:
      • Enter Calculator between the <title></title> tags
      • Enter Calculator Example between the <h1></h1> tags
      • Center the text using the <center></center> tags in the body part of the page
  2. If necessary, correct the formatting of these code lines by choosing Format from the context menu.
  3. Save the contents of the editor.
Result

The front end of the Calculator application is ready. If you now choose the Preview tab in the JSP Editor, the following preview layout is displayed:

Calculator

Next step:

In the next step you will create a Web archive .