Tutorial: JSP Standard Tag Library (JSTL)

There are actually many JSP tags and programmers can even create tags. Tags are better than Java scripts because of their simpler syntax. In addition, using tags makes the code more standard. One very popular set of tags, JSTL tags, provide the function of many commonly coded Java scripts. For example, instead of coding the Java for statement in a scriptlet, the JSTL forEach tag can be used. As an example, we will change the HowdyJSP to use the forEach tag.

JSTL comes with RAD. As a matter of fact, in the Design view palette, there is a tray for JSP Tags that includes JSTL tags.

• 1.  In the JSP Tags tray, scroll down the options and click on the For Loop to select it.
• 2.  In the Design view, click on the line after the second scriptlet to insert the forEach tag.

The For Loop icon will be displayed.

• 3.  Switch to the Source view and notice that the following tags were inserted:

  <c:forEach items=""></c:forEach>

Just like HTML tags, many JSTL tags have an open and close tag. The JSTL syntax is a little more involved than the HTML tags but we can easily avoid the syntax by using RAD’s Properties view. First, we will add the text we want and then delete the scriptlets.

• 4.  In between the forEach start and end tags, add the following text, “Howdy from the forEach tags!”

The tags and text should look like the following:

<c:forEach items="">Howdy from the forEach tags!</c:forEach>

• 5.  In the source, delete the two scriptlets and the old text.
• 6.  Switch to the Design view.

Notice that the scriptlet icons and the old text are no longer displayed.

• 7.  Click on the forEach icon and switch to the Properties view.

RAD should look like Figure 9-3.

You can control many forEach properties. For instance, you can define a counter variable such as ctr (in the Name property) or specify an increment value (i.e., the step property). However, to run a fixed number of iterations only begin and end values are needed.

• 8.  In the Properties view, click on the Iterate fixed number of times radio button to select it.
• 9.  Specify 1 for the Begin value and 5 for the End value.
• 10.  Switch to the Source view.

Look at the simplicity of the tag syntax compared to the scriptlet—no semicolons, parentheses, braces, or variable definitions! Are you a tag fan yet?

• 11.  Save the HowdyJSP source code and run on the server.

The results should look like Figure 9-4.

Tutorial: Enhancing the Web Application

Currently, our server-side application does not provide all the functions of the client-based application. For instance, data entered by the user is never validated and there is no gross salary or tax calculation. This is because static Web pages can’t perform these types of functions. However, servlets and JSPs can.

We will add new fields to the Web page and then add/modify JSPs and servlets to provide the application functions. We will then show how we can substitute a JSP (with tags) for the servlet.

Specifically, we are going to add an exemption drop-down menu and a function list box to EnterEmpInfoForm. We will then create a servlet (called EmpServlet) to verify the data and determine which function to perform. Then we will create three JSPs to display the employee information. Lastly, we will create a JSP with tags (called EnterEmpInfoJSP) and show how a JSP can perform the function of the Web page (EnterEmpInfoForm) and servlet (EmpServlet).

• 1.  Display EnterEmpInfoForm in the Design view.
• 2.  Click File, Save As, and then specify the parent folder as TutorialsWeb/WebContent/c9.

This will create a new copy of the page in the c9 folder.

• 3.  Move the cursor to the last row of the table and press Ctrl+Shift+z to add a row beneath the last row.
• 4.  Add another row beneath the row you added in step 3.
• 5.  Copy the text “Hourly Pay Rate” into the first cell of each new row.

This ensures that the new cells have the correct text formatting.

• 6.  Change the text in the first cell of the first new row to Exemptions and in the second new row to Function.
• 7.  In the Palette’s Form Tag tray click on Drop-Down Box then click the cell to the right of the Exemptions text.
• 8.  At the Insert Drop-Down Menu window, specify exmpDDM as the name.
• 9.  Add a drop-down menu value by:

• Clicking the Add button
• Specifying “zero” for the value name
• Specifying “0” for the value

• 10.  Add values 1 through 10 with the appropriate names.
• 11.  Change value two’s Selected property to “true” and click the OK button.

This will ensure that 2 is automatically selected when the page is displayed. Notice in the Design view that zero is displayed. To see the default value, you must save the file and switch to Preview view.

• 12.  In the Palette’s Form Tag tray click on List Box then click the cell to the right of the Function text.
• 13.  At the Insert List Box window, specify functionLB as the name.
• 14.  Add the following three values “Display,” “Gross,” and “TaxAmt” (with names that are the same as the values) to functionLB, then click the OK button.
• 15.  Click the Preview tab.

The display should look like Figure 9-5. Notice that the default value two is displayed in the drop-down menu.

Tutorial: Creating a Servlet for

It’s now time to create the complementary servlet.

• 1.  Create a new servlet in TutorialsWeb/Java Resources/src called EmpServlet.
• 2.  In EmpServlet’s source code, change the request and response variable names to req and resp.
• 3.  In the doPost method, add the following statements:

  String function = req.getParameter("functionLB");
  System.out.println(function);
  String exmp = req.getParameter("exmpDDM");
  System.out.println(exmp);

The println statements will simply test that the servlet is retrieving the values from the new Web page components. After we have verified that the values are being retrieved, we will remove the println statements.

• 4.  Return to the EnterEmpInfoForm and, if needed, change back to the Design view.
• 5.  Display the form’s properties.
• 6.  Change the Action property to the servlet EmpServlet.
• 7.  Run EnterEmpInfoForm on the server, select Gross, and click the Submit button.

A blank page will be displayed in the browser pane but the function and number of exemptions will be displayed in the console as follows:

[3/9/12 12:40:42:994 EDT] 0000002c SystemOut O Gross
[3/9/12 12:40:42:994 EDT] 0000002c SystemOut O 2

(Of course, the date/time information displayed at the beginning of each line will be different for you.) This proves that the Web page is tied to the servlet, that the doPost is invoked, and that the information entered in the new page components can be accessed. Notice that even though the exemption value names (one, two, three, etc.) are displayed on the Web page, the values (1, 2, 3, etc.) are returned in the request. Please remember that the values (1, 2, 3, etc.) are still strings and will have to be parsed into primitives before being used in calculations.

We will now change doPost to invoke the correct JSP based on the selected function.

• 8.  Replace the last three statements in doPost with the following:

  if (function.equals("Display")) {
         resp.sendRedirect("DispEmpInfoJSP.jsp");
  } else {
         if (function.equals("Gross")) {
               resp.sendRedirect("DispEmpGrossJSP.jsp");
         } else {
               if (function.equals("TaxAmt")) {
                      resp.sendRedirect("DispEmpTaxAmtJSP.jsp");
               }
         }
  }

The response’s sendRedirect method tells the browser to submit a new request, in this case, for a particular JSP based on the function selected by the user. In other words, the name of the JSP file is inserted into the response and the server sends the response back to the browser. The browser then creates another request (for the JSP) and sends the new request to the server.

This is not an efficient way to access the JSPs but it is syntactically simple. In the next section we will use a more “system efficient” technique that is, unfortunately, more complicated for the programmer.

In addition, we have some work to do because these JSPs don’t exist.

Tutorial: Creating JSPs

At first, we will code the three JSPs to print static text. This will allow us to test/prove that the browser is requesting the JSPs (i.e., this will prove that the servlet’s redirects work). We will then use a RequestDispatcher object to forward the request and response directly to the JSPs rather than have the browser make a new request for the JSPs.

• 1.  Click on the TutorialsWeb project to select it, and then click File, New, and Web Page.
• 2.  At the New Web Page frame, specify DispEmpInfoJSP as the file name, JSP as the Template, and click the Finish button.
• 3.  In the Design view, specify “Got to DispEmpInfoJSP.” as the text to be displayed.
• 4.  Create two more JSPs called DispEmpGrossJSP and DispEmpTaxAmtJSP.
• 5.  Change the text of the two JSPs to “Got to DispEmpGrossJSP.” and “Got to DispEmpTaxAmtJSP.”
• 6.  Save all the changes to the servlet and JSPs and run the EnterEmpInfo Web page on the server.

When a new JSP is created, RAD updates the server’s directory and the JSP can be accessed immediately. This is not the case with servlets. When creating a servlet you have to restart the server to get the servlet information into the directory. Advantage JSP. More about this later.

• 7.  In the Function list box, select Display and click the submit button.

Verify that “Got to DispEmpInfo JSP” is displayed.

• 8.  Use the browser pane’s “back arrow” to redisplay EnterEmpInfo.
• 9.  Select the other functions and confirm that the other JSPs are accessed.

You might have noticed a little wait for the JSP text to be displayed. One of the reasons for this delay is that we are taking the “long way around” to the JSPs by using the redirect command. It is more efficient to have the servlet get a RequestDispatcher object and use its forward method to send the request and response directly to the JSP. This eliminates the “round trip” between the client and server.

• 10.  Display the EmpServlet source code.
• 11.  Add the following import statement:

  import javax.servlet.RequestDispatcher;

• 12.  Add the following statement to create a class RequestDispatcher variable:

  RequestDispatcher dispatcher;

We now need to create a RequestDispatcher object and associate it with the variable dispatcher. Like a number formatter, a RequestDispatcher object is retrieved, not created. The ServletContext class provides a getRequestDispatcher method to do this. ServletContext has many useful methods that allow the servlet to communicate with the servlet container (i.e., the server). In addition, the getRequestDispatcher method allows you to associate the RequestDispatcher with a particular JSP. Of course, you must first get a ServletContext object before executing its getRequestDispatcher method. Fortunately, servlets inherit a getServletContext method from the HTTPServlet superclass.

The syntax to create the RequestDispatcher object is as follows:

dispatcher = getServletContext().getRequestDispatcher("xxx.jsp");

There is quite a bit happening with this statement, so we’ll go through the statement step by step.

The getServletContext method is the first part of this statement executed. The getServletContext method, as its name implies, returns a ServletContext object that is not assigned to a variable. Instead, its getRequestDispatcher method is invoked and passed the JSP name. The getRequestDispatcher method returns a RequestDispatcher object and that object is assigned to the variable dispatcher.

• 13.  In each if statement, replace the redirect statement with a statement that creates a Request Dispatcher object for each JSP and assigns it to the dispatcher such as the following:

  dispatcher =
  getServletContext().getRequestDispatcher("DispEmpInfoJSP.jsp");

• 14.  After the nested ifs, add the following statement:

  dispatcher.forward(req, resp);

The RequestDispatcher object’s forward method will send the request and response directly to the JSP that was specified in the if statements. By invoking the JSPs from the servlet, we have taken the browser “out of the loop” thereby speeding up access to the JSPs.

The EmpServlet source code should look like the following:

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.RequestDispatcher;
public class EmpServlet extends HttpServlet {
       private static final long serialVersionUID = 1L;
RequestDispatcher dispatcher;
public EmpServlet(){
super ();
}
protected void doGet(HttpServletRequest req,
               HttpServletResponse resp)
throws ServletException, IOException {
}
       protected void doPost(HttpServletRequest req,
                    HttpServletResponse resp)
throws ServletException, IOException {
              String Function = req.getParameter("functionLB");
              if (Function.equals("Display")) {
dispatcher =
getServletContext().getRequestDispatcher("DispEmpInfoJSP.jsp");
              } else {
                    if (Function.equals("Gross")) {
                           dispatcher =
getServletContext().getRequestDispatcher("DispEmpGrossJSP.jsp");
                    } else {
                           if (Function.equals("TaxAmt")) {
                                     dispatcher =
getServletContext().getRequestDispatcher("DispEmpTaxAmtJSP.jsp");
                           }
                    }
              }
              dispatcher.forward(req, resp);
       }
}

• 15.  Save the EmpServlet source code.
• 16.  Run c9/EnterEmpInfoForm on the server and verify that all three JSPs are displayed as expected.

Tutorial: Adding Function to the Server-Based Application

We will expand the server-side application to provide the same functions as the client-based application. As a matter of fact, we will reuse the client code that performs these functions. In addition, we will define a new property for employee number in the Employee class.

• 1.  Create a new folder in TutorialsWeb/Java Resources/src called c9java.

Because Employee class contains most of the application’s functions, wouldn’t it be a lot easier to simply include Employee in the server-based application rather than code a servlet or JSP to perform the same function? I hope you said, “Yes, it would,” because that’s what we’re going to do.

• 2.  Copy Tutorials/c7/Employee.java into c9java.
• 3.  In c9java/Employee.java, add a new class level private String variable called empNum.
• 4.  Have RAD generate a getter and setter for empNum and save the source code.

This is all that was needed to add a new property to Employee. If this were a client-based application, making this change to the application would require that the new Employee class be installed on many PCs. With a server-based application, only the one class file on the server needs to be reinstalled. This is one of the advantages of a server-based application.

However, just copying the class into the project does not include Employee in the server-based application. The application needs to do two things:

• A.  Get the data from EnterEmpInfoForm into an Employee object
• B.  Have the JSPs access the Employee object

We will solve the first part with a new class called EmpExtractor. EmpExtractor will retrieve the employee data from the request and create an Employee object whose properties hold the request data.

• 5.  Click on c9java to select it.
• 6.  Click File, New, and then Class.
• 7.  At the New Java Class window, specify EmpExtractor as the class name, then click the Finish button.

An edit session will be started.

We want EmpExtractor to create an Employee object, retrieve the form information from the request, and set the Employee object’s properties. The Employee object will then be passed to the JSPs. Each JSP will use the appropriate Employee object’s method(s) to perform the requested function (Gross, TaxAmt, or Display) and display the results.

• 8.  Click Source, Generate Constructors from Superclass...., and then the OK button.

This will generate a null constructor.

• 9.  In EmpExtractor, add the following import statements:

  import javax.servlet.http.HttpServletRequest;
  import org.omg.CORBA.DynAnyPackage.InvalidValue;

The HttpServletRequest class has to be imported because the class is going to receive a request object (from the JSPs) and create a method variable to reference the request. The InvalidValue class needs to be imported because the setPayRate method in the Employee class can throw an InvalidValue exception.

• 10.  Add the following to define a class variable and Employee object:

  Employee emp = new Employee();

• 11.  After the null constructor, add the following to define a new method called getEmployeeInstance:

  public Employee getEmployeeInstance(HttpServletRequest request){
                return emp;
  }

Notice that the method expects a request object. We will now add the code to retrieve the information from the request object and set emp’s properties.

• 12.  Before the return statement in getEmployeeInstance, add the following statements:

  emp.setEmpName(request.getParameter("empNameTF"));
  emp.setEmpStreet(request.getParameter("streetAddrTF"));
  emp.setEmpCity(request.getParameter("cityTF"));
  emp.setEmpState(request.getParameter("stateTF"));
  emp.setEmpZip(request.getParameter("zipTF"));
  try {
  emp.setPayRate(Double.parseDouble(
  request.getParameter("hPRTF")));
  } catch (NumberFormatException Error) {
  System.out.println("Pay rate must be a numeric" +
  "value: 8 or 7.25");
  } catch (InvalidValue Error) {
         System.out.println(Error.getMessage());
  }
  emp.setExemptions(Integer.parseInt(
  request.getParameter("exmpDDM")));

Does this source code seem familiar? This is the same logic that’s in EnterEmpInfo’s setEmployeeProperties method. The difference is that setEmployeeProperties retrieved the information from a frame’s text fields, whereas getEmployeeInstance is retrieving the information from a request object. Even though EmpExtractor and EnterEmpInfo are very similar, we had to create them because the client and server-side applications use two different interfaces to gather the Employee information: AWT (for the client-side application) versus a Web page (for the server-side application).

Notice that regardless of the interface, however, the core logic of the two applications (i.e., the Employee class) is the same. Separating the client-based application’s core logic (creating the Employee class) from the interface (i.e., the frame classes) was a very wise decision. Because of this, we are able to reuse the Employee class with a different interface (e.g., the Web page in our server-based application). As a matter of fact, if we wanted to provide alternative interfaces for PDAs, cell phones, or holograms (just kidding), Employee could still be used. We will talk more about this “application architecture” later in the chapter.

Tutorial: Enhancing the JSPs

The JSPs must be modified to call EmpExtractor and then use the returned Employee object to perform the requested functions. We will modify DispEmpInfoJSP first.

• 1.  In the Design view, edit DispEmpInfoJSP so that it contains text and a table like Figure 9-6.

  

  Figure 9-6.

• 2.  Change to the Source view.
• 3.  Add the following statement to the end of DispEmpInfoJSP’s page directive (the page directive is toward the beginning of the source code):

  import="c9java.*"

Because DispEmpInfoJSP will be using Employee and EmpExtractor objects, we have to import c9java. (If Employee and EmpExtractor were in the default package of the JavaResources folder, no import statement would have been required.)

• 4.  After the page directive, add the following scriptlet:

  <jsp:scriptlet> Employee emp;
  EmpExtractor ee = new EmpExtractor();
  emp = ee.getEmployeeInstance(request);
  </jsp:scriptlet>

This scriptlet creates:

• A.  An Employee variable called emp
• B.  An EmpExtractor variable called ee
• C.  An EmpExtractor object

The scriptlet also assigns the EmpExtractor object to the variable ee.

Finally, the scriptlet invokes the getEmployeeInstance method and sends the request object referenced by the variable request. Hey, where did the variable request come from? In fact, where did the request object come from? There was no import statement for the Request class nor was a request object passed from the server to the JSP! Are you starting to wonder what’s going on?

The variable request is another example of the server making your programming life easier. The JSP container provides what are called JSP implicit objects. Essentially, these are predefined variables and objects that all JSPs can access. (In addition to the request, there is also a response object and a variable named response that can be used by JSPs.) Not having to write the Java code to define and pass these variables is one more reason why JSPs are so much easier to use than servlets.

• 5.  Change back to the Design view.
• 6.  Put a space after the first line of text and click JSP, then Insert Expression.
• 7.  In the Properties view, add the statement as seen in Figure 9-7.

  

  Figure 9-7.

• 8.  As done in step 7, add the following expressions in the appropriate cells of the table’s second column:

  emp.getEmpName()
  emp.getEmpStreet()
  emp.getPayRate()
  emp.getExemptions()

The Design view should look like Figure 9-8.

Currently, the address cell only displays the street information. We need to modify the cell contents to include the city, state, and zip code.

• 9.  Insert a new line in the address cell (click to the right of the expression icon that retrieves the employee’s street address and press the Enter key).
• 10.  Change to the Source view and insert a new line after the line break tag (<br>).

We switched to the Source view because sometimes it is easier to enter the Java source code rather than use the GUI.

• 11.  At the new line enter the following and save the source code:

  <%=emp.getEmpCity()%>, <%=emp.getEmpState()%> <%=emp.getEmpZip()%>

It’s important to include the three spaces after the comma and the four spaces between the employee’s state and zip code so that the information is formatted correctly.

Time to test!

• 12.  Run c9.EnterEmpInfoForm on the server.
• 13.  In the browser pane, enter the information as in Figure 9-9.

  

  Figure 9-9.

• 14.  Click the Submit button.

The result should appear as in Figure 9-10. Notice anything wrong with Figure 9-10?

The most noticeable error is that the value null is displayed where employee number is supposed to appear. A look at the JSP code shows that there is an expression to retrieve the employee number, however, a look into at the EmpExtractor source code shows that empNum property is never set. Obviously, this needs to be fixed.

Although not errors, we should make some formatting improvements. For instance, the data values should be left justified so they are nearer the labels (yours may already be left justified) and made bold to differentiate them from the labels and emphasize them as results.

• 15.  In the Design view, modify the JSP so that the data is formatted as in Figure 9-11.

  

  Figure 9-11.

• 16.  Add the following statement to getEmployeeInstance in EmpExtractor and save the source code:

  emp.setEmpNum(request.getParameter("empNumTF"));

This statement retrieves the employee number from the request object and sets the Employee object’s employee number property.

Steps 15 and 16 should result in the page displaying the employee number instead of null as in Figure 9-11. The source code for DispEmpInfoJSP should be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@page
language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" import="c9java.*"%>
<jsp:scriptlet> Employee emp;
EmpExtractor ee = new EmpExtractor();
emp = ee.getEmployeeInstance(request);
</jsp:scriptlet>
<html>
<head>
<title>DispEmpInfoJSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR"
content="Rational® Application Developer for WebSphere® Software">
</head>
<body>
<p align="center"><font size="4" color="blue"> Employee
Information for Employee Number <%=emp.getEmpNum()%></font> </p>
<center><table border= "0" >
<tbody>
       <tr>
<td align= "right" ><font face= "@Arial Unicode MS" >Name: </font></td>>
               <td align="left"><b><%=emp.getEmpName()%></b></td>
       </tr>
       <tr>
               <td align= "right" ><font face= "@Arial Unicode MS" >Address:</font></td>
               <td align="left"><b><%=emp.getEmpStreet()%><br>
<%=emp.getEmpCity()%>, <%=emp.getEmpState()%> <%=emp.getEmpZip()%> </b></td>
       </tr>
       <tr>
               <td align= "right" ><font face= "@Arial Unicode MS" >Pay Rate:</font></td>
               <td align="left"><b><%=emp.getPayRate()%></b></td>
       </tr>
       <tr>
               <td align= "right" ><font face= "@Arial Unicode MS" > Exemptions:</font></td>
               <td align="left"><b><%=emp.getExemptions()%></b></td>
       </tr>
       <tr>
               <td align="right"></td>
               <td align="left"></td>
       </tr>
</tbody>
</table></center>
</body>
</html>

If you are a little confused about all the pieces in our server-based application, Figure 9-12 contains a diagram showing how the user and the various components interact.

We still need to modify the other JSPs to display the employee gross salary and tax amounts.

• 17.  Add the statements to DispEmpGrossJSP and DispEmpTaxAmtJSP that were added to DispEmpInfoJSP in steps 3 and 4.
• 18.  Replace the current text in DispEmpGrossJSP with “The gross salary for” and DispEmpTax-AmtJSP’s current text with “The tax amount for.”
• 19.  Center the text on the pages.
• 20.  In DispEmpGrossJSP and DispEmpTaxAmtJSP, add an expression so that the employee’s name appears after the text.
• 21.  In DispEmpGrossJSP and DispEmpTaxAmtJSP, add an expression so that the appropriate value appears in bold and centered beneath the text.
• 22.  Test by entering the information in Figure 9-9 and selecting the Gross and TaxAmt functions.

The results should look like Figures 9-13 and 9-14.

Of course, a professional Web site would never display such plainly formatted information as seen in Figures 9-13 and 9-14. In addition, a good Web page would include navigation buttons, graphics, hyperlinks, etc. However, these additional components have more to do with Web site design than with Java. Even though WebSphere provides many Web page design tools, Java programmers generally don’t use them. This is because most organizations hire lower-salaried Web page designers to create and format pages rather than have higher-priced Java programmers perform these tasks. This “economic factor” is another reason companies separate the application logic from the interface and also a reason that this application architecture is very popular.

Tutorial: More JSP Tags

Let’s continue our application:

• 1.  In c9.EnterEmpInfoForm source code, change the form action from EmpServlet to EnterEmpInfoJSP.jsp.
• 2.  In TutorialsWeb/WebContent/c9, create a new JSP called EnterEmpInfoJSP.
• 3.  In the palette’s JSP Tags tray, click on the Include item and then click on design pane.
• 4.  On the Insert JSP Include window, specify EnterEmpInfoForm.html in the File name text field.
• 5.  Click the Flush check box in the lower left and then the OK button.

The Page Designer will display the EnterEmpInfoForm page.

So, not only are tags simpler to use, they can be easily inserted using Page Designer. It just keeps getting better!

If you switch to the Source view, you will see the flush parameter in the include tag. Previously, flush was a required parameter, however, in this case, it can be removed and the tag will still work. (Essentially flushing ensures that the entire contents of the included file are displayed. There are some nuances regarding the flush parameter, however, we will leave a detailed explanation to a more exhaustive Java text and always specify true.)

• 6.  If necessary, switch to the Design View, and click on the If item in the JSP Tags tray.
• 7.  Click anywhere before the EnterEmpInfoForm. (I.e., Click above the thick black line not the dashed line.)

The if tag icon will be placed on the Design view.

• 8.  Display the Properties view and enter the following EL condition statement as the if condition (see Figure 9-21):

  ${pageContext.request.method=="POST"}

  

  Figure 9-21.

• 9.  Switch to the Source view.

The following if tag should have been inserted:

<c: if test='${pageContext.request.method=="POST"}'></c:if>

Notice that the EL condition checks the value of the request object’s method variable. This variable contains the request type (e.g., POST or GET) that invoked the JSP.

Time to test.

• 10.  Change the body of the if tag as follows so that the text “Got to post” is displayed:

  <c: if test='${pageContext.request.method=="POST"}'>
  Got to post
  </c:if>

• 11.  Save the source code and run EnterEmpInfoJSP on the server.

EnterEmpInfoJSP should be displayed with all the form fields.

• 12.  Click the submit button.

The text “Got to post” should be displayed before the form. This means that the form’s action was successfully changed and the if tag was coded correctly.

Now we need to add the choose and when tags to determine which function was selected and the forward tags to invoke the appropriate JSPs.

• 13.  In the Design view’s palette, click on the Choose item in the JSP Tags tray and click before the “Got to post” text.

This will insert the choose tag inside the if tag.

• 14.  Display the choose tag in the properties view and enter the following as the condition statement for the first when tag (see Figure 9-22):

  ${param.functionLB == "Display"}

  

  Figure 9-22.

• 15.  In the JSP Tags tray click on Forward and then in the Design view, click between the innermost braces in the Choose icon (the innermost braces represent the when tags).

The Insert JSP Forward window will be displayed.

• 16.  At the Insert JSP Forward window, click the Browse button, select File, then expand the WebContent folder, select DispEmpInfoJSP.jsp and click the OK button.

The Insert JSP Forward window will now have DispEmpInfoJSP.jsp as the Page name.

• 17.  Click the OK button.

The forward tag should be within the when tag and the source code should look like the following:

<c:if test='${pageContext.request.method=="POST"}'>
       <c:choose>
              <c:when test='${param.functionLB == "Display"}'>
                    <jsp:forward page="../DispEmpInfoJSP.jsp">
</jsp:forward>
              </c:when>
       </c:choose>
Got to post
</c:if>

As you can see, you must be a bit of a sharpshooter to use the Page Designer GUI to insert within tags. Sometimes it’s easier to copy the code from somewhere else and modify it.

• 18.  Using either the GUI or cut-and-paste, add two more when tags inside the choose tag that check for values of “Gross” and “TaxAmt” and forward to the appropriate JSP.
• 19.  Remove the text “Got to post.”

The tag icons in the Design view should look like Figure 9-23.

The source code should look like the following:

<c:if test='${pageContext.request.method=="POST"}'>
              <c:choose>
                    <c:when test='${param.functionLB == "Display"}'>
                           <jsp:forward page="../DispEmpInfoJSP.jsp">
                    </jsp:forward></c:when>
                    <c:when test='${param.functionLB == "Gross"}'>
                           <jsp:forward page="../DispEmpGrossJSP.jsp">
</jsp:forward></c:when>
                    <c:when test='${param.functionLB == "TaxAmt"}'>
                           <jsp:forward page="../DispEmpTaxAmtJSP.jsp">
</jsp:forward></c:when>
              </c:choose>
</c:if>

• 20.  To test the application, save the EnterEmpInfoJSP source code and run it on the server.
• 21.  Select Display as the function and click the Submit button.

Validate that DispEmpInfoJSP is run.

• 22.  In the browser window click the back button, select Gross, and then click Submit.

Validate that DispEmpGrossJSP is run.

• 23.  Validate that DispEmpTaxAmtJSP is run when the TaxAmt function is chosen.

Tutorial: Using JSP Bean Tags

To make full use of JSP bean tags in our application, we need to create two new properties in the Employee class for taxAmount and grossAmount. These are a little different from our previously defined properties in that they are calculated values. Earlier we mentioned that properties don’t have to have getters and setters. Bean properties can be read-only or write-only and the new properties (gross salary and tax amount) are perfect examples of read-only properties. In other words, no user of the bean should be able to set these values; they should always be calculated based on the pay rate and exemptions properties.

• 1.  In src/c9java.Employee, create two new class private variables by adding the following statements:

  private String taxAmount;
  private String grossAmount;

• 2.  Click Source and then Generate Getters and Setters....
• 3.  Select the options to generate only getters for the properties taxAmount and grossAmount and click the OK button.

RAD will generate two new methods that return the strings taxAmount and grossAmount.

• 4.  Replace the code in getGrossAmount with the following statements:

  grossSalaryCalcFormatted();
  return stringGrossSalary;

• 5.  Replace the code in getTaxAmount with the following statements:

  fedTaxCalcFormatted();
  return stringTaxAmt;

Now that wasn’t too hard, was it? These getters simply invoke the methods to calculate and format the appropriate value, then return the result.

We now need to restructure the application so that EnterEmpInfoJSP creates and populates the bean. Currently this function is performed by each of the display JSPs when they invoke EmpExtractor. However, this is very redundant. The application should create the bean once and then the various JSPs should access the bean. This is a perfect function for the Controller to handle and, since EnterEmpInfoJSP is acting as the Controller, we will include the JSP tags to define and populate the bean in EnterEmpInfoJSP. We will then add the tags in the display JSPs to retrieve the correct properties.

• 6.  In the Design view of EnterEmpInfoJSP, click on Bean in the JSP tags tray.

We want to create the bean after the user has entered the employee information and clicked the Submit button. So we need to place the useBean tag after the if tag but before the choose tag. Get out your sharpshooter scope.

• 7.  Click to the right of the first open brace.

The Insert JSP Bean window will be displayed.

• 8.  Specify the three bean parameters as seen in Figure 9-24.

  

  Figure 9-24.

From this information, RAD generates the following tag:

<jsp:useBean id="EmpBean" class="c9java.Employee" scope="request">
</jsp:useBean>

Now that the bean is created, the bean properties need to be set to the values entered by the user. RAD provides an easy GUI to generate the various setProperty tags.

• 9.  At the Insert JSP Bean window, click the Set Property tab, and then the Add button.

The cursor will be placed in the first row’s Property column.

• 10.  Click on the options button (at the right of the cell) to display all the available properties and then select empNum (see Figure 9-25).

Curiously, RAD will allow you to specify a static value for the property but not a parameter. Later, we will have to specify the param keyword for each setProperty tag.

• 11.  Add setProperty tags for all the remaining properties except grossAmt and taxAmt.
• 12.  Change to the Source view and confirm that the following tags were added to the source code after the if tag.

  <jsp:useBean id="EmpBean" class="c9java.Employee" scope="request">
         <jsp:setProperty name="EmpBean" property="empNum" />
         <jsp:setProperty name="EmpBean" property="empStreet" />
         <jsp:setProperty name="EmpBean" property="exemptions" />
         <jsp:setProperty name="EmpBean" property="empZip" />
         <jsp:setProperty name="EmpBean" property="empState" />
         <jsp:setProperty name="EmpBean" property="payRate" />
         <jsp:setProperty name="EmpBean" property="empName" />
         <jsp:setProperty name="EmpBean" property="empCity" />
  </jsp:useBean>

• 13.  In the Source view, click on the first setProperty tag (i.e., the tag for empNum).

Notice in the Properties view that the Value radio button is already selected. This is because specifying a static value is the default. RAD, however, does provide a Parameter field.

• 14.  Click the Parameter radio button to activate the Parameter field, enter empNumTF in the Parameter field and press Enter.

The Parameter radio button should be selected and the param keyword will be added to the first tag.

• 15.  Add the correct parameters for the remaining properties.

Be careful that you specify the correct EnterEmpInfoForm field name.

• 16.  Change to the Design view of DispEmpGrossJSP and click on Get Property (in the JSP Tags tray).
• 17.  Click on the getEmpName expression icon.

The Insert JSP Get Property window will be displayed.

• 18.  At the Insert JSP Get Property window, specify EmpBean as the Bean name, empName as the Property name, and then click OK.

A getProperty icon will be inserted after the expression icon.

• 19.  Display the source code for the expression and the new entered getProperty tag.

Even though the tag is lengthier, notice how much simpler the syntax is. There is no need for the page designer to understand objects and reference variables, and, most enjoyably, say good-bye to parentheses!

However, you, as the programmer, need to understand that the tags in EnterEmpInfoJSP:

• 1.  Created an Employee object and defined it as a bean
• 2.  Defined the bean to be accessible by other objects that can access the request
• 3.  Set the Employee bean’s properties to the entered values
• 20.  Delete the getEmpName expression by clicking on the icon (in the Design view) and pressing the Delete key.

Time to test.

• 21.  Run c9.EnterEmpInfoJSP on the server.
• 22.  Enter 999 for the employee number, select Display, and click the Submit button.

DispEmpInfoJSP should display 999 as the employee number and 2 for exemptions.

• 23.  Change to the Source view of DispEmpInfoJSP.
• 24.  Delete the import="c9java.*" statement from the page directive and the following scriptlet:

  <jsp:scriptlet> Employee emp;
  EmpExtractor ee = new EmpExtractor();
  emp = ee.getEmployeeInstance(request);
  </jsp:scriptlet>

• 25.  In the Design view of DispEmpInfoJSP, replace each of the expressions with the appropriate getProperty tag and save the source code.

This is a good time to test DispEmpInfoJSP.

• 26.  Run EnterEmpInfoJSP on the server, enter values for all the employee properties, select display, and click the Submit button.

Verify that all the data entered on EnterEmpInfoJSP is displayed by DispEmpInfoJSP.

To finish the application, we need to replace the scriptlets in DispEmpGrossJSP and DispEmpTaxAmtJSP with tags to access EmpBean.

• 27.  In DispEmpGrossJSP and DispEmpTaxAmtJSP, remove the following statements:

  import="c9java.*"
  <jsp:scriptlet> Employee emp;
  EmpExtractor ee = new EmpExtractor();
  emp = ee.getEmployeeInstance(request);
  </jsp:scriptlet>

• 28.  In DispEmpTaxAmtJSP, replace the expression:

  <%=emp.getEmpName()%>

  with:

  <jsp:getProperty name="EmpBean" property="empName"/>

• 29.  In DispEmpGrossJSP, replace the expression:

  <%=emp.grossSalaryCalcFormatted()%>

  with:

  <jsp:getProperty name="EmpBean" property="grossAmount"/>

• 30.  In DispEmpTaxAmtJSP, replace the expression:

  <%=emp.fedTaxCalcFormatted()%>

  with:

  <jsp:getProperty name="EmpBean" property="taxAmount"/>

Notice that neither of the JSPs defines EmpBean. They simply retrieve two EmpBean properties.

Time to test again.

• 31.  Save both JSPs and run EnterEmpInfoJSP on the server.
• 32.  Enter Joe Programmer as the employee name, 25 as the pay rate, select Gross, and click the Submit button.

The JSP will display the following:

The gross salary for Joe Programmer
$1,000.00

• 33.  In RAD’s Web browser pane, click the back arrow to return to the EnterEmpInfoJSP.

The previously entered information should still be there.

• 34.  Select three as the number of exemptions, TaxAmt as the function, and click the Submit button.

The JSP will display the following:

The tax amount for Joe Programmer
$139.50

Because DispEmpTaxAmtJSP used the bean created by EnterEmpInfoJSP, it proves that the bean is accessible by other JSPs.

Results of the Tutorial

Let’s go over the results:

1. In the TutorialsWeb/WebContent folder, three JSP files:

   DispEmpInfoJSP              DispEmpGrossJSP              DispEmpTaxAmtJSP

   and two HTML files:

   Howdy                     EnterEmpInfoForm

2. In TutorialsWeb/WebContent, a folder called c9 containing three files:

   EnterEmpInfoForm.html  EnterEmpInfoJSP.jsp        HowdyJSP.jsp

3. In TutorialsWeb/Java Resources/src, a folder called c9java containing two java files:

   Employee                    EmpExtractor

4. In the TutorialsWeb/ Java Resources/src/default package, two java files:

   EmpServlet                    MyServlet

Results of the Review Exercise

Here are the results:

1. In ReviewExWeb/Java Resources/src, a new folder called c9.
2. In c9, four new classes called:

   MonthBean             DayBean
   YearBean              TimeBean

3. Changes to the ShipInfoServlet to retrieve and format the date and time information from the drop-down menus instead of text fields.
4. In ReviewExWeb/WebContent/c9, a new JSP called EnterShipInfoJSP.

Check that the Exercise Was Done Correctly

Finally, let’s check it all worked:

1. Run EnterShipInfoJSP on the server and click the Submit button.
2. Verify that the current date and time are displayed in the browser pane.
3. Click the submit button and verify that the current date and time are displayed and formatted appropriately.