Online Store Application

The BuyDirect application uses the JSP pages listed earlier in Table 14-5, along with three other pages: header.jsp, footer.jsp, and menu.jsp. These three pages are pages called from other pages. All of the pages, except the include pages, reference the Styles.css file, using the following code:

<link rel="stylesheet" type="text/css"
  href="<%= request.getContextPath() + "/Styles.css" %>">

The request.getContextPath method will result in a context path similar to /buydirect/Styles.css. This way, the Styles.css file is called without the invocation of FacesServlet, because the URL to the Styles.css file does not contain the /faces/ pattern.

On the other hand, simply using the following code would produce the URL pattern /buydirect/faces/Styles.css:

<link rel="stylesheet" type="text/css"
  href="Styles.css" %>">

This would occur because the calling page itself has the  /buydirect/faces/ path. It would invoke the FacesServlet servlet, which you do not want to happen, because it would mean extra work in the server.

Each of the JSP pages is explained in the following sections.

The header.jsp and footer.jsp Pages

The header.jsp page is the header for all the other JSP pages. It is shown in Listing 14-17.

Listing 14-17  The header.jsp Page

<table border="0" width="100%" cellpadding="5" cellspacing="0" class="Header">
<tr>
  <td align="left">
    <div class="HeaderText1">Buy Direct</div>
    <br>
    <div class="HeaderText2">Lowest prices today!!!</div>
  </td>
</tr>
</table>

The footer.jsp page, shown in Listing 14-18, is the footer for all the other JSP pages.

Listing 14-18  The footer.jsp Page

<center>
<div class="Footer">&copy;2004 Buy Direct</div>
</center>

The menu.jsp Page

The menu.jsp page is an include page that provides the contents for the menu box on the left side of each page. Listing 14-19 shows the menu.jsp page.

Listing 14-19  The menu.jsp Page

<!-- the main table containing two other tables:
Search table and Browse table -->
<table border="0" cellpadding="0" cellspacing="0"
 width="<h:output_text valueRef="initParam.menuWidth"/>"> <tr>
<td>

<!-- the Search table -->
<table cellspacing="0" cellpadding="1" width="100%" 
 border="0" class="OuterTable>
<tr>
  <td>
    <table cellspacing="0" cellpadding="5"
     width="100%" border="0" class="InnerTable">
    <tr>
      <td class="MenuHeader">Search</td>
    </tr>
    <tr valign="middle">
      <td rowspan="2">
        <h:input_text size="13" valueRef="SearchBean.searchKey"/>
        <h:command_button commandName="search" label="&nbsp;Go&nbsp;"
action="search">
         <f:action_listener type="buydirect.AppActionListener"/>
        <h:command_button>
     </td>
   </tr>
   </table>
 </td>
</tr>
</table>

</td>
</tr>

<!-- space between the Search table and Browse table --> <tr>
<td height="7"></td>
</tr>

<tr>
<td>
<!-- the Browse table -->
<table cellspacing="0" cellpadding="1"
  width="100%" border="0"
  class="OuterTable>
<tr>
  <td>

   <table cellspacing="0" cellpadding="5" width="100%" 
     border="0" class="InnerTable">
  <tr>
   <td class="MenuHeader">Browse</td>
  </tr>
  <tr valign="top">
    <td>
      <h:output_text valueRef="MenuBean.menu"/>
   </td>
  </tr>
  </table>
 </td>
</tr>
</table>

</td>
</tr>
</table>

The menu.jsp page contains a main table with three rows. The width of this table is governed by the value obtained from the deployment descriptor:

width="<h:output_text valueRef="initParam.menuWidth"/>">

The first row of the main table contains a table for the Search box, the second row contains a blank row, and the third row contains a table with hyperlinks to browse products by category. The main table in the menu.jsp page has the following skeleton:

<table>
<tr>
  <td>
   <!-- the table containing the Search box -->
  </td>
</tr>
<tr>
  <td>
   <!-- blank row -->
  </td>
</tr>
<tr>
  <td>
   <!-- the table containing the hyperlinks to
     browse products by category -->
  </td>
</tr>
</table>

The first table in the main table, the Search table, uses a UIInput component to receive the search key and a UICommand component to invoke an ActionEvent. The event is captured by the buydirect.AppActionListener class.

  <h:input_text size="13" valueRef="SearchBean.searchKey"/>     <h:command_button commandName="search" label="&nbsp;Go&nbsp;"
action="search">
   <f:action_listener type="buydirect.AppActionListener"/> 
  </h:command_button>

The second table in the main table, the Browse table, uses a UIOutput component, which gets its value from the menu property of the MenuBean.

<h:output_text valueRef="MenuBean.menu"/>

The index.jsp Page

The index.jsp page is the main page in the application. It contains nothing other than the welcome message, printed in bold, as shown in Listing 14-20.

Listing 14-20  The index.jsp Page

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <html>
<head>
<title>Welcome to BuyDirect</title>
<link rel="stylesheet" type="text/css"
  href="<%= request.getContextPath() + "/Styles.css" %>"> </head>
<body>
<f:use_faces>
<h:form formName="myForm">
<table border="0" cellspacing="4" cellpadding="0"
  width="<h:output_text valueRef="initParam.pageWidth"/>">
<tr>
  <td colspan="2">
    <%-- The header --%>
    <%@ include file="header.jsp"%>
  </td>
</tr>
<tr>
  <td valign="top">
    <%-- The menu --%>
    <%@ include file="menu.jsp"%>
  </td>
  <td valign="top">

<!-------- the beginning of the Welcome page ------------->
    <br>
    <div class="NormalLarge">Welcome to Buy Direct</div>
    <br>
    <div class="NormalSmall">Try our lowest prices today!</div>
<!---------- the end of the Welcome page ----------------->
 
  </td>
</tr>
<tr>
  <td colspan="2">
    <%-- The footer --%>
    <%@ include file="footer.jsp"%>
  </td>
</tr>
</table>

</h:form>
</f:use_faces>

</body>
</html>

This article is excerpted from JavaServer Faces Programming by Budi Kurniawan (McGraw-Hill, 2003; ISBN 0072229837). Check it out at your favorite bookstore today. Buy this book now.