Slide Show

The slide show application displays a random image from a subdirectory each time the JSP page is refreshed:

San Francisco

Armenia

Switzerland

Iterations

Iteration 1

Create a new JSP page called slides.jsp. When you create this page, notice the directory where the page is stored.

Using your file system browser, locate the directory where slides.jsp is stored. Create a subdirectory called images. Place a few .jpg and .gif files in this subdirectory.

(Hint: JDeveloper users look in jdev\myWork.)

Add text and an image from the images subdirectory to slides.jsp. Place a link to slides.jsp on your index page. Test it!

Iteration 2

Add a scriptlet to slides.jsp.

In the scriptlet create an array of strings containing the names of the .jpg files in your images directory. For example:

String[] fNames = {"img1.jpg", "img2.jpg", "img3.jpg"};

Next, create a random number generator. Use it to select a random integer between 0 and fNames.length.

Hint: See the java.util.Random API.

Hint: Place an import directive near the top of slides.jsp:

<%@ page import="java.util.*"%>

Now fetch the name from fNames with position equal to the random number. Prepend "images/" to this name.

Use this name as the src property of your img element.

Test it.

Iteration 3

In the final iteration we want to avoid hard wiring file names into slides.jsp. To do this, we need to use the class java.io.File. Instances of this class represent files and directories. The basic idea is to create an array of File objects representing the .jpg and .gif files in the images directory. Following the technique of iteration 2, we can select a random entry from this array, use the File.getName() method to get the actual name of the file, prepend "image\" to this name, then use this name as the src attribute of the img element.

We begin by creating a File instance representing the images subdirectory, then we use the listFiles method to get the contents of the images directory. In an ordinary Java application this is easy:

String path = "images";
File imgDir = new File(path);
File[] files = imgDir.listImages();

There are two problems.

Filtering files

First, the files directory will contain all of the files in the images directory, not just the ones with a .jpg or .gif extension. To fix this problem we need to create a FileFilter object that filters out all of the undesirable files.

class ImageFilter implements FileFilter {
   public boolean accept(File f) {
      return f.getName().endsWith(".jpg") || f.getName().endsWith(".gif");
   }
}

We can pass an instance of ImageFilter to listImages():

File[] files = imgDir.listImages(new ImageFilter());

This can be done in a single command using tricky syntax:

File[] files = imgDir.listFiles(
   new FileFilter() {
      public boolean accept(File f) {
         return f.getName().endsWith(".jpg") || f.getName().endsWith(".gif");
      }
   }
);

Caution: Our filter filters out files with .JPG and .GIF extensions.

Finding directories

The code above only works if the images directory is a subdirectory of the directory that contains the Java program that contains the code. In the case of a web application, the program is the web server, not the JSP page. So how do we get the path to our images directory from the web server? Keep in mind that our program may be deployed on many web servers that have different locations in their respective file systems.

JSP pages refer to their managing web server (i.e., JSP container) as their "servlet context". (JSP pages are translated into Servlet instances by the container). We can get an object representing the context, and from this the real path to a given subdirectory as follows:

   String path = config.getServletContext().getRealPath("images");

References

For more information see

http://www.oracle.com/technology/sample_code/tech/java/codesnippet/jsps/jspio/Files-JSP.html