如何在不对HTML图像进行硬编码的情况下实现Java Servlet图像的幻灯片显示？

Question

As a learning exercise I have adapted a series of Java servlets written by BalusC to store a list of images uploaded in a mysql database. The application works fine and displays a list of the images in the sequence they are read from the database statically in html. Howver, I am trying to adapt the html to display these dynamically in a slideshow. I have found several examples on the internet but all of them seem to hard-code the names of images in the browser code. I'm looking for some way of transfering the images read from the database query to a slideshow in the client.

The original source is here

After having researched several examples it seems that using javascript is the most common way for doing it, but I cannot find an example which does it dynamically here is my attempt (I am using javascript embedded with html within a java servlet) at it which fails to do more that print out the titles of the images in a consecutive list on the page (but no image):

try {
        Class.forName(driver);
        Connection con = DriverManager.getConnection(url+dbName, userName, password);
        PreparedStatement ps = con.prepareStatement("select * from photos");
        ResultSet rs = ps.executeQuery();
        out.println("<h1>Photos</h1>");
        while ( rs.next()) {
              out.println("<h4>" + rs.getString("title") + "</h4>");
              out.println("<script type=\"text/javascript\">");
              out.println(" function clearScreen(){");
              out.println(" document.image.src=displayphoto?id=\" +  rs.getString(\"id\")\"");
              out.println(" document.body.innerHTML=\"\";");
              out.println(" setTimeout('clearScreen()','5000');}");
              out.println("</script>");
        }

        con.close();
    }

Any pointers or suggestions on a better way of doing this, even purely with Java servlets would be greatly appreciated.

Many thanks

Alastair

Answer 1

This code generates a <script> block defining the same clearScreen function for each photo found in the table (but with a different photo ID at each iteration).

It's not very clear what you're trying to do. To do a slideshow, you have to iterate over a list of picture IDs. You can store this list of IDs

• as a JavaScript array in the HTML code. The servlet code would have to generate the JavaScript code defining an array of IDs
• as an Iterator at server-side, in a session attribute. To display the next photo, the displayphoto servlet would have to get the iterator from the session, get its next ID, and serve the bytes of the image having this ID
• nowhere. Each time a new photo must be displayed, its index would be passed to the displayphoto servlet, and the servlet would generate a SQL query to get the photo at this index. Of course, the SQL query would have to use some sort order to always return the photos in the same order.

If your goal is to implement the first solution, it's really not difficult. Here is how an array of three IDs (id1, id2 and id3) is declared in JavaScript:

var ids = ['id1', 'id2', 'id3'];

So, all you have to do is to generate the above String frm a List<String> containing "id1" , "id2" and "id3" . A simple loop will do:

StringBuilder jsArrayDeclaration = new StringBuilder();
jsArrayDeclaration.append("var ids = [");
boolean first = true;
for (String id : listOfIds) {
    if (!first) {
        jsArrayDeclaration.append(", ");
    }
    first = false;
    jsArrayDeclaration.append("'");
    jsArrayDeclaration.append(id);
    jsArrayDeclaration.append("'");
}
jsArrayDeclaration.append("];");