Java Web Programming with Eclipse contents
Last modified February 05, 2011 10:52 pm

back next

Item Management (continued)

Page Design

Video

Page Layout

We will use a single layout to design all web pages in the application. The layout is shown in the following figure.

Page layout of home page

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 application, 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.

The following 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; 
                    margin: 0; 
                    text-align: center;
                    font-size: small; 
                    background-color: #99CCCC"> 
       Publisher Application
</div></td> 
</tr> 
<tr> 
    <td rowspan="2" 
           width="240"
           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> 

There are 4 HTML comments in the above 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 the following.

top.inc

<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; 
                    margin: 0; 
                    text-align: center;
                    font-size: small; 
                    background-color: #99CCCC"> 
       Publisher Application
</div></td> 
</tr> 
<tr> 
    <td rowspan="2" 
           width="240"
           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"> 

middle.inc

         </div> 
    </td> 
  </tr> 
  <tr> 
    <td valign="top"> 

bottom.inc

    </td> 
  </tr> 
</table>            
 
</body> 
</html> 

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.

back next

Copyright 2007-2009 David Turner and Jinseok Chae. All rights reserved.