Online Store Application
(Page 1 of 11 )
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).
In the previous chapters, you have learned the basics of JSF and how to build each component of a JSF application. To illustrate the use of JSF in the real world, this chapter presents an online store application named BuyDirect, an Internet store that sells electronic goods.
This chapter begins with an overview of the application, and then discusses the application development process. We will cover page design, database design and access, model objects, the application configuration file entries for bean registration and navigation rules, the deployment descriptor, and the JSP pages.
Introducing the BuyDirect Application
The BuyDirect application allows users to do the following:
- Search for certain products based on product names or descriptions.
- Browse the list of products by category.
- View a product’s details.
- Add a product to the shopping cart.
- View the shopping cart.
- Check out and place an order.
The main objective of this application is to show how to use JSF in a real-world application. Admittedly, the application is not a complete solution yet. For example, you cannot edit the shopping cart, and it lacks an administration section for changing the product information and handling the orders. However, it provides basic functionality, and finalizing it should not be difficult.
The BuyDirect application has ten JSP pages, one ActionListener (AppActionListener), one context listener (AppContextListener), and eight JavaBeans. In addition, there are also the deployment descriptor and the JSF application configuration file, as well as a number of image files in the images directory. Figure 14-1 shows the directory structure of this application.
Designing the Application Pages For consistency, each page in the BuyDirect application uses the same design. There is a header at the top of the page and a menu on the left side. The page template is shown in Figure 14-2.
Here are the HTML tags that make up the page:
<html>
<head>
<title><!-- The title --></title>
</head>
<body>
<table>
<tr>
<td colspan="2">
<!-- The header -->
</td>
</tr>
<tr>
<td valign="top">
<!-- The menu -->
</td>
<td valign="top">
<!-- Content -->
</td>
</tr>
<tr>
<td colspan="2">
<!-- The footer -->
</td>
</tr>
</table>
</body>
</html>
Figure 14-1. The BuyDirect application directory structure
Figure 14-2. The BuyDirect application page design
Using a Style Sheet
Each page in the application links to a Cascading Style Sheet (CSS) file called Styles.css, residing in the application directory. Using a style sheet provides a more flexible way of formatting than embedding formatting directly on the page. The Styles.css file is shown in Listing 14-1.
Listing 14-1 The Styles.css File
body {
background:#ffffff;
font-family: verdana;
font-size: 8pt;
font-weight: bold;
color: #000000;
} A:link {
font-family: verdana;
font-size: 8pt;
color: #000000;
text-decoration:underline
} A:visited {
font-family: verdana;
font-size: 8pt;
color: #000000;
text-decoration:underline
}
A:hover {
font-family: verdana;
font-size: 8pt;
color: #CCCCCC;
text-decoration:none
}
.Header {
background: #CCCCCC;
color: #FFFFFF;
}
.HeaderText1 {
font-family: verdana;
font-size: 13pt;
font-weight: bold;
}
.HeaderText2 {
font-family: verdana;
font-size: 11pt;
font-weight: bold;
}
.MenuHeader {
font-family: verdana;
font-size: 12pt;
font-weight: bold;
background: #CCCCCC;
color: #FFFFFF;
}
.MenuItem:link {
font-family: verdana;
font-size: 8pt;
font-weight: bold;
color: #000000;
text-decoration:none
}
.MenuItem:visited {
font-family: verdana;
font-size: 8pt;
font-weight: bold;
color: #000000;
text-decoration:none
}
.MenuItem:hover {
font-family: verdana;
font-size: 8pt;
font-weight: bold;
color: #bbccdd;
text-decoration:none
}
.OuterTable {
background:#CCCCCC;
}
.InnerTable {
background:#EDEDED;
}
.PageHeader {
font-family: verdana;
font-size: 16pt;
font-weight: bold;
color: #CCCCCC;
}
.SecondPageHeader {
font-family: verdana;
font-size: 14pt;
font-weight: bold;
color: #CCCCCC;
}
.TableHeader {
font-family: verdana;
font-size: 12pt;
font-weight: bold;
color: #FFFFFF;
}
.TableItem {
font-family: verdana;
font-size: 9pt;
color: #000000;
}
.AlternatingTableItem {
font-family: verdana;
font-size: 9pt;
color: #000000;
}
.Footer {
font-family: verdana;
font-size: 8pt;
color: #000000;
}
.NormalLarge {
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #000000;
}
.NormalSmall {
font-family: verdana;
font-size: 10pt;
color: #000000;
}
.ErrorMessage {
font-family: verdana;
font-size: 10pt;
color: #FF0000;
}
 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. |
Next: Understanding the Page Control Flow >>
More Java Articles
More By McGraw-Hill/Osborne
/ 19 
