Home arrow Java arrow Page 11 - 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 shoppingCart.jsp Page
(Page 11 of 11 )

The shoppingCart.jsp page displays the contents of the ShoppingCartBean for a particular user. It is shown in Listing 14-24.

Listing 14-24  The shoppingCart.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>Shopping Cart</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">Shopping Cart</div>

<!-- the beginning of the Shopping Cart page --> <h:panel_list border="1">
  <f:facet name="header">
    <h:panel_group>
      <h:output_text value="Product Name"/>
      <h:output_text value="Quantity"/>
      <h:output_text value="Price"/>
    </h:panel_group>
  </f:facet>
<h:panel_data var="item" valueRef="ShoppingCartBean.shoppingItems">
   
<h:output_text valueRef="item.productName"/>  
    <h:output_number valueRef="item.quantity"/> 
    <h:output_number valueRef="item.price"/>
  </h:panel_data>
  <f:facet name="footer">
   
<h:panel_group>
      <h:output_text value="&nbsp;"/>
      <h:output_text value="Total"/>
      <h:output_number valueRef="ShoppingCartBean.total"/>
   
</h:panel_group>
  </f:facet>
</h:panel_list>
<br>
<h:command_button action="checkOut"
  commandName="checkOut" label="Check Out">
  <f:action_listener type="buydirect.AppActionListener"/> <h:command_button>
<!-- the end of the Shopping Cart page -->

  </td>
</tr>
<tr>
 
<td colspan="2">
   
<%-- The footer --%>
    <%@ include file="footer.jsp"%>
  </td>
</tr>
</table>

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

</body>
</html>


The main part of the shoppingCart.jsp page (printed in bold) is a UIPanel component with a header facet and a footer facet. The dynamic part uses a panel_data tag, which gets its data from the shoppingItems property of the ShoppingCartBean. It has three columns that display the product name, quantity, and price, respectively:

<h:panel_data var="item" valueRef="ShoppingCartBean.shoppingItems">
  <h:output_text valueRef="item.productName"/> 
  <h:output_number valueRef="item.quantity"/> 
  <h:output_number valueRef="item.price"/>
</h:panel_data>

The total purchase value is displayed at the footer. The value comes from the total property of the ShoppingCartBean:

<f:facet name="footer">
  <h:panel_group>
    <h:output_text value="&nbsp;"/>
    <h:output_text value="Total"/>
    <h:output_number valueRef="ShoppingCartBean.total"/>
</h:panel_group>
  </f:facet>

Below the UIPanel component is a UICommand component that the user can click to check out:

<h:command_button action="checkOut"
  commandName="checkOut" label="Check Out"> 
  <f:action_listener type="buydirect.AppActionListener"/>
<h:command_button>

The checkOut.jsp Page

The checkOut.jsp page displays five input fields for delivery details and payment details. The checkOut.jsp page is shown in Listing 14-25.

Listing 14-25  The checkOut.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">Check Out</div>
<!--------- the beginning of the Check Out page ---------->
<table>
<tr>
  <td>Contact Name:</td>
  <td>
    <h:input_text id="contactName" valueRef="OrderBean.contactName">
      <f:validate_required/>
    </h:input_text>
  </td>
  <td><h:output_errors for="contactName"/></td>
</tr>
<tr>
  <td>Delivery Address:</td>
  <td>
    <h:input_textarea id="deliveryAddress" 
      valueRef="OrderBean.deliveryAddress"> 
      <f:validate_required/>
   
</h:input_textarea>
  </td>
  <td><h:output_errors for="deliveryAddress/></td>
</tr>
<tr>
  <td>Name on Credit Card:</td>
  <td>
    <h:input_text id="ccName" valueRef="OrderBean.creditCardName">
      <f:validate_required/>
    </h:input_text>
  </td>
  <td><h:output_errors for="ccName"/></td>
</tr>
<tr>
  <td>Credit Card Number:</td>
  <td>
   
<h:input_text id="ccNumber" 
      valueRef="OrderBean.creditCardNumber">
      <f:validate_required/>
    </h:input_text>
  </td>
  <td><h:output_errors for="ccNumber"/></td>
</tr>
<tr>
  <td>Expiry Date:</td>
  <td>
   
<h:input_text id="ccExpiryDate"
      valueRef="OrderBean.creditCardExpiryDate">  
      <f:validate_required/>
    </h:input_text>
  </td>
  <td><h:output_errors for="ccExpiryDate"/></td>
</tr>
<tr>
  <td colspan="2">
    <h:command_button action="order" commandName="order" label="Pay">
      <f:action_listener type="buydirect.AppActionListener"/>
    <h:command_button>
  </td>
</table>
<!------------ the end of the Check Out page ------------->

  </td>
</tr>
<tr>
 
<td colspan="2">
    <%-- The footer --%>
    <%@ include file="footer.jsp"%>
  </td>
</tr>
</table>

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

</body>
</html>


Notice that for each UIInput component, a required_validator tag is used to make the component a mandatory field. At the end of the page is a UICommand button that the user can click to begin processing the order.

<h:command_button action="order" commandName="order" label="Pay">
  <f:action_listener type="buydirect.AppActionListener"/> </h:command_button>

The order.jsp Page

The order.jsp page displays a thank you note after the purchase order is processed. The order.jsp page is shown in Listing 14-26.

Listing 14-26  The order.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">Thank you.</div>

<!---------- the beginning of the Order page ------------->

Your order has been processed.

<!---------------- the end of the Order page ------------->

  </td>
</tr>
<tr>
  <td colspan="2">
    <%-- The footer --%>
    <%@ include file="footer.jsp"%>
  </td>
</tr>
</table>

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

</body>
</html>


-----------------------------------------------------------Running the Application

To run the application, direct your browser to the following URL:

http://localhost:8080/buydirect/faces/index.jsp

-----------------------------------------------------------

Summary

This chapter described how to build the BuyDirect online store application. The application uses various components in JSF, such as the UI components and validators, and has a number of managed beans.

The application is not a complete solution for an online store. However, it provides basic functionality that encompasses many features found in a commercial online store application. You could easily expand it to include capabilities for modifying the shopping cart and managing the store, for example.

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.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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