If you want to build an online store application using Java, look no further. This article begins with an overview of the application, and then discusses the applicatin development process. It is taken from chapter 14 of JavaServer Faces Programming by Budi Kurniawan (McGraw-Hill, 2003; ISBN 0072229837).
Online Store Application - Creating the JSP Pages (Page 9 of 11 )
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:
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:
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.
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.
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.
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-20The 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>
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.