Home arrow Java arrow Page 9 - 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 - Creating the JSP Pages
(Page 9 of 11 )

The BuyDirect application uses the JSP pages listed earlier in Table 14-5, along with three other pages: header.jsp, footer.jsp, and menu.jsp. These three pages are pages called from other pages. All of the pages, except the include pages, reference the Styles.css file, using the following code:

<link rel="stylesheet" type="text/css"
  href="<%= request.getContextPath() + "/Styles.css" %>">

The request.getContextPath method will result in a context path similar to /buydirect/Styles.css. This way, the Styles.css file is called without the invocation of FacesServlet, because the URL to the Styles.css file does not contain the /faces/ pattern.

On the other hand, simply using the following code would produce the URL pattern /buydirect/faces/Styles.css:

<link rel="stylesheet" type="text/css"
  href="Styles.css" %>">

This would occur because the calling page itself has the  /buydirect/faces/ path. It would invoke the FacesServlet servlet, which you do not want to happen, because it would mean extra work in the server.

Each of the JSP pages is explained in the following sections.

The header.jsp and footer.jsp Pages

The header.jsp page is the header for all the other JSP pages. It is shown in Listing 14-17.

Listing 14-17  The header.jsp Page

<table border="0" width="100%" cellpadding="5" cellspacing="0" class="Header">
<tr>
  <td align="left">
    <div class="HeaderText1">Buy Direct</div>
   
<br>
    <div class="HeaderText2">Lowest prices today!!!</div>
  </td>
</tr>
</table>


The footer.jsp page, shown in Listing 14-18, is the footer for all the other JSP pages.

Listing 14-18  The footer.jsp Page

<center>
<div class="Footer">&copy;2004 Buy Direct</div>
</center>


The menu.jsp Page

The menu.jsp page is an include page that provides the contents for the menu box on the left side of each page. Listing 14-19 shows the menu.jsp page.

Listing 14-19  The menu.jsp Page

<!-- the main table containing two other tables:
Search table and Browse table -->
<table border="0" cellpadding="0" cellspacing="0"
 width="<h:output_text valueRef="initParam.menuWidth"/>"> <tr>
<td>

<!-- the Search table -->
<table cellspacing="0" cellpadding="1" width="100%" 
 border="0" class="OuterTable>
<tr>
  <td>
    <table cellspacing="0" cellpadding="5"
     width="100%" border="0" class="InnerTable">
    <tr>
     
<td class="MenuHeader">Search</td>
    </tr>
    <tr valign="middle">
      <td rowspan="2">
        <h:input_text size="13" valueRef="SearchBean.searchKey"/>
        <h:command_button commandName="search" label="&nbsp;Go&nbsp;"
action="search">
         <f:action_listener type="buydirect.AppActionListener"/>
        <h:command_button>
    
</td>
   </tr>
   </table>
 </td>
</tr>
</table>

</td>
</tr>

<!-- space between the Search table and Browse table --> <tr>
<td height="7"></td>
</tr>

<tr>
<td>
<!-- the Browse table -->
<table cellspacing="0" cellpadding="1"
  width="100%" border="0"
  class="OuterTable>
<tr>
  <td>

   <table cellspacing="0" cellpadding="5" width="100%" 
     border="0" class="InnerTable">
  <tr>
   <td class="MenuHeader">Browse</td>
  </tr>
  <tr valign="top">
   
<td>
      <h:output_text valueRef="MenuBean.menu"/>
   </td>
  </tr>
  </table>
 </td>
</tr>
</table>

</td>
</tr>
</table>


The menu.jsp page contains a main table with three rows. The width of this table is governed by the value obtained from the deployment descriptor:

width="<h:output_text valueRef="initParam.menuWidth"/>">

The first row of the main table contains a table for the Search box, the second row contains a blank row, and the third row contains a table with hyperlinks to browse products by category. The main table in the menu.jsp page has the following skeleton:

<table>
<tr>
  <td>
   <!-- the table containing the Search box -->
  </td>
</tr>
<tr>
  <td>
   <!-- blank row -->
  </td>
</tr>
<tr>
  <td>
   <!-- the table containing the hyperlinks to
     browse products by category -->
  <
/td>
</tr>
</table>

The first table in the main table, the Search table, uses a UIInput component to receive the search key and a UICommand component to invoke an ActionEvent. The event is captured by the buydirect.AppActionListener class.

  <h:input_text size="13" valueRef="SearchBean.searchKey"/>     <h:command_button commandName="search" label="&nbsp;Go&nbsp;"
action="search">
   <f:action_listener type="buydirect.AppActionListener"/> 
  </h:command_button>

The second table in the main table, the Browse table, uses a UIOutput component, which gets its value from the menu property of the MenuBean.

<h:output_text valueRef="MenuBean.menu"/>

The index.jsp Page

The index.jsp page is the main page in the application. It contains nothing other than the welcome message, printed in bold, as shown in Listing 14-20.

Listing 14-20  The index.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>Welcome to BuyDirect</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">

<!-------- the beginning of the Welcome page ------------->
    <br>
    <div class="NormalLarge">Welcome to Buy Direct</div>
    <br>
    <div class="NormalSmall">Try our lowest prices today!</div>
<!---------- the end of the Welcome page ----------------->
 
  </td
>
</tr>
<tr>
 
<td colspan="2">
    <%-- The footer --%>
   
<%@ include file="footer.jsp"%>
  </td>
</tr>
</table>

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

</body>
</html>


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