Show TOC Start of Content Area

This graphic is explained in the accompanying text Developing the Calculator.jsp  Locate the document in its SAP Library 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

This graphic is explained in the accompanying textThis graphic is explained in the accompanying text

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 New  → JSP….

       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.

This graphic is explained in the accompanying text

Adding Source Code

       5.      To edit the JSP code, choose the Source tab. 

                            a.      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:

This graphic is explained in the accompanying text

<jsp:useBean id="calc" scope="session"  class="com.sap.examples.calculator.beans.CalcProxy"/>

 

                            b.      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.

This graphic is explained in the accompanying text

<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>

 

                            c.      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.

This graphic is explained in the accompanying text

 

<% try { %>

<P>

<B> <%="Result is " + calc.getResult(request.getParameter("firstnumber"), request.getParameter("secondnumber"), request.getParameter("expression"))%></B>

</P>

<% } catch (Exception ex) { %>

     <%=ex.getMessage() %>

<% } %>

 

 

                            d.      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

       6.      If necessary, correct the formatting of these code lines by choosing Format from the context menu.

       7.      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:

 

 

This graphic is explained in the accompanying text

 

Next step:

In the next step you will create a Web archive.

 

End of Content Area