JavaServer Pages, Second Edition
| [ directory ] |
|
2.6 Java News TodayJava News Today, our fictional news site, is ready to begin constructing its site. JNT has decided to start with the new home page and for the moment will not worry about the dynamic elements. The first version is shown in Listing 2.4. Listing 2.4 The JNT index page
<%@ page errorPage="error.jsp" %>
<html>
<head>
<link rel="StyleSheet"
href="style.jsp"
TYPE="text/css"
media="screen">
<title>Java News Today: Welcome!</title>
</head>
<body>
<table width="100%"
border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td width="15%" class="borders">
<%-- Big Empty Corner --%>
</td>
<td width="20" class="borders">
<%-- Little buffer for the curvy bit --%>
<img src="1x1.gif">
</td>
<td class="borders">
<%-- start header --%>
<center><h2>Java News Today: Welcome!</h2></center>
<%-- end header --%>
</td>
</tr>
<tr>
<td width="15%" class="borders"></td>
<td width="20" height="20">
<%-- The curvy bit --%>
<img src="corner20x20.gif">
</td>
<td><img src="1x1.gif"></td>
</tr>
<tr>
<td width="15%" class="borders" valign="top">
<%-- start navigation --%>
Navigation - none yet
<%-- end navigation --%>
</td>
<td width="20"><img src="1x1.gif"></td>
<td valign="top" align="left">
<%-- All content goes here! --%>
</td>
</tr>
</table>
</body>
</html>
JNT saves the contents of Listing 2.4 into a file called index.jsp, points its browsers at the corresponding URL, and as expected sees the page in Figure 2.2. Figure 2.2. The JNT home page.
Conceptually, this page consists of four major elements: the header, the navigation, the content, and the HTML that connects it all together. Note the use of JSP comments to delineate these sections. It is generally wise to mark off major functional areas of a page, but as the end user is probably not interested in these fences, they might as well be JSP comments instead of HTML comments. Different pages will have different content, but it is reasonable to expect that the header and navigation will be repeated all over the site, although doing so can be a major headache. The author of each new page will have to remember to put these pieces in and will have to worry about getting everything right. Worst of all, sooner or later will come the hateful day when a new section is introduced and everyone has to go back and reedit all their pages. The solution for this nightmare scenario is, of course, the jsp:include tag. The header and footer will be split into separate files. The header.jsp file will contain everything in Listing 2.4 from <%-- start header --%> to <%-- end header --%>. Likewise, navigation.jsp will hold everything from <%-- start navigation --%> to <%-- end navigation --%>. This technique of pulling out common chunks of HTML and putting them in separate files is called templating, although the use of the word here is slightly different from that in Chapter 1. Here, a template is merely an HTML page with some "holes" where text should be, along with a way to indicate where this text should be found. The advantage is that many pages can have the same spaces, and all these holes can be filled from the same place. This makes it possible to keep the header in exactly one file and let each page have a space that should be filled by this file. So far, this might seem like a rather goofy thing to do, as the header and navigation are currently so small. However, rest assured that they will grow in subsequent chapters, and the advantages of removing them from the main page will become increasingly obvious. One such advantage is that it now becomes easy to create alternative versions of the home page. Because all the HTML elements remain in the main file, a simplified version suitable for text-only browsers, such as Lynx, could be created with a page like that shown in Listing 2.5. Listing 2.5 A version of the home page without tables<%@ page errorPage="error.jsp" %> <html> <head> <title>Java News Today: Welcome!</title> </head> <body> <jsp:include page="header.jsp"/> <hr> <jsp:include page="navigation.jsp"/> <hr> <%-- The contents of each page go here --%> </body> </html> Note that there are a lot of HTML elements. It would be a real pain to have to rewrite them for every page on the site. Fortunately, the jsp:include tag can once again come to the rescue. The idea is that everything above the content can be placed in one file and everything below in another, and then each new page can be created as simply as writing the content and including two files. This final version of the JNT home page is shown in Listing 2.6. Listing 2.6 The final version of the index page<%@ page errorPage="error.jsp" %> <jsp:include page="top.jsp"/> Content goes here! <jsp:include page="bottom.jsp"/> Now that's what a JSP should look like! For the sake of completeness, top.jsp is shown in Listing 2.7 and bottom.jsp in Listing 2.8. Listing 2.7 The top part of the page
<%@ page errorPage="error.jsp" %>
<html>
<head>
<link rel="StyleSheet"
href="style.jsp"
TYPE="text/css"
media="screen">
<title>Java News Today: Welcome!</title>
</head>
<body>
<table width="100%"
border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td width="15%" class="borders">
<%-- Big Empty Corner --%>
</td>
<td width="20" class="borders">
<%-- Little buffer for the curvy bit --%>
<img src="1x1.gif">
</td>
<td class="borders">
<%-- start header --%>
<jsp:include page="header.jsp"/>
<%-- end header --%>
</td>
</tr>
<tr>
<td width="15%" class="borders"></td>
<td width="20" height="20">
<%-- The curvy bit --%>
<img src="corner20x20.gif">
</td>
<td><img src="1x1.gif"></td>
</tr>
<tr>
<td width="15%" class="borders" valign="top">
<%-- start navigation --%>
<jsp:include page="navigation.jsp"/>
<%-- end navigation --%>
</td>
<td width="20"><img src="1x1.gif"></td>
<td valign="top" align="left">
Listing 2.8 The bottom of the page
</td>
</tr>
</table>
</body>
</html>
Top.jsp includes header.jsp and navigation.jsp, but it is perfectly OK for an included JSP to include yet other ones. One problem with the way this page has been split up is that the title tag is currently hard-coded in top.jsp, and the page banner is likewise hard-coded in header.jsp. This is quite easy to fix but requires a tag that has not been introduced yet and so will have to wait until Chapter 4. It is also worth pointing out that this page uses a style sheet to set various visual attributes of the page. This in itself is not unusual; most Web sites do the same thing. However, note that the style sheet being used is not a regular .css file but another JSP! This will turn out to be very important when tackling customization, as it will allow the style sheet itself to be generated dynamically! For the moment, this file is static and pretty small but is shown in Listing 2.9 for those interested. Listing 2.9 The style sheet
TABLE.form { border-style: groove;
border-color: #004400; }
TD.label { border-style: solid;
border-width: 1px;
border-color: #00aa00;
background: #00AA00;
color: #000000;
padding-right: 5px }
TD.form { border-style: solid;
border-width: 1px;
border-color: #004400;}
TD.borders { background: #66ffff; }
DIV.bordered { border-style: groove;
border-color: #004400; }
All versions of the index page now use the page directive to link to a custom error page, and this error page is shown in Listing 2.10. Listing 2.10 The error page<%@ page isErrorPage="true" %> <html> <head> <title>Java News Today: Error</title> </head> <body> We're sorry, but an error occurred while building your page. We will try to fix this problem shortly; in the meantime please return to the <a href="index.jsp">JNT home page</a> </body> </html> Apart from the page directive at the top, this looks just like any other JSP. This is only a very bare-bones example; a more realistic error page would include the same header and navigation elements that the index page used, so as to make it look more like a regular page on the site. In addition, a sophisticated error page could do something like notify the site administrator that an error had occurred. Unfortunately, doing something like this requires many features that have not yet been discussed, and so it will have to wait until Chapter 14.  |
| [ directory ] |
|