Journal

Java Navigation Frames

PC Pro logo Posted: 1st January 1999 | Filed under: Press Articles, Technical
Author: Paul Ockenden
First Appeared in PC Pro 1999

Last month we touched on frame navigation and how to refresh multiple frames with a single mouse click. This month we're looking at one of the most common uses for such a technique: a classic left-frame navigation panel. Imagine a product catalogue Web site for a computer hardware company, with several layers of information. The first layer of navigation might have divisions like computers, printers and modems. The next layer could divide computers into servers, desktops and laptops, with a third layer containing the actual model descriptions. A similar tree structure might be repeated for the other main divisions of the catalogue. It's easy to see that a few top-level categories could lead into hundreds, if not thousands, of individual pages.

So how do you design a left-frame navigation system to look after that lot? First and most obvious is to have a series of static pages, each linked to another, so there would be a main menu page, a computers menu page, a servers menu page and so on. While this is probably the easiest scheme to visualise, it will also be the most complex to maintain.

The alternative would be to keep everything in one page. DHTML and JavaScript would allow you to create a page which automatically updates itself to show the relevant content as each item is clicked. The DHTML code might look something like:


<DIV ID="Out0">

<a ID="Out1" CLASS="Outline" STYLE="cursor: hand">Item 1</a><BR>
<DIV ID="Out1display" STYLE="display:None">

<a ID="Out2" CLASS="Outline" STYLE="cursor: hand">Item 1.1</a><BR>
<DIV ID="Out2display" STYLE="display:None">

<a href="dummy.html">Item 1.1.1</a><BR>
<a href="dummy.html">Item 1.1.2</a><BR>

</DIV>
<a href="dummy.html">Item 1.2</a><BR>

</DIV>
<a href="dummy.html">Item 2</a><BR>

</DIV>

This would be used in conjunction with a JavaScript function as follows:


<SCRIPT LANGUAGE="JavaScript">
function clickHandler() {

var targetId, srcElement, targetElement;
srcElement = window.event.srcElement;
if (srcElement.className == "Outline") {

targetId = srcElement.id + "display";
targetElement = document.all(targetId);
if (targetElement.style.display == "none") {

targetElement.style.display = "";

} else {

targetElement.style.display = "none";

}

}

}
document.onclick = clickHandler;
</SCRIPT>

Within the DHTML code, all of the anchors used to control the collapsing and expanding of elements are given the class 'Outline'. The elements which will be shown when the anchor is clicked are given the same class, with the same ID as the anchor except that 'display' is added to the end (Out2Display, for example). The JavaScript function sets itself up as a click handler for the whole page, and passes anything that isn't of the class 'Outline' straight through. Otherwise, it toggles the display status of the item that has an ID equal to <clicked anchor's ID+'display'>. When viewed in older browsers, which don't understand the in-line style of syntax, the whole page will show up fully expanded.

This is much better solution than having lots of individual menu files, but it still suffers from one big problem - size. If that menu contains hundreds or thousands of items the DHTML or JavaScript file will be enormous. However, rather than processing the menu like this using client-side code, we could move all the clever bits to the server side. All we need is a left.asp or left.pl function (or other) that can remember where we are in the menu structure and generate the appropriate page content.

Perhaps the main reason for doing all of this processing is to improve site maintainability. One thing that really helps in this respect is to separate the data from the code and the HTML. You can achieve this by storing the site menu structure in a separate file from the menu data (that is, the model descriptions). Therefore, whenever you need to add a new page to the site you don't have to change left.asp but just add a new line to the menu data file.

How might this work? Let's look at how parts of left.asp could be constructed. First read the menu data file in. Obviously, you won't want to do this every time left.asp is processed - that would be too heavy on server resources. Instead, what we've done is to read the file into an array and store it in a session variable so that the array is available next time round. Then, next time, if the array has already been set up there's no need to read it again.


if session('leftmenudone') <> 1 then

dim menu()
redim menu(1000,3)
Public linestuff
menuitems = 0
Dim fs, f, dummy
Set fs = CreateObject('Scripting.FileSystem Object')
Set f = fs.OpenTextFile('d:\inetpub\wwwroot\ menu.txt')
Do while f.AtEndOfStream <> True

dummy = f.Readline
menuitems = menuitems + 1
linestuff = split(dummy,',',3,1)
for jj = 0 to 2

menu(menuitems,jj) = linestuff(jj)

next

loop
f.Close
session('leftmenu') = menu
session('leftmenudone') = 1

else

menu = session('leftmenu')
end if

You'll notice that for this simple menu example we're reading just three items from the text file and using a comma to separate them. The first item will be a combination of item ID and menu depth, the second will be a description and the third will be the page to show in the main frame when this item is clicked (if there's no page to go to then this third parameter will be set to zero). So a fragment of the menu file might look like:


0200000,Computers,0
0210000,Desktops,0
0211000,Pentium,0
0211100,XYZ 33,xyz33.html
0211200,XYZ 66,xyz66.html
0211300,XYZ 133,xyz133.html
0211400,XYZ 250,xyz250.html
021200,Pentium II,0
021210,ABC 266,ABC266.html
021220,ABC 450,ABC450.html
etc.

The code to actually process the menu is extremely simple, something along the lines of:


arg = request.querystring('arg')
if arg = '' then

arg = '0'

end if
for menuitem = 0 to ubound(menu)

level = len(arg)
disp = menu(menuitem,1)
do while level > 0

if (left(menu(menuitem,0),level) = left(arg,level)) AND (mid(menu(menuitem,0),level+2,1) = '0')then 'we're in this level

if menu(menuitem,2) = '0' then 'no specified document

if mid(menu(menuitem,0),3,1) = '0' and left(arg+'0000',3) = left(menu(menuitem,0),3) then 'toggle open sections

response.write '<a href=''/left.asp?arg=0'' target=''leftframe''>'&disp&'</a><br>'
else

response.write '<a href=''/left.asp?arg='&left(menu
(menuitem,0),instr(2,menu(menuitem,0),'0',1)-1)&''' target=''leftframe''>'&disp&'</a><br>'

end if

else 'a page in the main frame

response.write '<a href='''&menu(menuitem,2)&''' target=''mainframe''>'&disp&'</a><br>'

end if
exit do
end if
level = level - 1

loop

next

This all looks fairly boring, so maybe some graphics could cheer it up. Well, that's easy enough. Let's just examine the description field, and if the file is in GIF format then load it as a graphic rather than displaying it as text. So replace the existing line which sets 'disp' with the following code:


if right(menu(jj,1),4) = '.gif' then
disp = '<img src='''&menu(jj,1)&''' border=0>'
else
disp = menu(jj,1)
end if