JavaServer Pages, Second Edition

3.7 Java News Today and Beans

The Java News Today staff loves beans and is planning to build the majority of the JNT site around bean technologies. To start with, beans will allow JNT to add to the site a new feature: a daily quiz consisting of a single multiple-choice question. This quiz will appear in the right-hand navigation bar right above the list of sections. Of course, in order to make this new component easy to work with, it will be stored in a separate file called quiz.jsp, which will be included in the navigation bar with a jsp:include tag. The new version of the navigation is shown in Listing 3.12.

Listing 3.12 The new navigation bar

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

Now, onto the quiz itself. Beans have two aspects that will make this feature very easy to add. The first is that the user will respond to the quiz through a form; as we have seen, beans excel at handling form inputs. The second concerns the way the questions will be stored. If the questions were placed directly in the HTML, it would be a pain to update them. Instead, the questions and the correct response will be stored in a serialized bean, which can be updated using any of several available bean editors. Listing 3.13 shows how this bean will be used in quiz.jsp.

Listing 3.13 The daily quiz

<jsp:useBean
  id="quiz"
  beanName="todaysQuiz3"
  type="com.awl.jspbook.ch03.QuizBean"/>

<jsp:getProperty name="quiz" property="question"/><P>

<form action="quiz_result.jsp" method="POST">
  <input type="radio" name="userGuess" value="1">
  <jsp:getProperty name="quiz" property="answer1"/><BR>

  <input type="radio" name="userGuess" value="2">
  <jsp:getProperty name="quiz" property="answer2"/><BR>

  <input type="radio" name="userGuess" value="3">
  <jsp:getProperty name="quiz" property="answer3"/><BR>

  <input type="Submit" name="Guess" value="Guess">
</form>

There are no new surprises here; the serialized bean is obtained with the jsp:useBean tag, and properties are put on the page with the jsp:getProperty tag. Recall from Listing 3.4 that it is not necessary for a form page to obtain a bean, even if the form will ultimately be sending data to that bean. This is still true; in this example, the bean is being used not directly with the form but only to obtain blocks of text that are displayed within the form.

The JNT designers are now ready to start thinking about personalization, at least at a very high abstract level. Even though it is not yet clear how personalization will work, it is safe to assume that every user will be modeled as a bean and that this bean will have various properties describing the user's preferences. This is enough to start laying some groundwork. To start with, the designers will use this bean to customize the header by displaying the user's name, if it has been provided. This is shown in Listing 3.14.

Listing 3.14 The header, with a bean property

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

<center><h2>Java News Today: Welcome!</h2></center>

<div class="left">
  Hello <jsp:getProperty name="user" property="name"/>!
</div>

To prepare further for customization, a link will also be added to the left navigation bar. With the addition of the link and the quiz, the front page is starting to look like a real site. It is shown in Figure 3.2.

Figure 3.2. The new JNT home page.

[View full size image]

It is also possible to use custom values in the style sheet: for example, to change the color behind the navigation bar and header. This is illustrated in Listing 3.15.

Listing 3.15 The style sheet, with a bean property

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

TABLE.form { border-style: groove;
             border-color: #004400; }

TD.label { border-style: solid;
           border-width: 1px;
           border-color: #00aa00;
           background: #<jsp:getProperty
               name="user"
               property="bannerColor"/>;
           color: #000000;
           padding-right: 5px }

TD.form { border-style: solid;
          border-width: 1px;
          border-color: #004400;}

TD.borders { background:
             #<jsp:getProperty
               name="user"
               property="bannerColor"/>; }

DIV.bordered { border-style: groove;
               border-color: #004400; }

DIV.left { margin: 0px 0px 0px 0px;
           padding: 0px 0px 0px 0px;
           text-align: right; }

There is one small catch to changing the colors. The little corner bit, which is used to give the site a slightly smoother look, is an image, and its color is not controlled by the style sheet. It will therefore look noticeably out of place if the colors are changed. This could be solved by making part of the image transparent in a clever way, but it is also possible to generate the image dynamically so that its colors match the site. The advantage of the latter technique is that it makes it possible to handle an image with multiple different colors that all need to match colors on the site. The disadvantage is that this requires some advanced techniques, and so it will not be possible to discuss this until Chapter 14.

Difficulties with the image aside, it is already possible for the user to modify these values, thanks to the fact that the bean is in the session scope. Setting new values can be done by providing a simple form that will set the name and color attributes. Because the bean is in the session scope, these values, once set by such a form, will remain set until the session expires or the user changes them. Listing 3.16 shows the customization form, and the page as seen in a browser is shown in Figure 3.3.

Figure 3.3. The JNT customization page.

[View full size image]

Listing 3.16 The customization form

<jsp:include page="top.jsp"/>

<table class="form">
<form action="customize_handler.jsp" method="post">
<tr>
  <td class="label">Background color:</td>
  <td><input type="text" name="bgColor"></td>
</tr>

<tr>
  <td class="label">Banner color:</td>
  <td><input type="text" name="bannerColor"></td>
</tr>

<tr>
  <td class="label">Text color:</td>
  <td><input type="text" name="textColor"></td>
</tr>

<tr>
  <td class="label">Your name:</td>
  <td><input type="text" name="name"></td>
</tr>

<tr>
  <td colspan="2" align="right">
    <input type="submit" name="go" value="Set Preferences">
  </td>
</tr>
</form>
</table>

<jsp:include page="bottom.jsp"/>

This is yet another standard HTML form. As expected, the fun happens on the receiving page, which simply sets the bean and notifies the user that his or her preferences have been changed. This is shown in Listing 3.17.

Listing 3.17 The customization handler

<jsp:include page="top.jsp"/>

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

<jsp:setProperty name="user" property="*"/>

Your preferences have been set!

<jsp:include page="bottom.jsp"/>

These three examples should demonstrate how easy it is to use beans in order to make sites dynamic. On one page, the bean is simply used to display values. Another page has a very simple form that sends values to the bean in order to change these values. Finally, a third page uses a single jsp:setProperty tag to do the setting. From then on, the new values will be available to the first page.

Finally, to tie it all together, a link to the customization page can be added to the navigation bar, as shown in Listing 3.18.

Listing 3.18 Adding a link to the customization page

<jsp:include page="top.jsp"/>

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

<jsp:setProperty name="user" property="*"/>

Your preferences have been set!

<jsp:include page="bottom.jsp"/>

Although customization is proceeding nicely, things are not looking as good for the quiz. Unfortunately, it is not yet possible to write the result page, which will state whether the user's guess was correct. This will require one of those conditionals mentioned earlier and so will have to wait for the next chapter. For the moment, however, it is possible to create a page that will at least tell the user what the right answer is, along with the user's guess. This is shown in Listing 3.19 and illustrated in Figure 3.4.

Figure 3.4. The placeholder quiz result page.

[View full size image]

Listing 3.19 The quiz result page

<jsp:include page="top.jsp"/>

<%-- Start content --%>
<jsp:useBean
  id="quiz"
  beanName="todaysQuiz3"
  type="com.awl.jspbook.ch03.QuizBean"/>

<jsp:setProperty name="quiz" property="*"/>
You guessed
<jsp:getProperty name="quiz" property="userGuess"/>.

The correct answer is
<jsp:getProperty name="quiz" property="correctAnswer"/>.
<%-- End content --%>

<jsp:include page="bottom.jsp"/>

Again, this is very straightforward; the guess is sent with a standard jsp:setProperty tag to the bean, and then both the guess and the right answer are shown with jsp:setProperty tags. Note again how easy it was to create a new JNT page by adding the two appropriate jsp:include tags.