Looking at the Default Document Structure
| I l @ ve RuBoard |
| As you move on to the actual look and feel of the Web site, you have to start building the structure of your pages. Before this, you've been putting together test pages or rough drafts, but now you're going to need to write real pages that will evolve into finished products. Later, you can go back and polish the pages you've already written. Looking back to the wireframes (see Figure 9.1), you can identify the various elements of the site. In the top left corner is a logo, and across the top is a welcome banner. Running down the left edge are the mini-cart and the department listing, followed by a couple of navigational links. Figure 9.1. The BFG entry page. Some of this content, such as the banner, is static. The mini-cart reflects the current state of the order. The department listing is dynamically created from the list of departments. You can use the wireframe HTML as a starting point for creating the real document. This is typically the way it works in a real project: You take the wireframes that have been created by the design folks and embed the real functionality in the site. This is because very few developers are competent designers, so they generally like to mess with all those layout features as little as possible. Listing 9.1 shows the source for the wireframe of the entry page. Listing 9.1 index.jsp Wireframe Code<html> <head> <title>Welcome to Books For Geeks</title> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="22%"> <img border="0" src="../../../My%20Pictures/bfglogo.JPG" width="175" height="168"></ When you look at this source, you can quickly see that the changing content from page to page is going to live inside the <td> tag for the surrounding table. (In this example, that tag includes the table inside with the book information.) You can approach this kind of document structure in basically two ways. The first is to make the surrounding content into included JSP files that the individual pages load. So, for example, this page would end up looking like Listing 9.2. Listing 9.2 One Approach to the Document Structure<head> <title>Welcome to Books For Geeks</title> </head> <%@ include file="bfgheader.jsp" %> <h2 align="center">This Month's Featured Book</h2> <table border="0" cellpadding="0" cellspacing="0" width="639"> <tr> <td> <img border="0" src="../0672320959.jpg" align="left" width="140" height="173"></td> <td valign="top"> <h3 align="center"> <span style="font-size: 10.0pt; font-family: Times New Roman">Java 2 Micro Edition (J2ME) Application Development</span></h3> <p align="center"> <span style="font-size: 10.0pt; font-family: Times New Roman">By Stefan Haustein; Michael Kroll</span></p> <p align="center"><font size="2" face="Times New Roman">Publication date: </font> <span style="font-size: 10.0pt; font-family: Times New Roman">Nov 28,2001, .99</span></td> </tr> </table> <p><span style="font-size: 10.0pt">The key to Java 2 Micro Edition (J2ME) Application Development is the clear, concise explanations of the J2ME technology in relation to the existing Java platform. This book assumes proficiency with Java and presents strategies for understanding and deploying J2ME applications. The book presents numerous real-world examples, including health care and financial sector examples from the authors' professional experience.</span></p> <p><font size="2">[<a href="index.htm">More Information]</a> <a href="index.htm">[Buy It!]</a></font></p> <p align="center"> <%@ include file="bfgfooter.jsp" %> You don't include the <head> in the header file because it differs from page to page. Notice that even though the site technically doesn't have a footer on the page, you need to include a footer document to close the tables from the header. The alternative method is to invert the process. Instead of having a header and footer document, you would author a number of documents with the "guts" of the site that are wrapped by a master page that decides which subpage to include. In practice, it leads to a master page that looks like Listing 9.3. Listing 9.3 Turning the Approach Inside Out <% String content = request.getParameter("content"); if (content == null) { content = "index"; } String title = ""; if (content.equals("index")) { title = "Welcome to Books For Geeks"; } %> <head> <title><%= title %></title> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="22%"> <img border="0" src="../../../My%20Pictures/bfglogo.JPG" width="175" height="168"></ The major difference in this second document approach is in the way the site URLs will look. While the first approach would lead to "normal" URLs such as http://www.bfg.com/index.jsp , this method includes the content type as an argument to the URL, as in http://www.bfg.com/bfgmaster.jsp?content=index . There's no convincing argument as to which is the better approach. The major benefit to the first approach is that you can add new pages to the site easily because you don't need to modify Java code inside a JSP to make it work. This is an important feature because it means that nontechnical people (such as the aforementioned designers) can create new content without having to come to the technical folks for help. In some ways, the second approach is a more modern technique, representing the direction that the technology seems to be going in the industry, represented by frameworks such as Struts. It can be cumbersome to work with and difficult to justify except on dogmatic grounds in simple Web site designs; however, it has benefits in more complex applications (see Chapter 16, "The Struts Application Framework," for more details). In this example, you'll stick with the first approach, using separate pages for each functionality.  |
td> <td width="78%"> <h1 align="center"><font color="#0000FF">Welcome to Books For Geeks!</font></h1> </td> </tr> <tr> <td width="22%"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="50%" height="35"><font size="1"> <font color="#008000">In your cart:<br> 5 Items totaling .43</font> <a href="http://www.boston.com/sports/redsox">[check out]</a></font></td> </tr> </table> <p>Departments</p> <blockquote> <h5><a href="index.htm">Java</a><br> <a href="index.htm">C++</a><br> <a href="index.htm">Databases</a><br> <a href="index.htm">Programming</a><br> <a href="index.htm">Windows</a><br> <a href="index.htm">Unix</a></h5> </blockquote> <p><a href="index.htm">View Basket</a><br> <a href="index.htm">Check Out</a><br> <a href="index.htm">My Account</a></p> <p> </p> <p> </p> <p> </td> <td width="78%" valign="top"> <h2 align="center">This Month's Featured Book</h2> <table border="0" cellpadding="0" cellspacing="0" width="639"> <tr> <td> <img border="0" src="../0672320959.jpg" align="left" width="140" height="173"></ | I l @ ve RuBoard |
EAN: 2147483647
Pages: 203