Tutorials : Java Tutorial: Working with files and directories in Java Part 2 :

A solution using JavaScript

The only disadvantage with this solution is that every click on a folder requires a trip to the web-server and back again to the browser. Compared to clicking on a folder in for example Windows Explorer the response time is remarkably slower. There is another solution that will speed up the response time, and this involves the use of some JavaScript. Note that the solution presented only works in Internet Explorer.

The idea is that the whole directory structure is transferred once to the browser, and then the directories are opened or closed by changing the "display" style-property of the directories. To make this work we need to add two things to the HTML-page:

1. the contents of every directory must be enclosed in a <span>-tag. As an example we can use "Dir-C" in figure 3 above:

     <span id=d2>
     <img src="images/vbar.gif" align=center>
     <img src="images/vbar.gif" align=center>
     <img src="images/ebar.gif" align=center>
     <img src="images/file.gif" align=center> File C.txt<br>
     </span>

   With JavaScript we can make this directory "disappear" by the statement

     d2.style.display= "none"

   and make it visible again by

     d2.style.display= ""

   Again the "toggle" function will handle this for us.

2. when a folder is opened or closed we must change the image depicting the folder. The technique for replacing images has been used for many years. If the image for the folder is called "f2" we display the "closed folder" image like this:

     document['f2'].src='images/closed.gif'

   … and the "open folder" like this:

     document['f2'].src='images/open.gif'

   This code is also placed in "toggle".

Now we only need to make a new subclass of MyFileStructure. It's called MyFileStructureJS, and it is almost identical with MyFileStructureExplorer. We only need to add the <span>-tags and the name of the folder-gif's. Here is an outline of the class with the added code shown in bold:

package hansen.playground;

public class MyFileStructureJS extends MyFileStructure {
. . .
// Show image of a directory
    folderGif = "<img src=\"images/" + folderGif + 
      ".gif\" border=0 align=center name=f" + key + ">";
. . .
    String line = verticalGifs(level-2) + folderGif + " " + 
      name + "<br>\n";
    result +=  line + "<span id=d" + key + ">\n";
  }  
  
  protected void outEndDir() {
    result += "</span>\n";
  }  
 . . .
}

To complete the code we also need a new version of the "toggle" JavaScript function:

function toggle(key) {
  // key is an integer
  // get name of span
  eval("var obj = d" + key);
  // get name of folder gif
  var img = "f" + key;
  with(obj) {
    if (style.display == "none") {
      style.display="";
      document[img].src = "images/open.gif";
    } else {
      style.display="none";
      document[img].src = "images/closed.gif";
    }
  }
} 

If you try this solution I'm sure you'll be impressed by the response times.

Conclusion

A Java-program for building a graphical view of a directory structure has been presented. When coding the open/close function we could choose between two solutions: one solved the job by letting Java-code on the server do the work. The other solution used JavaScript in the browser.

This is actually a rather common situation facing designers of web applications. A similar case is when you'll have to decide how to handle validation of data entered in an HTML form. You can validate in the browser using JavaScript, or you can let the server handle it. Or you can use a mixture of these techniques. What you should prefer depends on your application. If fast response times are essential then use JavaScript. If the data will be written to a data base, or are used for other critical operations you should (also) validate on the server. But isn't this a topic for another article?

How to Add Java Applets to Your Site

New on the Java Boutique:

New Review:

Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling API boasts simplicity, ease-of-integration, a well-rounded feature set, and it's free!

New Applet:

Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA sequences into three useful formats.

Elsewhere on internet.com:

WebDeveloper Java
Lots of Java information on webdeveloper.com

WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.

ScriptSearch Java
Hundreds of free Java code files to download.

jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.