Image of Navigational Map linked to Home / Contents / Search Displaying Server Directory Structure on the Web

by Rupert Walsh - GUI Computing
Image of Line Break

Why have a tree view of your server?

One of the great things about the latest versions of "Office software" is how easily you can generate documents for the Internet, or your company's intranet. These days, even a manager can export documents from Word or Excel to HTML! This is all well and good, but it's still not easy to create a web site that has links to all these documents. Sure, it may be easy for a web-literate developer, but when these documents are being fired at him or her from all over the company, the most likely already overworked poor soul simply can't keep up. At least, not without an unhealthy quantity of caffeine and pizza!

Almost all computer users are used to organizing documents into directories, and more and more applications are also organizing documents this way. Just look at the start menu - it simply displays the directory structure and shortcuts from 'C:\Windows\Start Menu' down, with a few extras thrown in. The same is true for you favorites menu if you use Internet Explorer ("C:\Windows\Favorites").

I've written an ActiveX DLL in VB that reads directory structure and contents data, much like your windows explorer, and exposes the result as a tree view in HTML. You can install this onto your web server, and display a tree view of any physical directory structure available to your server. This means that you could provide a directory structure to your intranet users, and let them add documents, or even sub-folders as they liked. The documents can be immediately browsed from the directory tree!

The Acme Corporate Intranet Site

Here's a simple example of how a corporate website might be organised:

Here's how it looks through the browser:

There are a couple of points to note in the above example. Probably the most obvious is that the tree's root directory is called 'Root' in the Windows explorer, yet appears as 'Acme Intranet' in the browser. This is set with the RootTitle property of DIR2HTML. Also, the titles displayed for the files are not necessarily the filenames. If Dir2Html finds an HTML file (i.e. '.htm' or '.html') it searches the file for its <TITLE> tag and displays this. Luckily, most programs that convert documents to HTML will also convert a title automatically, an example being Word's document title property (found under the File | Properties menu in the Summary tab). If no title is found, the filename will be displayed.

How is Dir2HTML used?

Dir2HTML is an ActiveX DLL, written in VB5, that contains a public class called clsDirTree.

You may already know that, as an ActiveX component, Dir2html can be called from VB like any COM object. To do this, you first need to register the component on your machine, and then add a reference to it using Project|References menu. This makes the public properties, methods and variables of Dir2Html's classes available, just as if you'd added the class modules themselves to your VB project.

As an example, you could call the tree class like so:

Dim oTree As Dir2Html.clsDirTree
Set oTree = New Dir2HTML.clsDirTree

However, it won't be much use to us in VB, as its intended function is to generate HTML! Fortunately, Active Server Pages gives us access to components registered on an IIS server machine in much the same way, using the Server.CreateObject function from VBScript:

Set oTree = Server.Createobject("Dir2HTML.clsDirTree")

We then need to set up various public properties of the tree object, before sending the HTML returned by the TreeHTML property. Here's the entire ASP script:

	'Create the object
	Set oTree = Server.Createobject("Dir2HTML.clsDirTree")
	'Place to start navigation from
	oTree.RootPath = "T:\AVDF Articles\DIR2HTML\Website\Root"
	'Relative URL of directory root (to this file)    
	oTree.RootURL = "../Root"
	oTree.RootTitle = "Home"
	oTree.FileImage = "File3D.gif"
	oTree.FolderImage = "Folder3d.gif"
	oTree.OpenFolderImage = "OpenFolder3d.gif"
	oTree.SpaceImage = "Space.gif"
	oTree.ImageTagOptions = "border='0'"
	oTree.FontMaxSize = 4
	oTree.FontMinSize = 2
	oTree.FontTagOptions = "Face='Arial'"	

	'Target window (if needed)
	oTree.Target = "main"
	'Set the valid extensions for files
	oTree.Extensions = "htm;html;txt;url;gif;jpg;jpeg"
	'Where are we?
	oTree.ClickedPath = Request("Clicked")	
	oTree.Action = Request("Action")
	oTree.CallingURL = "Tree.asp"
	'Include filename
	oTree.IncludeFileName = ""
	oTree.RedirectFileName = "_redirect.tre"
<title>Favorites Tree</title>

<body bgcolor='lightblue'>

	'Write the tree
	response.write oTree.TreeHTML



What cool stuff can it do?

As you can see from the ASP script, DIR2HTML has a lot of properties. I'll describe some of the more interesting ones here. Full documentation is available at the DIR2HTML website.

All of the images displayed in the tree are easily configurable, including the "blank" image used to create indentation space on the left of the tree (the SpaceImage property). This means you can use a narrower image if you don't want your tree to expand too far to the right.

To emphasize the depth of a folder, you can also have Dir2Html use a larger font for the root, and decreasing the size as subdirectories are added by using the FontSizeMax and FontSizeMin properties. The Acme Intarnet example above uses this effect. Of course, you can also set these to the same value if you like to keep the size constant.

To get the 'Explorer' look, you'll need to use frames on your website, as I have in the above example. Dir2Html lets you set the target frame to display documents in.

The IncludeFileName property specifies the name of files that contain HTML to be included in the tree. The HTML will be displayed as the first child node of the directory that it is included in. This is a very powerful feature, and allows you to include any other information besides files and folders in your tree. Some common uses might be as simple as text to describe the purpose of a folder, or a complex as search forms that link to an index server search. And of course, you can include links to other areas of your website (or any other website).

For example, I use the file Root/Search/ to show a search form under the search directory:
<form name='test' action='search.asp' target='main'>
<font size=2>Enter text to search for below:</font><br>
<input type='' name='search'>
<input type='submit' value='go'>

Note that in the above example, I have changed the RootDisplayType option to 2, to hide the Tree root node (Acme Intranet).

The RedirectFileName is an advanced feature that allows you to specify a special file that redirects the tree from one physical directory to another. The file includes two entries, as shown in this example:


The 'alias' tells Dir2Html where to link to, and the URL is the base URL to use for files in the remote location. The above example will display the "favorites" tree, from a Windows 95/Internet Explorer machine:

Note that in this example, some items (Channels and Software updates) are not included, as these are not stored as subdirectories of C:\Windows\Favorites. Another built-in feature of Dir2Html is that it recognises the internet shortcut (".url") files, and interrogates them for their target URL, automatically creating the link.

In order to hide these 'system' files (specified by IncludeFileName and RedirectFileName), choose an extension that doesn't match your other documents, and use the extensions property to force Dir2HTML to display only your nominated file types.

How does it work?

Each folder displayed in the HTML tree has a link of the form:

<a href="Aspfilename.asp?Action=ActionType&Depth=Depth&Clicked=ClickedPath#Scroll" TARGET="_self">

Aspfilename: the name of the asp file
ActionType: either Open or Closed
Depth: the depth from the root
ClickedPath: Physical path based unique identifier

Each of these variables are passed to Dir2Html. It then traverses the directory structure, checking whether each subdirectory is on the path to the clicked directory. If it is, the directory is displayed as expanded by the ActiveX DLL.

I'm not going to go into the DLL code in detail (there's just too much of it!) but I will overview the major steps.

Setting up the Options

All display options should be set first with the public properties of clsDirTree, from the ASP script. Importantly, the ClickedPath and Action properties tell us which folder the user clicked on, and whether it should be expanded or closed.

Building up the directory structure

The built-in VB function Dir() is used to read the directory structure, which is then held in an internal class structure (clsDirItem). When TreeHTML is called, the directory structure is read from the root directory, down to the clicked directory. This is done recursively by the subroutine AddChildren:

During each cycle of the above algorithm, an instance of class clsDirItem is created for each file and folder. Each clsDirItem has a parent item, and if it is a folder, also has a collection of child items defined as clsDirItems:

Of course, besides having a parent and children, clsDirItem has a number of important properties as well, including the depth from the root, the physical path, the URLPath (for files) and the TreePath. The TreePath is unique for each file, and is based on the physical path, but substitutes pipe characters for backslashes.

Building the HTML tree

The directory structure that we have now built up is processed recursively by the function DisplayTree to build up the HTML string:

Dir2Html is currently in version 2.1. You can get it from the Dir2Html website, along with online documentation. There's also a demo version here. If you think of any improvements you'd like to see in future versions, or have just done something cool with Dir2Html, drop me a line!


Dir2Html uses Spidereye Studio's Flexbag collections object, written by Gary Wisniewski. It's cool, and it's free, and you can get it here.

Written by: Rupert Walsh
October '98

Image of Arrow linked to Previous Article Image of Arrow linked to Next Article
Image of Line Break