Adding Interactivity to the Calendar Application

Developing the Input Page

The input page is an HTML page containing different input fields in which the user can provide data to be processed. As per the requirements, the input page should be used to specify the month and the year.

Defining the HTML Form

To create an input page containing fields, you need to add an HTML form to your HTML/JSP document. A form can be added anywhere within the body of the document like any other HTML element.

All input fields in an HTML page that need to send data to the server for processing need to be contained within a form.

A form has the following syntax:

<form action="FormHandlerURL" method="get|post" name="name">..</form>

It specifies the application on the Web server that will process the form contents using the 'action' parameter and also a request passing mechanism using the 'method' parameter. If your Web page has more than one form you will need to provide its name as well.

For our application, the enhanced month.jsp will process the requests to generate the specified month's calendar. You can specify month.jsp as the action parameter's value. You can specify either absolute or relative URLs for the action field, thus by simply specifying month.jsp you are assuming that you will be placing the HTML page/JSP in the same directory as month.jsp.

Choosing the Right Input Fields to Capture User Data

After you define the form, you will need to determine the input fields that go into the form to capture your user's data. The input fields are determined by the information you need to capture from your users. For example, to obtain your user's name, you need to provide an input text field where the user can enter the name. HTML provides a choice of input fields to choose from. Figure 3.2 displays the different input fields using the HTML interface.

Figure 3.2 An HTML page containing different types of input fields

There are eight different types of input fields. The source of the input field used to obtain the result shown in Figure 3.2 is shown in the following list.

• Text fields—These input fields accept single-line text. This includes data such as name, age, city, email address, state, credit card number, and any similar information that can fit in one line.

Sample:

<input type="text" name="textinput" value="Single line of text" size="20">

• Password fields—Accept single-line text but mask user inputs by echoing asterisks instead of the characters typed in by the user—a must for accepting sensitive data such as passwords so that anybody who's watching over your shoulder can't determine what you just typed. Serves the purpose of shielding what you just entered and not very useful if the user is a very slow typist who punches the keyboard with a single index finger!

Sample:

<input size="20" type="password" value="password">

• Text area—These form fields permit free-flowing text for text input. Data such as comments, descriptions, complete addresses, multiple FedEx tracking numbers or any other input that can potentially spill over to another line should be ideally captured in text areas.

Sample:

<textarea name="unboundtext" rows="4" cols="20">Text...on multiple lines. Unbound</textarea>

• Option buttons—These input fields allow the user to select only one value from a set of options. For example, to identify your user's age group you could provide a set of option buttons categorizing the age groups as 15-19, 20-25, and so on.

Sample:

<input type="radio" name="radio" value="radio 1">

• Check boxes—If you have ever been a part of a survey, you might have checked a lot of boxes as answers to some questions. This feature has been extended to the Web in the form of check boxes. Check boxes are useful if the input required is for a yes/no or a true/false question. Some examples are smoker, married, play cricket, and so on.

Syntax:

<input name="smoker" type="checkbox" checked value="true">

• Option menus or drop-down lists—These fields allow a user to choose from a drop-down list of items. You might consider using this field if there are more than two choices for the input and when the display area is limited.

  Listing 3.1 shows the source for a sample drop-down list containing four items with the first item selected.

Listing 3.1 Usage of the Options Menu Input Field

<select>
 <option value="1" selected="true">Choice 1</ option >
 <option value="2">Choice 2</ option >
 <option value="3">Choice 3</ option >
 <option value="4">Choice 4</ option >
</select>

• List boxes—These inputs are similar to Option menus, except that the visible area can be set to more than one row. They also allow the user to select more than one item.

  Listing 3.2 contains the source for a sample HTML list containing multiple selected items.

Listing 3.2 Usage of the List Input Field

<select size="4" multiple>
 <option value="1">Item 1</ option >
 <option value="2">Item 2</ option >
 <option value="3" selected="true">Item 3</ option >
 <option value="4" selected="true">Item 4</ option >
</select>

• Buttons—These allow the user to submit data in the HTML fields to the Web server to be processed by a specified JSP. Reset buttons, like the name suggests, reset the values in the fields within a form to their original values.

Sample:

<input type="submit" name="Submit" value="Submit Button">
<input type="reset" value="Reset Button">

If you have submitted information on the Web before, you might have noticed the different approaches that Web sites have to capture user's data. In some sites, while providing your personal information, you need to specify your complete address within a multiline text area and in another you need to specify a street address, city, and zip code in different text fields and also choose from a list of states and countries.

To capture the user data for the Calendar application you will need to define two input-fields: the month and year. As you would typically be using the Gregorian calendar that contains twelve months, you should allow the user to choose from a list of the month names rather than type the month's name or its numeric equivalent. For capturing the year information, a text field would serve the purpose.

You will also need to add a Submit button to send the data to the server for processing. You could also specify a Reset button, but because you have only two fields it would be overkill and would waste valuable display area, as well as potentially distracting the user with the extra button to click.

Defining the HTML Fields

Now that you have identified the fields in the input page, you can add the input fields within the HTML form:

• Year

<input type="text" name="year" size="20" maxlength="4">

• Month

  Listing 3.3 displays the source for the drop-down list containing the month names.

Listing 3.3 HTML Source for the Month Options Menu Using Hard-Coded Values

<select name="month">
 <option value="0">January</option>
 <option value="1">February</option>
 <option value="2">March</option>
 <option value="3">April</option>
 <option value="4">May</option>
 <option value="5">June</option>
 <option value="6">July</option>
 <option value="7">August</option>
 <option value="8">September</option>
 <option value="9">October</option>
 <option value="10">November</option>
 <option value="11" selected="true">December</option>
</select>

The values for the field might not be the same as the text that will be displayed in the drop-down list, as you can see in the source of the previous menu.

You can also dynamically generate the options for the menu using a scriptlet like you did for obtaining the month names in month.jsp as shown in Listing 3.4.

Listing 3.4 JSP Source for Dynamically Generating the Month Options

<%@ page import="java.text.DateFormatSymbols" %>
<%! String[ ] monthNames = (new DateFormatSymbols()).getMonths(); %>

<select name="month">
<% 
 int selectedMonth = 11;
 // Print all the options
 for (int i = 0; i < 12 ; i++) {
 out.print("<option value=\""+ i + "\"");
if (i == month) {
  out.print(" selected=\"true\"");
 }
 out.println(">" + monthNames[i] + "</option>");
 } // end for-loop
%>
</select>

Excursion

HTTP Parameter Passing Methods

In the static Web world, the client requests a particular document using a URL. For dynamic Web pages, requests are specified using two main formats as defined by HTTP: GET and POST. In both, the URL of target JSP/application specified in the form constitutes a part of the request. The user-specified values are passed depending on the request method defined for the form:

GET—In the GET request method, the browser rewrites the URL by including the parameters from the form as shown in the following list:

1. The browser identifies the form which was submitted.

2. Gathers all the name-value pairs from the input fields of the form.

3. Encodes the spaces and other special characters in the name and values.

4. Concatenates the pairs obtained above after separating them by ampersands (&) to create the query string.

5. Appends the query string to the targeted JSP's URL.

6. Sends the string obtained as above to the Web server.

   The Web server extracts the targeted JSP/application from the request and passes the query string as an environment variable to it.

POST—Almost the same as GET, except the browser does not append the query string to the targeted JSP's URL but instead directs it to the standard input of the Web server. The Web server reads the content by reading a specified number of bytes from the standard input and passes on the information to the JSP/CGI application.

Each parameter passing mechanism has its own advantages. The GET protocol allows you to capture state, defined by the user values appended in the URL, so it can be bookmarked for use later or be used as another hyperlink.

The disadvantage is that some Web servers have the restriction of handling request URLs that are not more than 255 characters in length. So if you want to pass large data across you should consider using POST. Also you wouldn't like storing and passing passwords in the request URLs.

In your Web application you would use a mix of the two methods depending on your requirements: capturing state (GET) and passing large amounts of data and shielding information (POST).

Putting the Input Page Together

The input page can be an HTML or a JSP (by a mere switch of the file extension). Although the page doesn't contain any JSP tags or directives, you can still set it as a JSP. For the form, you can specify the request method as GET because the data is small and doesn't contain any sensitive information. You can add the different HTML fields within the input page, input.jsp, as shown in Listing 3.5. Figure 3.3 displays the output of the page in a browser.

Figure 3.3 The Input page rendered in Netscape Navigator

Listing 3.5 input.jsp: Source of the Input Page

<html>
<head>
 <title>Calendar Input Page</title>
</head>
<body>
 <center><h1>Calendar Viewer</h1></center>
 <table border=0 WIDTH="500" >
 <tr>
  <td></td>
  <td width="80%"><font size=+2>Overview</font> <br>Provide the Month and Year andclick on the Submit button to view the Calendar for the Month.
  <p><br>
  <form method="get" action="month.jsp" name="monthform">
  <table border="0" >
  <tr>
   <td width="40%"><b>Month:</b></td>
   <td><select name="month">
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11" selected="true">December</option>
   </select></td>
  </tr>
  <tr>
   <td><b>Year:</b></td>
   <td><input type="text" name="year" size="20" maxlength="4">
  </td>
  </tr>
  </table>
  <br><p>
  <input TYPE="submit" NAME="Submit" ID="Submit" VALUE="Submit">
  <input TYPE="reset" NAME="Reset" ID="Reset" VALUE="Reset">
  </form></td>
 </tr>
</table>
</body>
</html>