Home arrow Java arrow Page 10 - Online Store Application
JAVA

Online Store Application


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).

Author Info:
By: McGraw-Hill/Osborne
Rating: 5 stars5 stars5 stars5 stars5 stars / 54
March 16, 2005
TABLE OF CONTENTS:
  1. · Online Store Application
  2. · Understanding the Page Control Flow
  3. · Structuring the Database Tables
  4. · The DatabaseUtil Class
  5. · The MenuBean Class
  6. · The ShoppingItemBean Class
  7. · Registering the Beans in the Application Configuration File
  8. · Adding the ActionListener
  9. · Creating the JSP Pages
  10. · The search.jsp Page
  11. · The shoppingCart.jsp Page

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
JAVA ARTICLES

- Java Too Insecure, Says Microsoft Researcher
- Google Beats Oracle in Java Ruling
- Deploying Multiple Java Applets as One
- Deploying Java Applets
- Understanding Deployment Frameworks
- Database Programming in Java Using JDBC
- Extension Interfaces and SAX
- Entities, Handlers and SAX
- Advanced SAX
- Conversions and Java Print Streams
- Formatters and Java Print Streams
- Java Print Streams
- Wildcards, Arrays, and Generics in Java
- Wildcards and Generic Methods in Java
- Finishing the Project: Java Web Development ...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials