Online Store Application - The search.jsp Page
(Page 10 of 11 )
The search.jsp page is used to display the search result. The main part of the search.jsp page is printed in bold, as shown in Listing 14-21.
Listing 14-21 The search.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>Search Result</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">
<br>
<div class="NormalLarge">Search Result</div>
<!---------- the beginning of the Search page ------------>
<h:panel_list border="1">
<f:facet name="header">
<h:panel_group>
<h:output_text value="Product"/>
<h:output_text value="Price"/>
<h:output_text value="Details"/>
</h:panel_group>
</f:facet>
<h:panel_data var="product" valueRef="SearchBean.searchResult">
<h:output_text valueRef="product.name"/>
<h:output_text valueRef="product.price"/>
<h:command_hyperlink href="details.jsp"
label="Details" commandName="Details">
<f:parameter name="productId" valueRef="product.id"/> </h:command_hyperlink>
</h:panel_data>
</h:panel_list>
<!----------- the end of the Search page ----------------->
</td>
</tr>
<tr>
<td colspan="2">
<%-- The footer --%>
<%@ include file="footer.jsp"%>
</td>
</tr>
</table>
</h:form>
</f:use_faces>
</body>
</html>
The panel_data tag gets a collection from the searchResult property of the SearchBean. The collection contains ProductBean instances whose name or description matches the search key. Two UIOutput components are used to print the product name and description. The third column is a hyperlink with a parameter called productId. The hyperlink gets its value from the id property of the PropertyBean. Here is the panel_data tag again:
<h:panel_data var="product" valueRef="SearchBean.searchResult">
<h:output_text valueRef="product.name"/>
<h:output_text valueRef="product.price"/>
<h:command_hyperlink href="details.jsp" label="Details" commandName="Details">
<f:parameter name="productId" valueRef="product.id"/>
</h:command_hyperlink>
</h:panel_data>
The browse.jsp Page
The browse.jsp page displays products in a category. It is shown in Listing 14-22.
Listing 14-22 The browse.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>Products by Category</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">
<br>
<div class="NormalLarge">Products by Category</div>
<!------------ the beginning of the Browse page ---------->
<h:panel_list border="1">
<f:facet name="header">
<h:panel_group>
<h:output_text value="Product"/>
<h:output_text value="Price"/>
<h:output_text value="Details"/>
</h:panel_group>
</f:facet>
<h:panel_data var="product" valueRef="BrowseBean.result">
<h:output_text valueRef="product.name"/>
<h:output_text valueRef="product.price"/>
<h:command_hyperlink href="details.jsp" label="Details"
commandName="Details">
<f:parameter name="productId" valueRef="product.id"/>
</h:command_hyperlink>
</h:panel_data>
</h:panel_list>
<!--------------- the end of the Browse page ------------->
</td>
</tr>
<tr>
<td colspan="2">
<%-- The footer --%>
<%@ include file="footer.jsp"%>
</td>
</tr>
</table>
</h:form>
</f:use_faces>
</body>
</html>
The browse.jsp page is similar to the search.jsp page, except that it displays all of the products belonging to a category, rather than the products that match a specific keyword. The following is the part of the browse.jsp page that produces the dynamic data:
<h:panel_data var="product" valueRef="BrowseBean.result">
<h:output_text valueRef="product.name"/>
<h:output_text valueRef="product.price"/>
<h:command_hyperlink href="details.jsp"
label="Details" commandName="Details">
<f:parameter name="productId" valueRef="product.id"/>
</h:command_hyperlink>
</h:panel_data>
The panel_data tag gets its contents from the result property of the BrowseBean. The result property is a collection containing ProductBean instances that belong to the specified category.
The details.jsp Page
The details.jsp page displays the details of a product. Listing 14-23 shows this page.
Listing 14-23 The details.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>Product Details</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">
<br>
<div class="NormalLarge">Product Details</div>
<!---------- the beginning of the Details page ----------->
<h:input_hidden id="productId" valueRef="ProductDetailsBean.id"/>
<%-- the valueRef in graphic_image is not good <h:graphic_image width="150" valueRef="ProductDetailsBean.imageUrl"/> --%>
<br/>
Name: <h:output_text valueRef="ProductDetailsBean.name"/> <br/>
Description:
<h:output_text valueRef="ProductDetailsBean.description"/>
<br/>
Price:
<h:output_number valueRef="ProductDetailsBean.price"/> <br/>
<h:command_button label="Buy" commandName="buy" action="buy">
<f:action_listener type="buydirect.AppActionListener"/> <h:command_button>
<!-------------- the end of the Details page ------------->
</td>
</tr>
<tr>
<td colspan="2">
<%-- The footer --%>
<%@ include file="footer.jsp"%>
</td>
</tr>
</table>
</h:form>
</f:use_faces>
</body>
</html>
The details.jsp page is called by passing the productId parameter in the URL. When the details.jsp page is called, the JSF implementation creates an instance of ProductDetailsBean. The constructor of the ProductDetailsBean class acquires the value of the productId parameter and populates the other properties, which then become the sources for other values.
 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. |
Next: The shoppingCart.jsp Page >>
More Java Articles
More By McGraw-Hill/Osborne
