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=" "/>
<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=" "/>
<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. |
