Page Layout
We will use a single layout to design all web pages in the application. The layout is shown in Figure 13.4.
The areas that are filled with green are considered dynamic page content.
The banner and static menu are generated from top.inc and the footer is generated from bottom.inc.
Page Example
As a next step in the process, we build a sample web page that ressembles what would be produced from a typical interaction with the system. For this purpose, we choose to create an example of the view item page. The
purpose of the view item page is to show the details of a particular news feed entry. From within this page, the user should be able to start an edit or a delete operation for the currently viewed news item.
The page contains a horizontal banner that should identify the applica-tion, which is the publisher application.
Under the horizontal banner, there is a dashed line that separates a left column from a right column. The left column contains a static menu of choices that will be present on every page in the application. We refer to this menu as the global menu. The right column contains a page specific menu and page specific content.
Figure 13.5 is the HTML of the example view item page.
<html>
<head>
<title>Publisher Application</title>
</head>
<body style="margin: 0; padding: 0">
<table width="728"
cellspacing="0"
cellpadding="0"
style="padding: 0; margin: 0; border-collapse: collapse">
<tr style="padding: 0; margin: 0">
<td width="728"
colspan="2"
style="padding: 0; margin: 0"><img src="logo.gif"
style="padding: 0; margin"></td>
</tr>
<tr style="padding: 0; margin: 0">
<td width="728"
colspan="2"
style="padding: 0; margin: 0"><div style="padding: 0;
141
valign="top">
<div style="height: 500px; padding: 20px; border-right: 3px dashed; margin-right: 20px">
<a href="list-news-items">List News Items</a><br/>
<a href="create-news-item">Create News Item</a><br/>
<a href="logout">Logout</a> <br/>
</div>
</td>
<td width="488">
<div style="margin-top: 12px; margin-bottom: 12 px">
<!-- start of page-specific menu -->
<a href="edit?item=3">edit</a>
<a href="delete?item=3">delete</a>
<!-- end of page-specific menu -->
</div>
</td>
</tr>
<tr>
<td valign="top">
<!-- start of page content -->
<h1 style="font-size: larger">View News Item</h1>
<p>Title: California State University San Bernardino</p>
<p>Link: <a href="http://csusb.edu/">http://csusb.edu/</a></p>
<!-- end of page content -->
</td>
</tr>
</table>
</body>
</html>
Figure 13.5: view item page
There are 4 HTML comments in Figure 13.5 listing that delimit the two areas that will change between web pages. All other areas in the above example can be identical between web pages. If we keep the static content in a single location, it will be much easier to make global changes to the design of our pages. One way to do this is to carve the example HTML into three separate pieces and store them in files to be included by the JSP files that need them. The structure of our JSP files will then be as follows.
<%@ include file="top.inc" %>
<!-- page menu -->
<%@ include file="middle.inc" %>
<!-- page content -->
<%@ include file="bottom.inc" %>
You should create these 3 files now, placing them in web/WEB-INF/jsp.
When you are done, the 3 files should look like figure 13.6, figure 13.7 and figure 13.8.
<html>
<head>
<title>Publisher Application</title>
</head>
<body style="margin: 0; padding: 0">
<table width="728"
cellspacing="0"
cellpadding="0"
style="padding: 0; margin: 0; border-collapse: collapse">
<tr style="padding: 0; margin: 0">
<td width="728"
colspan="2"
style="padding: 0; margin: 0"><img src="logo.gif"
style="padding: 0; margin"></td>
</tr>
<tr style="padding: 0; margin: 0">
<td width="728"
colspan="2"
style="padding: 0; margin: 0"><div style="padding: 0;
<div style="height: 500px; padding: 20px; border-right: 3px dashed; margin-right: 20px">
<a href="list-news-items">List News Items</a><br/>
<a href="create-news-item">Create News Item</a><br/>
<a href="logout">Logout</a> <br/>
</div>
</td>
143
<td width="488">
<div style="margin-top: 12px; margin-bottom: 12 px">
Figure 13.6: top.inc
The banner in the the publisher application web pages comes from an image file called logo.gif . You should store this directly within the web folder of the publisher project.
</div>
</td>
</tr>
<tr>
<td valign="top">
Figure 13.7: middle.inc
</td>
</tr>
</table>
</body>
</html>
Figure 13.8: bottom.inc
145
Figure 13.9: Initial Data Model For The Publisher Application