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).
<!---------- 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:
The browse.jsp page displays products in a category. It is shown in Listing 14-22.
Listing 14-22The 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:
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.
<!---------- 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.
Java 
JavaServer Pages
