CC292 Labs: JSP Continued

Introduction

This lab builds on the previous Java Server Pages (JSP) lab, and shows how to use page forwarding and page inclusion. In particular, we shall see how to pass data between pages using request scope JavaBeans.

Using page inclusion with generic helper pages, it is possible to create powerful web applications with clean and simple designs.

We'll begin with some very simple examples of forwarded and included pages, and then work through a more complex example involving a table.  We begin with a specific table construction method, and then study how this can be handled with a generic JSP table creator page, as discussed in the lecture exercise.

By this stage, you should be quite familiar using Intellij to create and edit web application projects.  You can either start a new project for this lab, or simply add new files to your existing project (personally I would do the latter).  The instructions may say things like: create a new JSP file called Table.jsp, or create a new Java package called mytable; you are now expected to know where to put these; consult a GTA if unsure.

Page Forwarding

In this simple example, we'll create some data on the requested page, which is then passed to another page using the <jsp:forward> mechanism.  First, this is the code for the forwarder:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="myBean" class="test.TestBean" scope = "request"/>
<jsp:setProperty name="myBean" property="x" value="12"/>

<html>
<head><title>Simple jsp page with a Forward</title></head>
<body>Place your content here
<jsp:forward page="UseBean.jsp" />
</body>
</html>

Note that it refers to two other files.  TestBean is a Java class to be defined in package test.TestBean.java.  UseBean.jsp is the page that will use the value of the bean, extracting some data from it to display (in this case the value of 'x').  The code for these is given below:

package test;

public class TestBean {
  int x = 99;
  public String a;

  public TestBean() {  }

  public TestBean(int x) {
    this.x = x;
  }

  public int getX() {
    return x;
  }

  public void setX(int x) {
    this.x = x;
  }

  public String toString() {
    return "Bean value = " + x + " : " + a;
  }
}

Now the UseBean.jsp file:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="myBean" class="test.TestBean" scope="request"/>
<html>
<head><title>Simple Bean Usage</title></head>
<body>
  <h2>Bean test: <%= myBean %></h2>
</body>
</html>

Page Inclusion

In this simple example, we'll create some data on the requested page, and then use the <jsp:include> mechanism to include another page.  After the page has been included, control is returned to the caller.

The other files (UseBean.jsp and TestBean.java) are the same as for the forwarding example.

The JSP to include another page is given below; note how we also set a field of the object that is not actually a bean property (bean properties are object fields that have get and set methods defined).

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="myBean" class="test.TestBean" scope = "request"/>
<jsp:setProperty name="myBean" property="x" value="11"/>

<html>
<head><title>Simple jsp page with an Include</title></head>
<body>Bean Value in Caller: <%= myBean %>
<%
// set a field that's not a property
myBean.a = "Set a non-property";
%>
<h2> Included file is below </h2>
<jsp:include page="UseBean.jsp" />
</body>
</html>

Experiment: try modifying the scope of the bean to page (in both or either of the caller and callee) and observe the effects.  What do you notice?

Product Table

The product table code covered in the lecture exercise is given here.  Set this up as a .jsp file in your Intellij project.  As discussed in the lecture, this is old Java 1.4 code; it would be a good idea for you to update this to use generic collections e.g. Collection<Product>.

<%@ page import="java.util.Collection,
java.util.Iterator,
shop.Product"%>

<jsp:useBean id='db'
scope='application'
class='shop.DummyDB' />

<html>
<head>
<title>My Shop</title>
</head>
<body>
<jsp:include page="header.jsp" flush="true"/>
<table>
<tr style="{color:red}">
<th> Title </th> <th> Price </th> <th> Picture </th>
</tr>
<%
Collection c = db.getAllProducts();
for (Iterator i = c.iterator(); i.hasNext() ; ) {
  Product product = (Product) i.next();
  // now use HTML literals to create the table
  // with JSP expressions to include the live data
  %>
  <tr style="{color:blue}">
  <td> <%= product.title %> </td>
  <td> <%= product.price %> </td>
  <td> <img src="<%= product.thumbnail %>" /> </td>
  </tr>
  <%
}
%>
</table>
</body>

Now define the following Java support classes (defined in appropriate packages) that will enable the page to be displayed:

  • DBInterface.java: an interface that specifies all the data access methods required to retrieve products from a database.  Fir our current purposes, this need only contain a single method called getAllProducts().
  • DummyDB.java: a dummy implementation of this that creates a Collection of products (Collection<Product>) directly in the Java code, and simply returns that collection when the getAllProducts() method is called.
  • Product.java - this should contain for each product a title, a price, and a relative path to a thumbnail image.

You will need to create your own dummy data for each product - like this for example:

public class DummyDB implements DBInterface {
  static Collection<Product> prods;
  static {
    prods.add(new Product(
      "Filter Coffee Machine", 17.99, "../img/filter.jpg"))
    ... // repeat this for several other products
  }
  public DummyDB() {}

  public Collection<Product> getAllProducts() {
    return prods;
  }
}

Now get this integrated and working so that requesting the appropriate page displays a list of product titles, together with price and thumbnail image.

Exercise

Now rewrite the above example using a generic table page.  Sample code is given below (this is the complete code for the example given in the lecture).  IE may try to interpret these pages; can can either View Source, or use right click to download the target of the link.  (note that I've had to add a .txt extension to these files because the MS web server is configured to block .jsp files).

You will need to modify this a bit to set the data up differently in the caller.  Table.jsp may work unmodified.
The Java files covered in the lecture notes are also available in this directory (note that there are also some Java files there that you do not need).

Summary

In this lab we studied how to:

  • use page forwarding
  • use page inclusion
  • implement a specific table construction page
  • design and implement a generic version of that page

In particular, note the use of our DummyDB class.  This is an example of a very powerful technique in software development.  The idea is to specify the design in terms of interface declarations (pure abstract classes).  The interface declarations specify the methods that may be invoked on any class that implements the interface.  Using this technique, dummy implementation of the interfaces can be very rapidly constructed, and hence complete system prototypes that integrate the individual modules can be constructed quickly.  Then, incrementally, the dummy implementations can be replaced with fully functional implementations that adhere to the same interface specifications.

 

end of page