JavaServer Pages, Second Edition

5.3 The Left-Hand Navigation

The left side of the page has thus far contained only the daily quiz, which was developed in Listing 3.13, and a link to the customization page. This will now be enhanced by the addition of a login box from which the user can log in. This will also be a simple form, but in the interest of encapsulation, it will be placed in its own file and included with a jsp:include. Listing 5.2 shows the new login form.

Listing 5.2 The login form

<form action="login_result.jsp" method="post">
Username:<br>
<input type="text" name="username" size="8"><br>
Password:<br>
<input type="text" name="password" size="8"><br>
<input type="submit" name="Login" value="Login">
</form>

This file contains no beans, scripts, or special tags, which should come as no surprise. There have already been many examples of forms that provide values to beans, and in all these cases, the forms themselves need not know anything about the beans, as all the action happens on the receiving page, where the form values are loaded into a bean with the jsp:setProperty tag. The only requirement for this to work is that the bean's properties must be called username and password. Because these names were chosen in the data-modeling phase, both the author of this form and the author of the UserInfoBean will know to use those names.

The implementation of the UserInfoBean used in this chapter knows about one user whose username and password are both "test", so those are the values to enter into the login form when exploring the examples on the CD-ROM.

The other necessary element of the left-hand navigation is the list of sections available in the current edition. The designer for the site would like an asterisk next to the current section so that the user will always know where in the site he or she currently is. The section list will also be placed in a separate file for easy manipulation; this file is shown in Listing 5.3.

Listing 5.3 The list of sections

<%@ taglib prefix="c"
    uri="http://java.sun.com/jstl/core" %>

<jsp:useBean
  id="edition"
  beanName="jnt"
  type="com.awl.jspbook.ch05.EditionBean"/>

<jsp:useBean
  id="currentSection"
  class="com.awl.jspbook.ch05.SectionBean"/>

<jsp:setProperty
  name="currentSection"
  property="sectionId"/>

<c:forEach items="${edition.sections}" var="section">
  <c:if
   test="${currentSection.sectionId == section.sectionId}">
   *
  </c:if>

  <a href="<c:url value="section.jsp">
   <c:param name="sectionId" value="${section.sectionId}"/>
  </c:url>"><c:out value="${section.name}"/></a><br>
</c:forEach>

This example is somewhat more complicated, so let's go through it line by line. The first line loads a tag library, and the next two lines load beans. The EditionBean will hold the list of sections, as decided in the data-modeling phase. This bean will live in the session scope for the same reasons that the UserInfoBean does.

The SectionBean will hold the currently selected section, information that will be needed in order to put the asterisk in the right place in the list. In order to know what the current section is, this bean will need to be told, which is done by setting the sectionId property in the jsp:setProperty tag on the following line.

The next line starts an iteration with the standard c:forEach tag. Here, the items to iterate are the sections from the edition; the iteration variable is called section. Note that different names are used for the bean and the iteration variable in order to keep everything clear.

Next, a check is performed to determine whether to display the asterisk. This simple test for equality is handled by the c:if tag.

Now things get exciting! Displaying the name of the section would be easy enough using the c:out tag, as can be seen just before the closing c:forEach tag. However, this name needs to be turned into a link so that the user can select a section by clicking the name. This link will need to look something like the following:

<a href="FILES\."><c:show value="${section.name}"/></a>

It is now necessary to determine what value should fill in the mystery spot in href. A page called section.jsp will enable the user to see all the stories in a section, so that page should be the destination. The only remaining question is how to pass along the information about which section was selected. If the section were selected via a menu or drop-down in a form, the sectionId would be passed along as a form variable. As it turns out, attaching a name and a value to a URL behaves exactly the same as using a form. In particular, the jsp:setProperty tag can load a bean with values passed in such a URL. Thus, the URL should look like this:

section.jsp?sectionId=<c:show
   value="${section.sectionId}"/>

This should explain how the jsp:getProperty tag at the top of this file will work. Clicking one of the links will go to the section page, passing along sectionId= with the section ID that was selected. The section page will include the section list page; when the jsp:setProperty tag is encountered, the section list page will grab the value from the URL. This may seem slightly weird, as this page is therefore sort of eating its own output. It may indeed be weird, but it is also a very common technique in Web development and is worth getting accustomed to it.

Although specifying the URL would work in most cases, a better approach uses a new tag from the standard library. The c:url tag builds a URL using the value parameter as the base page and appending the names and values from any c:param tags within the body.

Using the c:url tag instead of manually constructing a URL has a number of advantages. One of the most important advantages is that the c:url tag will ensure that the resulting URL is valid. Certain characters, such as spaces and the equal sign, are not valid in names or values within URLs. The c:url tag will translate such characters into a legal representation automatically.

Now that the pieces are in place, the left-hand navigation bar itself is a straightforward enhancement of previous versions and is shown in Listing 5.4.

Listing 5.4 The left-hand navigation bar

<%@ taglib prefix="c"
    uri="http://java.sun.com/jstl/core" %>

<jsp:useBean
  id="user5"
  scope="session"
  class="com.awl.jspbook.ch05.UserInfoBean"/>

<c:if test="${!user5.isLoggedIn}">
  <div class="bordered">
    <jsp:include page="login.jsp" flush="true"/>
  </div>
</c:if>

<div class="bordered">
<jsp:include page="section_list.jsp" flush="true"/>
</div>

<div class="bordered">
<jsp:include page="quiz.jsp"/>
</div>

<c:if test="${user5.isLoggedIn}">
  <div class="bordered">
    <a href="customize.jsp">Customize JNT</a>
  </div>
</c:if>

The page imports the standard tag library and loads the UserInfoBean. This bean is used to hide the login form if the user is already logged in and, if the user is logged in, to display the customization link.

It is somewhat a matter of personal preference whether the check for the login form should be done here or in login.jsp. The advantage to putting it in login.jsp is that all the login-related logic is in one file. However, doing so would mean that there would be no way to override the decision not to display the login form.

In general, this sort of decision should he handled by the controller layer instead of the view. This issue will be revisited in Chapter 12 when controllers are discussed in more detail. The new home page with all the new navigation elements is shown in Figure 5.2.

Figure 5.2. The new JNT home page.

[View full size image]