<?php
// Chip's HTML_TreeMenu Information Page
// Revision History
// 2002-12-02 cchapin Release XL2.0.2
// 2002-11-15 cchapin Fix PHP short tag in document template.
// 2002-11-14 cchapin Major update for release 1.1.0/XL2.0
// 2002-11-02 cchapin Revised to use HTML_TreeMenuXL class
// 2002-11-02 cchapin Initial release (XL1.0)
// 2002-10-30 cchapin Initial Creation
// +-----------------------------------------------------------------------+
// | Copyright (c) 2002 Chip Chapin <hide@address.com> |
// | http://www.chipchapin.com |
// | All rights reserved. |
// | |
// | Redistribution and use in source and binary forms, with or without |
// | modification, are permitted provided that the following conditions |
// | are met: |
// | |
// | o Redistributions of source code must retain the above copyright |
// | notice, this list of conditions and the following disclaimer. |
// | o Redistributions in binary form must reproduce the above copyright |
// | notice, this list of conditions and the following disclaimer in the |
// | documentation and/or other materials provided with the distribution.|
// | o The names of the authors may not be used to endorse or promote |
// | products derived from this software without specific prior written |
// | permission. |
// | |
// | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
// | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
// | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
// | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
// | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
// | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
// | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
// | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
// | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
// | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
// | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
// | |
// +-----------------------------------------------------------------------+
// | Author: Chip Chapin <hide@address.com> |
// +-----------------------------------------------------------------------+
$pgEmailSubj = 'HTML_TreeMenu_Page';
// Control dynamic style sheet
$styleBodyIndent=true;
$styleBodyBGcolor="#FFDBB7";
if (file_exists( 'TreeMenuXL.php' ))
include_once( 'TreeMenuXL.php' );
else
include_once( $_SERVER['DOCUMENT_ROOT'] . '/bin/TreeMenuXL.php' );
// Menu00 -- Based on the original example
// Should be as basic as possible.
$menu00 = new HTML_TreeMenuXL();
$nodeProperties = array("icon"=>"folder.gif");
$node0 = new HTML_TreeNodeXL("INBOX", "#", $nodeProperties);
$nx = &$node0->
addItem(new HTML_TreeNodeXL("A Folder", "#link1", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("Nested Folder", "#link2", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("Deeper ...", "#link3", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("... and Deeper", "#link4", $nodeProperties));
$node0->addItem(new HTML_TreeNodeXL("deleted-items", "#link5", $nodeProperties));
$node0->addItem(new HTML_TreeNodeXL("sent-items", "#link6", $nodeProperties));
$node0->addItem(new HTML_TreeNodeXL("drafts", "#link7", $nodeProperties));
$node0->addItem(new HTML_TreeNodeXL("spam", "#link8", $nodeProperties));
$menu00->addItem($node0);
$menu00->addItem(new HTML_TreeNodeXL("My Stuff", "#link9", $nodeProperties));
$menu00->addItem(new HTML_TreeNodeXL("Other Stuff", "#link10", $nodeProperties));
$menu00->addItem($node0);
// Menu03 -- This uses no icons. The plus/minus are still present
$nodeProperties = array("cssClass"=>"auto");
$menu03 = new HTML_TreeMenuXL();
$node03 = new HTML_TreeNodeXL("INBOX", "#", $nodeProperties);
$nx = &$node03->
addItem(new HTML_TreeNodeXL("A Folder", "#link1", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("Nested Folder", "#link2", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("Deeper ...", "#link3", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("... and Deeper", "#link4", $nodeProperties));
$node03->addItem(new HTML_TreeNodeXL("deleted-items", "#link5", $nodeProperties));
$node03->addItem(new HTML_TreeNodeXL("sent-items", "#link6", $nodeProperties));
$node03->addItem(new HTML_TreeNodeXL("drafts", "#link7", $nodeProperties));
$node03->addItem(new HTML_TreeNodeXL("spam", "#link8", $nodeProperties));
$menu03->addItem($node03);
$menu03->addItem(new HTML_TreeNodeXL("My Stuff", "#link9", $nodeProperties));
$menu03->addItem(new HTML_TreeNodeXL("Other Stuff", "#link10", $nodeProperties));
$menu03->addItem($node03);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><!-- InstanceBegin template="/Templates/stdlayout01.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>HTML_TreeMenuXL Info Page</title>
<script src="TreeMenu.js" language="JavaScript" type="text/javascript"></script>
<link href="TreeMenu.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php
// Include dynamic style sheet.
echo '<style type="text/css">'."\n <!--\n";
if (file_exists( 'ccSiteStyle.css.php' )) {
include_once( 'ccSiteStyle.css.php' );
}
else {
include_once( $_SERVER['DOCUMENT_ROOT'] . '/ccSiteStyle.css.php' );
}
echo "\n -->\n</style>\n";
if (false) {
?>
<link href="/ccSiteStyle.css" rel="stylesheet" type="text/css">
<?php } ?>
<script type="text/javascript" language="JavaScript">
// Bust my page out of any frames
if (top != self) top.location.href = location.href;
</script>
</head>
<body bgcolor="#FFDBB7">
<!-- InstanceBeginEditable name="MainTitle" --><!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="MainBody" -->
<h3>An Enhanced Version of HTML_TreeMenu</h3>
<table summary="" width="640">
<tr>
<td align="left"><a href="../../../">Chip's Home</a> > <a href="../../">WebTools</a>
> <a href="../">MenuTools</a> > <strong>HTML_TreeMenuXL</strong></td>
<td align="center"> </td>
<td align="RIGHT"> </td>
</tr>
<tr>
<td colspan="3"> <hr> </td>
</tr>
</table>
<table width="240" border="0" align="right" cellpadding="2" cellspacing="4">
<tr>
<td> <p><strong>Page Revision History</strong></p>
<ul>
<li>2002-12-02 minor patches (XL2.0.2)</li>
<li><span class="smalltext">2002-11-15 minor patches (XL2.0.1).</span></li>
<li><span class="smalltext">2002-11-14 Major Update (1.1.0/XL2.0) based
on TreeMenu 1.1.0.</span></li>
<li><span class="smalltext">2002-11-08 Update (1.1a) Smarter path handling
on includes. Change image dirnames.</span></li>
<li><span class="smalltext">2002-11-07 New Release (1.1). Add ListboxMenus
and property list interface. Added expansion and highlighting of selected
branches, image size control and style sheet overrides.</span></li>
<li><span class="smalltext">2002-11-02 TreeMenuXL Initial Release (1.0),
based on TreeMenu 1.0.4</span></li>
</ul>
<?php
$nodeProperties = array();
$pgmenu = new HTML_TreeMenuXL();
$pgmenuTop = new HTML_TreeNodeXL("TreeMenuXL Page Contents", "#", $nodeProperties);
$pgmenu->addItem($pgmenuTop);
$nx = &$pgmenuTop->
addItem(new HTML_TreeNodeXL("Introduction to HTML_TreeMenuXL", "#intro", $nodeProperties));
$nx = &$pgmenuTop->
addItem(new HTML_TreeNodeXL("Using HTML_TreeMenuXL", "#chips_version", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("Basic TreeMenus", "#basic", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("TreeMenus With Style", "#style", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("TreeMenus Without Icons", "#noicons", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("Rigid and Expanded TreeMenus", "#rigid", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("Controlling Indenting and Vertical Spacing", "#advanced_spacing", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("LinkSelect, User Images and User Styles", "#advanced_linkselect", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("Listbox Menus", "#listbox", $nodeProperties));
$nx = &$pgmenuTop->addItem(new HTML_TreeNodeXL("History of TreeMenuXL", "#history", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("TreeMenuXL 1.1", "#xl11", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("TreeMenuXL 1.2", "#xl12", $nodeProperties));
$nx->
addItem(new HTML_TreeNodeXL("Summary of New Features in TreeMenuXL", "#summary_of_new_features", $nodeProperties));
$pgmenuTop->addItem(new HTML_TreeNodeXL("HTML_TreeMenu Reference", "#reference", $nodeProperties));
$pgmenuTop->addItem(new HTML_TreeNodeXL("Things To Do", "#thingstodo", $nodeProperties));
$pgmenuTop->addItem(new HTML_TreeNodeXL("TreeMenuXL Source Code", "#sourcecode", $nodeProperties));
// Create the presentation object
$pgmenuTree = &new HTML_TreeMenu_RigidXL($pgmenu, array('images'=>'TMimagesAlt', "defaultClass"=>"auto"));
$pgmenuTree->printMenu();
?>
<p class="smallitalic">Above is a Rigid TreeMenu using default Autostyles,
Alternate navigation graphics, and no icons.</p></td>
</tr>
</table>
<h2>What's Here?</h2>
<p><strong> HTML_TreeMenu </strong>is a wonderful PEAR package by Richard Heyes
for generating dynamic tree menus using PHP. <strong> HTML_TreeMenuXL</strong>
is my enhanced version of HTML_TreeMenu. My enhancements have been intended
to extend its flexibility and fix a few problems, and I've been placed that
Richard has incorporated many of my ideas back into the base package. </p>
<p>This page demonstrates <strong> HTML_TreeMenuXL</strong>, documents its usage,
and offers access to the source code.</p>
<h2><a name="intro"></a>Introduction to HTML_TreeMenuXL</h2>
<p><strong>HTML_TreeMenu</strong> (also referred to as "TreeMenu") is
a PHP component for generating dynamic tree-structured menus. TreeMenu will
generate the appropriate combination of JavaScript and HTML for a collapsible
vertical tree listing that resembles the Windows Explorer folder view. Expandable
elements can be used as links, or they can be expanded. Other menu presentations
are also possible. TreeMenu is a semi-standard, being part of the <a href="http://pear.php.net/" target="_blank"><strong>PEAR</strong></a>
PHP component library since its initial release 2002-06-15. </p>
<p><strong>HTML_TreeMenuXL</strong> is my (Chip Chapin's) enhanced version of
TreeMenu. It is not my objective to create a fork of the <strong>HTML_TreeMenu</strong>
component. As much as possible, the <strong>XL</strong> features are done using
subclasses, and Richard Heyes, the author of TreeMenu, has been very reasonable
about considering my ideas for inclusion in TreeMenu. The extensive changes
he made in TreeMenu 1.1 incorporated many of my ideas at the time, fixed a few
problems, and provided an improved interface which has greatly simplified the
current form of TreeMenuXL. Nevertheless, the current TreeMenuXL release still
requires modified versions of his core TreeMenu.php and TreeMenu.js files.</p>
<p> The original HTML_TreeMenu package consists of two PHP Classes: a <strong><em>TreeMenu</em></strong>
class and a <strong><em>TreeNode</em></strong> class, each with a corresponding
JavaScript class. Menus are built as a hierarchy of tree nodes. With the 1.1
release came the addition of <strong> <em>Presentation</em></strong> classes.
Now the menu and node classes are independent of the actual menu presentation.
This means the same menu object can be used to generate several different types
of menu presentations. More importantly, it is now much easier to add new types
of menus to the TreeMenu package.</p>
<blockquote>
<p> <strong>HTML_TreeMenu Home</strong>: <a href="http://pear.php.net/package-info.php?pacid=77" target="_blank">http://pear.php.net/</a>
and <a href="http://phpguru.org/treemenu.php" target="_blank">http://phpguru.org/treemenu.php</a><br>
Last Updated: 2002-11-10 (v1.1.0) </p>
</blockquote>
<table>
<tr>
<td width="48"> </td>
<td>
<?php
// Create the presentation object
$props = array('images'=>'TMimages', "defaultClass"=>"auto");
$pgmenuDTree = &new HTML_TreeMenu_DHTMLXL($pgmenu, $props);
$pgmenuDTree->printMenu();
?>
</td>
</tr>
<tr>
<td></td>
<td class="smallitalic"> Above is a DHTML TreeMenu using default Autostyles,
standard navigation graphics, and no icons.</td>
</tr>
</table>
<h2><a name="chips_version"></a>Using TreeMenuXL</h2>
<p>The examples in this section illustrate how to use HTML_TreeMenuXL. In some
cases, there may be no significant difference between using TreeMenuXL and using
TreeMenu. However I've stuck with the XL interface for consistency. Whereever
possible, I'll try to point out where something is an XL-only feature.</p>
<h3><a name="basic"></a>Basic TreeMenus</h3>
<p>The basic procedure to create a menu is only three steps:</p>
<ol>
<li>Create a <strong>TreeMenu</strong> object and a tree of <strong>TreeNodes</strong>,
one node for each menu item.</li>
<li>Create a <strong>Presentation</strong> object for the type of menu you wish
to display.</li>
<li>Print it (generate the HTML and JavaScript).</li>
</ol>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td><strong>Menu 1.0<br>
Folder Icon /<br>
Standard Images /<br>
No Styles</strong></td>
<td><strong>Menu 1.1<br>
Folder Icon /<br>
Alt Images<br>
No Styles</strong></td>
<td><strong>Menu 1.2<br>
Folder Icon /<br>
Alt2 Images<br>
No Styles</strong></td>
</tr>
<tr>
<td valign="top">
<?php
// Create the presentation object
$example010 = &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimages"));
$example010->printMenu();
?>
</td>
<td valign="top">
<?php
$example011 = &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimagesAlt"));
$example011->printMenu();
?>
</td>
<td valign="top">
<?php
$example012 = &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimagesAlt2"));
$example012->printMenu();
?>
</td>
</tr>
<tr>
<td colspan="3" valign="top"> <p><strong>Note: </strong>In older browsers,
these menus will be appear <em>fully expanded</em> and will be <em>static.</em>
In newer browsers the menus can be expanded and collapsed by clicking
on the<img src="TMimagesAlt/plus.gif" alt="plus icon" width="20" height="20" align="absmiddle">and<img src="TMimagesAlt/minus.gif" alt="minus icon" width="20" height="20" align="absmiddle">icons
in the tree.</p></td>
</tr>
</table>
<p align="center"><em><strong>Table 1 -- Basic TreeMenus</strong></em></p>
<p><strong>Table 1</strong> shows simple TreeMenus drawn with the "folder"
icons included with the package. It is also possible to specify a custom icon
or no icon for each menu entry. The entries in Table 1 use the three sets of
TreeMenu images supplied by Mr Heyes with the distribution package, which I'll
refer to as the "Standard Images", "Alt Images", and "Alt2
Images". The three sets each include navigation images (line art, plusses
and minusses) and a folder icon. <em>Note that the drawn lines are not visible
in the "Alt Images" version.</em></p>
<p>Below is the PHP code that produced the menus in Table 1. First we create a
TreeMenu object and TreeNodes, then we create a Presentation object, and finally
we generate the menu.</p>
<blockquote>
<p>
<?php
$mcode = ' require_once("TreeMenuXL.php");
// Create the Menu object and the menu tree
$menu00 = new HTML_TreeMenuXL();
$nodeProperties = array("icon"=>"folder.gif");
$node0 = new HTML_TreeNodeXL("INBOX", "#", $nodeProperties);
$nx = &$node0->
addItem(new HTML_TreeNodeXL("A Folder", "#link1", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("Nested Folder", "#link2", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("Deeper ...", "#link3", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("... and Deeper","#link4", $nodeProperties));
$node0->addItem(new HTML_TreeNodeXL("deleted-items", "#link5", $nodeProperties));
$node0->addItem(new HTML_TreeNodeXL("sent-items", "#link6", $nodeProperties));
$node0->addItem(new HTML_TreeNodeXL("drafts", "#link7", $nodeProperties));
$node0->addItem(new HTML_TreeNodeXL("spam", "#link8", $nodeProperties));
$menu00->addItem($node0);
$menu00->addItem(new HTML_TreeNodeXL("My Stuff", "#link9", $nodeProperties));
$menu00->addItem(new HTML_TreeNodeXL("Other Stuff", "#link10", $nodeProperties));
$menu00->addItem($node0);
// Menu 1.0
// Create the presentation object.
// It will generate HTML and JavaScript for the menu
// These statements must occur in your HTML exactly where you want the menu to appear.
$example010 = &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimages"));
$example010->printMenu();
// Menu 1.1
// Create another presentation object from the same menu,
// but using an alternate image directory
$example011 = &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimagesAlt"));
$example011->printMenu();
// Menu 1.2
$example012 = &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimagesAlt2"));
$example012->printMenu();
';
highlight_string( '<'."?php\n" . $mcode . '?'.">\n" );
?>
</p>
</blockquote>
<p>Note that the same TreeMenu object is used to produce each of the menus, only
different presentation objects are created, each with a different image directory.
For now, we will only be working with presentation objects of the class <strong>HTML_TreeMenu_DHTMLXL</strong>.
This is the XL version of the general purpose dynamic tree menu class.</p>
<p>Also, notice that each node is created with a property list. The only property
defined in the list at this time is <strong>icon</strong>, which is the file
name of the icon that will appear just before the node text (in this case, a
file folder).</p>
<p>The HTML_TreeMenu package generates JavaScript code which dynamically creates
and controls the menu on the client. There is one supporting JavaScript file
which must be included in web pages that use the package as follows:</p>
<blockquote>
<pre><script src="TreeMenu.js" language="JavaScript" type="text/javascript"></script><br></pre>
</blockquote>
<h3><a name="style"></a>TreeMenus With Style</h3>
<p>Next, let's look at how one can use CSS (Cascading Style Sheets) classes to
control the appearance of the different menu levels.</p>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td><strong>Menu 1.0<br>
Folder Icon /<br>
Standard Images /<br>
No Styles</strong></td>
<td><strong>Menu 2.1<br>
Folder Icon /<br>
Standard Images /<br>
Default Styles</strong></td>
<td><strong>Menu 2.2<br>
Folder Icon /<br>
Standard Images /<br>
User Styles</strong></td>
</tr>
<tr>
<td valign="top">
<?php // Menu 1.0
$example010->printMenu();
?>
</td>
<td valign="top">
<?php // Menu 2.1
$menuProperties = array("images"=>"TMimages", "defaultClass"=>'auto');
$example021 = &new HTML_TreeMenu_DHTMLXL($menu00, $menuProperties);
$example021->printMenu();
?>
</td>
<td valign="top">
<?php // Menu 2.2
$menuProperties = array("images"=>"TMimages", "defaultClass"=>'auto',
"autostyles"=>array("smalltextBold", "smallitalic", "smalltext") );
$example022 = &new HTML_TreeMenu_DHTMLXL($menu00, $menuProperties);
$example022->printMenu();
?>
</td>
</tr>
</table>
<p align="center"><em><strong>Table 2 -- TreeMenus With Style</strong></em></p>
<p>In <strong>Table 2</strong> Menu 1.0 appears again for comparison. Menus 2.1
and 2.2 are drawn using the <strong>AutoStyle</strong> feature. Expand the branches
of Menu 2.1 or 2.2 and observe how the text style is different at different
levels. The Auto Style feature assigns default CSS styles to the different levels
of the menu. Menu 2.1 uses the default styles, while we've assigned a list of
user styles for Menu 2.2. </p>
<p>Below is the PHP code that produced Menus 2.1 and 2.2. </p>
<blockquote>
<p>
<?php
$mcode = ' // Menu 1.0
$example010->printMenu(); // The Presentation object already exists, just print it.
// Menu 2.1
$menuProperties = array("images"=>"TMimages", "defaultClass"=>"auto");
$example021 = &new HTML_TreeMenu_DHTMLXL($menu00, $menuProperties);
$example021->printMenu();
// Menu 2.2
$menuProperties = array("images"=>"TMimages", "defaultClass"=>"auto",
"autostyles"=>array("smalltextBold", "smallitalic", "smalltext") );
$example022 = &new HTML_TreeMenu_DHTMLXL($menu00, $menuProperties);
$example022->printMenu();
';
highlight_string( '<'."?php\n" . $mcode . '?'.">\n" );
?>
</p>
</blockquote>
<p>First of all, we continue to use the same TreeMenu object for all these menus.
We already have a Presentation object for Menu 1.0, so we just used it to generate
another menu. For Menu 2.1, notice that the property <strong>defaultClass</strong>
is set to <strong>auto</strong> when we create the Presentation object. This
sets the default CSS class for every node. This could be the name of an actual
CSS class, but the word "auto" is special: it means that the actual
CSS class used for each node will be selected automatically, based on that node's
level in the tree.</p>
<p>This should become more clear from Menu 2.2. This time, besides setting the
defaultClass property, we also set the <strong>autostyles</strong> property.
Autostyles controls the list of automatic styles used in Menu 2.2.</p>
<p>By default, autostyles lists four menu level styles that are defined in the
standard TreeMenuXL style sheet: <tt>tmenu0text</tt>, <tt>tmenu1text</tt>, <tt>tmenu2text</tt>
and <tt>tmenu3text</tt>. Why only four? What happens if one has five levels?
Menu levels deeper than the number of auto styles are given the deepest defined
auto style (<tt>tmenu3text</tt> in this case).</p>
<p>The standard HTML_TreeMenu style sheet is shown below. It can be included either
as a link or directly in your document. The style sheet includes control over
link appearance as well. Since all menu items are links, this can be important.</p>
<blockquote>
<pre>
<?php
readfile('TreeMenu.css');
?>
</pre>
</blockquote>
<h3><a name="noicons"></a>TreeMenus Without Icons</h3>
<p>It is possible to specify the icon associated with each menu item, or no icon
at all. So far, all of our example menus have been generated with a folder icon
(<img src="TMimages/folder.gif" alt="folder icon" width="20" height="20" align="absmiddle">
or <img src="TMimagesAlt/folder.gif" alt="folder icon" width="20" height="20" align="absmiddle">)assigned
to each item, but this is very easy to change.</p>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td><strong>Menu 1.0<br>
Folder Icon /<br>
Standard Images /<br>
No Styles</strong></td>
<td><strong>Menu 3.1<br>
No Icons /<br>
Standard Images /<br>
Default Styles</strong></td>
<td><strong>Menu 3.2<br>
No Icons /<br>
Alt Images /<br>
Default Styles</strong></td>
</tr>
<tr>
<td valign="top">
<?php
$example010->printMenu();
?>
</td>
<td valign="top">
<?php
// Menu 3.1
$example031 = &new HTML_TreeMenu_DHTMLXL($menu03, array("images"=>"TMimages"));
$example031->printMenu();
?>
</td>
<td valign="top">
<?php
// Menu 3.2
$example032 = &new HTML_TreeMenu_DHTMLXL($menu03, array("images"=>"TMimagesAlt"));
$example032->printMenu();
?>
</td>
</tr>
</table>
<p align="center"><em><strong>Table 3 -- TreeMenus With No Icons</strong></em></p>
<p><strong>Table 3</strong> shows TreeMenus with no icons (Menu 1.0 is included
again for comparison). As you can see, "no icons" means here that
there is no longer a little folder icon <img src="TMimages/folder.gif" alt="folder icon" width="20" height="20" align="absmiddle">
associated with each item. Unless you're using an older browser, you'll notice
that the menus still include the navigation graphics, such as<img src="TMimagesAlt/plus.gif" alt="plus icon" width="20" height="20" align="absmiddle">and<img src="TMimagesAlt/minus.gif" alt="minus icon" width="20" height="20" align="absmiddle">.
We shall see later on how to eliminate all the navigation graphics.</p>
<p>The PHP code for Menus 3.1 and 3.2 is shown below. We first have to create
a new TreeMenu object where each node has no icon -- icons are properties of
the TreeNodes.</p>
<blockquote>
<p>
<?php
$mcode = ' // Menu03 -- The nodes are created without icons.
$nodeProperties = array("cssClass"=>"auto");
$menu03 = new HTML_TreeMenuXL();
$node03 = new HTML_TreeNodeXL("INBOX", "#", $nodeProperties);
$nx = &$node03->
addItem(new HTML_TreeNodeXL("A Folder", "#link1", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("Nested Folder", "#link2", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("Deeper ...", "#link3", $nodeProperties));
$nx = &$nx->
addItem(new HTML_TreeNodeXL("... and Deeper", "#link4", $nodeProperties));
$node03->addItem(new HTML_TreeNodeXL("deleted-items", "#link5", $nodeProperties));
$node03->addItem(new HTML_TreeNodeXL("sent-items", "#link6", $nodeProperties));
$node03->addItem(new HTML_TreeNodeXL("drafts", "#link7", $nodeProperties));
$node03->addItem(new HTML_TreeNodeXL("spam", "#link8", $nodeProperties));
$menu03->addItem($node03);
$menu03->addItem(new HTML_TreeNodeXL("My Stuff", "#link9", $nodeProperties));
$menu03->addItem(new HTML_TreeNodeXL("Other Stuff", "#link10", $nodeProperties));
$menu03->addItem($node03);
// Menu 3.1
$example031 = &new HTML_TreeMenu_DHTMLXL($menu03, array("images"=>"TMimages"));
$example031->printMenu();
// Menu 3.2
$example032 = &new HTML_TreeMenu_DHTMLXL($menu03, array("images"=>"TMimagesAlt"));
$example032->printMenu();
';
highlight_string( '<'."?php\n" . $mcode . '?'.">\n" );
?>
</p>
</blockquote>
<p>Comparing this code to the tree creation code for Menu 1.0 and other previous
menus, you should notice that the <strong>icon</strong> property has <em>not</em>
been set in <tt>$nodeProperties</tt> and is therefore not set in each TreeNode
as it is created. If <strong>icon</strong> is not set, or is null, then no icon
appears for that node. </p>
<h3><a name="rigid"></a>Rigid and Expanded TreeMenus</h3>
<p>Sometimes one does not want the menu to be expandable and collapsible. I call
such static menus <em><strong>Rigid</strong></em>, and introduced them as another
extension to the original package. In fact, it is possible to generate such
a menu entirely on the server -- it does not require any JavaScript on the client.
In TreeMenu 1.1 Richard Heyes added a feature to the JavaScript that achieves
the same result, but which does depend on JavaScript. Since I had already written
the code to statically generate the menu on the server, you now have your choice
between the two methods. </p>
<p>Another option is an <strong>Expanded</strong> menu, which is still dynamic,
but which is fully expanded when it first appears. It's not clear whether this
has any practical value...</p>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td><strong>Menu 4.1<br>
Folder Icon /<br>
Standard Images /<br>
No Styles /<br>
Expanded </strong></td>
<td><strong>Menu 4.2<br>
Folder Icon /<br>
Standard Images /<br>
No Styles /<br>
Not Dynamic</strong></td>
<td><strong>Menu 4.3<br>
Folder Icon /<br>
Standard Images /<br>
No Styles /<br>
Rigid </strong></td>
<td><strong>Menu 4.4<br>
Folder Icon /<br>
Alt Images /<br>
No Styles /<br>
Rigid </strong></td>
</tr>
<tr>
<td valign="top">
<?php // Menu 4.1
$example041 = &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimages", "expanded"=>true, "defaultClass"=>"smalltext"));
$example041->printMenu();
?>
</td>
<td valign="top">
<?php // Menu 4.2
$example042= &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimages", "isDynamic"=>false, "defaultClass"=>"smalltext"));
$example042->printMenu();
?>
</td>
<td valign="top">
<?php // Menu 4.3
$example043 = &new HTML_TreeMenu_RigidXL($menu00, array("images"=>"TMimages", "defaultClass"=>"smalltext"));
$example043->printMenu();
?>
</td>
<td valign="top">
<?php // Menu 4.4
$example044 = &new HTML_TreeMenu_RigidXL($menu00, array("images"=>"TMimagesAlt", "defaultClass"=>"smalltext"));
$example044->printMenu();
?>
</td>
</tr>
</table>
<p align="center"><em><strong>Table 4 -- Rigid and Expanded TreeMenus</strong></em></p>
<p>In <strong>Table 4</strong> above, Menu 4.1 is our original Menu 1.0, now set
to be <em><strong>Expanded</strong></em>. It appears fully expanded, but still
has navigation graphics and can be collapsed.</p>
<p>Menu 4.2 is the same menu again, but this time with the property <em><strong>isDynamic</strong>
set to <strong>false</strong></em>. This causes the client JavaScript to produce
a rigid menu. </p>
<p>Menus 4.3 and 4.4 are also rigid, but they are produced using a different presentation
class: <strong>HTML_TreeMenu_RigidXL</strong>. There should be no difference
in the appearance of Menu 4.2 and Menu 4.3.</p>
<p>The PHP code which produced these menus is as follows:</p>
<blockquote>
<p>
<?php
$mcode = ' // Menu 4.1
$example041 = &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimages", "expanded"=>true, "defaultClass"=>"smalltext"));
$example041->printMenu();
// Menu 4.2
$example042= &new HTML_TreeMenu_DHTMLXL($menu00, array("images"=>"TMimages", "isDynamic"=>false, "defaultClass"=>"smalltext"));
$example042->printMenu();
// Menu 4.3
$example043 = &new HTML_TreeMenu_RigidXL($menu00, array("images"=>"TMimages", "defaultClass"=>"smalltext"));
$example043->printMenu();
// Menu 4.4
$example044 = &new HTML_TreeMenu_RigidXL($menu00, array("images"=>"TMimagesAlt", "defaultClass"=>"smalltext"));
$example044->printMenu();
';
highlight_string( '<'."?php\n" . $mcode . '?'.">\n" );
?>
</p>
</blockquote>
<p>One other thing to observe from Table 4 is the use of <strong>defaultClass</strong>
to make all the text smaller.</p>
<h3><a name="advanced_spacing" id="advanced_spacing"></a>Controlling Indenting
and Vertical Spacing</h3>
<h4>The Problem: Embedded Images</h4>
<p>You might have noticed that all our menus up until now have the same vertical
spacing. The line for each menu entry is the same height no matter how small
the font is. The reason is that, up until now, each of our menu entries has
contained 20x20 graphic elements on the line, sometimes invisibly. </p>
<p>All of the folder icons, navigation buttons, line elements, and even the "invisible
lines" in the Alt Images are 20x20 images. But if we can finally remove
all graphic elements, the line spacing will be determined by the style and text
content for that line.</p>
<p>The same observation can be made about the indenting of each line. Until now,
each menu line is indented by some multiple of 20 pixels, since the indenting
is controlled by the number of graphic elements at the start of each line. If
we want any different indenting we will either have to remove the graphic elements
or find a way to use different sizes.</p>
<h4>Getting Rid of Navigation Images</h4>
<p>We already know that icons are only included if we ask for them. And we can
easily get ride of the navigation buttons and lines by setting the "images"
property to null. But watch out! If your menu has no nav buttons then you won't
be able to expand it. So you should generate a rigid menu. </p>
<p>So, to entirely eliminate graphics from a tree menu it should have the following
properties:</p>
<ul>
<li>rigid (either using HTML_TreeMenu_RigidXL or using 'isDynamic'=>false
with HTML_TreeMenu_DHTMLXL)</li>
<li>no icon ("icon"=>null)</li>
<li>no navigation elements ("images"=>null)</li>
</ul>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td><strong>Menu 5.1<br>
No Icons /<br>
Standard Images /<br>
Default Styles /<br>
Rigid </strong></td>
<td><strong>Menu 5.2<br>
No Icons /<br>
Alt Images /<br>
Default Styles /<br>
Rigid</strong></td>
<td><strong>Menu 5.3<br>
No Icons /<br>
XL Images /<br>
Default Styles /<br>
Rigid</strong></td>
<td><strong>Menu 5.4<br>
No Icons /<br>
No Images /<br>
Default Styles /<br>
Rigid </strong></td>
</tr>
<tr>
<td valign="top">
<?php // Menu 5.1
$example051 = &new HTML_TreeMenu_RigidXL($menu03, array("images"=>"TMimages"));
$example051->printMenu();
?>
</td>
<td valign="top">
<?php // Menu 5.2
$example052 = &new HTML_TreeMenu_RigidXL($menu03, array("images"=>"TMimagesAlt"));
$example052->printMenu();
?>
</td>
<td valign="top">
<?php // Menu 5.3
$menuProperties = array("images"=>"TMimagesXL", "lineImageHeight"=>16, "lineImageWidth"=>10);
$example053 = &new HTML_TreeMenu_RigidXL($menu03, $menuProperties);
$example053->printMenu();
?>
</td>
<td valign="top">
<?php // Menu 5.4
$example054 = &new HTML_TreeMenu_RigidXL($menu03, array("images"=>""));
$example054->printMenu();
?>
</td>
</tr>
</table>
<p align="center"><em><strong>Table 5 -- Rigid TreeMenus With No Icons</strong></em></p>
<p><strong>Table 5</strong> shows several rigid menus with no icons, showing the
effect of various different line graphics sets. <em>Only <strong>Menu 5.4</strong>
is complete free of graphic images.</em> Notice that the line spacing is controlled
by the font size for each menu entry. The indenting, in the absence of any graphics,
is done with two "<em><strong>&nbsp;</strong></em>" entities for
each level. </p>
<p>In <strong>Menu 5.1</strong> you can see the line graphics that are part of
the standard images. These 20x20 images control the line spacing and the indenting.
<strong>Menu 5.2</strong> has the same line spacing and indenting, controlled
by the invisible 20x20 Alt images. </p>
<p><strong>Menu 5.3</strong>, however, introduces something new. It uses a set
of "XL Images" and introduces a new set of properties for controlling
image size: <strong>lineImageWidth</strong> and <strong>lineImageHeight</strong>.
</p>
<p>Here is the code for producing all the menus in Table 5.</p>
<blockquote>
<p>
<?php
$mcode = ' // Menu 5.1
$example051 = &new HTML_TreeMenu_RigidXL($menu03, array("images"=>"TMimages"));
$example051->printMenu();
// Menu 5.2
$example052 = &new HTML_TreeMenu_RigidXL($menu03, array("images"=>"TMimagesAlt"));
$example052->printMenu();
// Menu 5.3
$menuProperties = array("images"=>"TMimagesXL", "lineImageHeight"=>16, "lineImageWidth"=>10);
$example053 = &new HTML_TreeMenu_RigidXL($menu03, $menuProperties);
$example053->printMenu();
// Menu 5.4
$example054 = &new HTML_TreeMenu_RigidXL($menu03, array("images"=>""));
$example054->printMenu();
';
highlight_string( '<'."?php\n" . $mcode . '?'.">\n" );
?>
</p>
</blockquote>
<p>Take a look at the code for Menu 5.3. The property setting <tt>"images"=>"TMimagesXL"</tt>
selects the "XL Images" set. The property settings <tt>"lineImageHeight"=>16,
"lineImageWidth"=>10</tt> set the sizes that will be used for all
the navigation images.</p>
<p>The XL Images set includes transparent 1x1 GIF spacers for all the navigation
images. These can be used at any size, so one has complete freedom in setting
their height and width. In Menu 5.3 the line images are set to be 10 pixels
wide and 16 pixels high. The result is a menu in which the minimum line height
is 16 pixels, and the indentation width is 10 pixels.</p>
<h3><a name="advanced_linkselect"></a>LinkSelect, User Images and User Styles</h3>
<h4>User Images</h4>
<p>They don't appear in Menu 5.3, but included in the "XL Images" are
a set of 12x9 navigation buttons (12 pixels wide, 9 pixels high). By "navigation
button" I mean the <img src="/MenuTools/HTML_TreeMenuXL/TMimagesXL/plus.gif" width="12" height="9" align="absmiddle">
and <img src="/MenuTools/HTML_TreeMenuXL/TMimagesXL/minus.gif" width="12" height="9" align="absmiddle">
buttons. Navigation button sizes are also controlled using <strong>lineImageWidth</strong>
and <strong>lineImageHeight</strong>, so 12x9 will be the correct settings if
you want to use these particular images in a dynamic menu. If you use the wrong
size you will get distortion, like this: <img src="/MenuTools/HTML_TreeMenuXL/TMimagesXL/plus.gif" width="16" height="16" align="absmiddle">.</p>
<p> The important point here is not really the sizes of the XL Images, but that
you can create your own images. You just have to pay attention to the size.</p>
<h4>LinkSelect</h4>
<p>Another new feature in TreeMenuXL is <em><strong>LinkSelect</strong></em> which
allows you to dynamically expand and highlight one (or more) of the menu nodes.
Set the <strong>linkSelectKey</strong> property to a string that will match
one of the link targets in the menu. Then any menu item with a link target that
matches the <strong>linkSelectKey</strong> value will be highlighted and its
branch will be expanded. <strong>linkSelectKey</strong> can also be set to an
array of values.</p>
<p>We have already discussed User Styles and given an example in Menu 2.2. Here
they are combined with the other features to produce a custom menu.</p>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td><strong>Menu 6.1<br>
No Icons /<br>
XL Images /<br>
Default Styles</strong></td>
<td><strong>Menu 6.2<br>
No Icons /<br>
XL Images /<br>
Default Styles /<br>
LinkSelect </strong></td>
<td><strong>Menu 6.3<br>
No Icons /<br>
XL Images /<br>
User Styles /<br>
LinkSelect </strong></td>
</tr>
<tr>
<td valign="top">
<?php // Menu 6.1
$menuProperties = array("images"=>"TMimagesXL",
"lineImageHeight"=>9, "lineImageWidth"=>12 );
$example061 = &new HTML_TreeMenu_DHTMLXL($menu03, $menuProperties);
$example061->printMenu();
?>
</td>
<td valign="top">
<?php // Menu 6.2
$menuProperties = array("images"=>"TMimagesXL",
"lineImageHeight"=>9, "lineImageWidth"=>12,
"linkSelectKey"=>"#link5" );
$example062 = &new HTML_TreeMenu_DHTMLXL($menu03, $menuProperties);
$example062->printMenu();
$menu03->unsetProperties( array("selected", "expanded") );
?>
</td>
<td valign="top">
<?php // Menu 6.3
$menuProperties = array("images"=>"TMimagesXL",
"lineImageHeight"=>9, "lineImageWidth"=>12,
"linkSelectKey"=>"#link3",
"autostyles"=>array("smalltextBold", "smallitalic", "smalltext", "xsmalltext") );
$example063 = &new HTML_TreeMenu_DHTMLXL($menu03, $menuProperties);
$example063->printMenu();
$menu03->unsetProperties( array("selected", "expanded") );
?>
</td>
</tr>
</table>
<p align="center"><em><strong>Table 6 -- Dynamic TreeMenus with LinkSelect, User
Images and User Styles</strong></em></p>
<p>All the menus in <strong>Table 6</strong> illustrate the use of the XL images.
In each case <strong>lineImageWidth</strong> and <strong>lineImageHeight</strong>
are set to 12 and 9 respectively to match the size of the navigation icons.
Menus 6.2 and 6.3 use <strong>LinkSelect</strong> to expand and highlight certain
menu entries.</p>
<p>The full code for Table 6 is shown below. This also shows how to "unset"
certain menu properties.</p>
<blockquote>
<p>
<?php
$mcode = ' // Menu 6.1
$menuProperties = array("images"=>"TMimagesXL",
"lineImageHeight"=>9, "lineImageWidth"=>12 );
$example061 = &new HTML_TreeMenu_DHTMLXL($menu03, $menuProperties);
$example061->printMenu();
// Menu 6.2
$menuProperties = array("images"=>"TMimagesXL",
"lineImageHeight"=>9, "lineImageWidth"=>12,
"linkSelectKey"=>"#link5" );
$example062 = &new HTML_TreeMenu_DHTMLXL($menu03, $menuProperties);
$example062->printMenu();
$menu03->unsetProperties( array("selected", "expanded") );
// Menu 6.3
$menuProperties = array("images"=>"TMimagesXL",
"lineImageHeight"=>9, "lineImageWidth"=>12,
"linkSelectKey"=>"#link3",
"autostyles"=>array("smalltextBold", "smallitalic", "smalltext", "xsmalltext") );
$example063 = &new HTML_TreeMenu_DHTMLXL($menu03, $menuProperties);
$example063->printMenu();
$menu03->unsetProperties( array("selected", "expanded") );
';
highlight_string( '<'."?php\n" . $mcode . '?'.">\n" );
?>
</p>
</blockquote>
<p>The TreeMenu member function <tt>unsetProperties()</tt> is used in Table 6
for the first time. But you will probably never need it. I use it here to clean
up the TreeNodes after the effect of LinkSelect so I can use the TreeMenu again
in these examples.</p>
<h3><a name="listbox"></a>Listbox Menus</h3>
<p>I became interested in <strong>HTML_TreeMenu</strong> because I wanted to replace
my previous menu system. One feature of my old code was that, in addition to
a tree structured menu, I could use it to generate a Listbox to perform the
same function. I like to use these Listboxes in the page footer, and sometimes
elsewhere. As of HTML_TreeMenu 1.1, a listbox presentation class is included
in the package. However there were still some features that I wanted which it
lacked, and so I have an extended HTML_TreeMenu_ListboxXL presentation class.</p>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td><strong>Listbox 1<br>
Standard Listbox: HTML_TreeMenu_Listbox</strong></td>
</tr>
<tr>
<td>
<?php
$lbox01 = &new HTML_TreeMenu_Listbox($menu00);
$lbox01->printMenu();
?>
</td>
</tr>
</table>
<p align="center"><em><strong>Table 7 -- Standard Listbox</strong></em></p>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td colspan="2"><strong>Listbox 2<br>
Extended Listbox: HTML_TreeMenu_ListboxXL</strong></td>
</tr>
<tr>
<td class="smalltext">Default Listbox Style Class (tmlistbox)</td>
<td>
<?php
$lbox021 = &new HTML_TreeMenu_ListboxXL($menu00);
$lbox021->printMenu();
?>
</td>
</tr>
<tr>
<td class="smalltext">No Listbox Style Class</td>
<td>
<?php
$lbox022 = &new HTML_TreeMenu_ListboxXL($menu00, array('cssClass'=>""));
$lbox022->printMenu();
?>
</td>
</tr>
<tr>
<td class="smalltext">User Listbox Style Class (xsmalltext)</td>
<td>
<?php
$lbox023 = &new HTML_TreeMenu_ListboxXL($menu00, array('cssClass'=>'xsmalltext'));
$lbox023->printMenu();
?>
</td>
</tr>
</table>
<p align="center"><em><strong>Table 8 -- Extended Listbox with Styles</strong></em></p>
<p align="left">All of the Listboxes in Tables 7 and 8 are generated from the
same menu object as Menu 1.0. But a new Presentation class is used.. <strong>Table
7</strong> uses the standard TreeMenu listbox while <strong>Table 8</strong>
uses the XL extended Listbox class. The code is shown below:</p>
<blockquote>
<p>
<?php
$mcode = ' // Listbox 1
$lbox01 = &new HTML_TreeMenu_Listbox($menu00);
$lbox01->printMenu();
// Listbox 2.1
$lbox021 = &new HTML_TreeMenu_ListboxXL($menu00);
$lbox021->printMenu();
// Listbox 2.2
$lbox022 = &new HTML_TreeMenu_ListboxXL($menu00, array("cssClass"=>""));
$lbox022->printMenu();
// Listbox 2.3
$lbox023 = &new HTML_TreeMenu_ListboxXL($menu00, array("cssClass"=>"xsmalltext"));
$lbox023->printMenu();
';
highlight_string( '<'."?php\n" . $mcode . '?'.">\n" );
?>
</p>
</blockquote>
<p align="left">The current advantages of the XL listbox are that it offers control
over the CSS class within the form, supports pre-selection of an option, and
allows a bit more flexibility in the appearance of the options themselves. Some
or all of these features may migrate into the standard class in the future.</p>
<h4>Why the 'Go' Button? Why not use 'onChange'? </h4>
<p>Someone will ask, "Why the 'Go' button? Why not use 'onChange' and save
a click?" The reason is that onChange in select boxes is often a disaster
for people with wheel mice. Just imagine scrolling down a page and suddenly
twirling the selection inadvertently. Then off you go. Just forget about it.</p>
<h4>Listboxes With Bullets</h4>
<p>The XL listbox class supports a bullet format within the list. To use it, set
the property <strong>useBullets</strong> to true. You may wish to also set <strong>indentNum</strong>
to 1 in order to avoid excessive indenting.</p>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td><strong>Listbox 3<br>
Listbox With Bullets</strong></td>
</tr>
<tr>
<td>
<?php
$mprops = array("useBullets"=>true, "indentNum"=>1);
$lbox03 = &new HTML_TreeMenu_ListboxXL($menu00, $mprops);
$lbox03->printMenu();
?>
</td>
</tr>
</table>
<p align="center"><em><strong>Table 9 -- Extended Listbox</strong></em></p>
<p>Below is the code for <strong>Table 9</strong>:</p>
<blockquote>
<p>
<?php
$mcode = ' $mprops = array("useBullets"=>true, "indentNum"=>1);
$lbox03 = &new HTML_TreeMenu_ListboxXL($menu00, $mprops);
$lbox03->printMenu();
';
highlight_string( '<'."?php\n" . $mcode . '?'.">\n" );
?>
</p>
</blockquote>
<p>The list of bullet formats is set using property <strong>bulletStyles</strong>,
an array. For more information see the property descriptions below.</p>
<h4>Pre-Selecting Listbox Options</h4>
<p>When I use a listbox for navigation I like to preselect the option corresponding
to my current location. The XL Listbox class will do this using the <strong>linkSelectKey</strong>
property, just like the TreeMenu presentation class. To illustrate, here's a
more useful example: the Table of Contents for this document.</p>
<table border="1" align="center" cellpadding="4" cellspacing="1">
<tr>
<td><strong>Listbox Menu 4<br>
Table of Contents</strong></td>
</tr>
<tr>
<td>
<?php // Listbox 4
$mprops = array("useBullets"=>true, "indentNum"=>1, "linkSelectKey"=>"#listbox");
$lbox04 = &new HTML_TreeMenu_ListboxXL($pgmenu, $mprops);
$lbox04->printMenu();
?>
</td>
</tr>
</table>
<p align="center"><em><strong>Table 10 -- Table of Contents Listbox, using linkSelectKey</strong></em></p>
<p>Try it! The code Listbox 4 is below:</p>
<blockquote>
<p>
<?php
$mcode = ' // Listbox 4
$mprops = array("useBullets"=>true, "indentNum"=>1, "linkSelectKey"=>"#listbox");
$lbox04 = &new HTML_TreeMenu_ListboxXL($pgmenu, $mprops);
$lbox04->printMenu();
';
highlight_string( '<'."?php\n" . $mcode . '?'.">\n" );
?>
</p>
</blockquote>
<h4>ListboxXL Properties</h4>
<dl>
<dt><strong>cssClass</strong></dt>
<dd>The text style of the listBox is controlled by the property <strong>cssClass</strong>,
which by default is set to "tmlistbox". cssClass will be used to
set the class of the SELECT and INPUT elements. Note: I've usually found it
necessary to adjust the font sizes on different browsers to get a consistent
appearance. Set cssClass to the empty string if you don't want any classes
set.<br>
(XL only)</dd>
<dt><strong>indentChar</strong></dt>
<dd>Actually a string, not just a character. It will be used for indentation
on each line. Defaults to "&nbsp;"<br>
(standard)</dd>
<dt><strong>indentNum</strong></dt>
<dd>The number of times indentChar is repeated for each indentation level. So,
<tt>array("indentChar"=>"&nbsp;", "indentNum"=>2)</tt>
would result in each indentation level being two spaces (<tt>&nbsp;&nbsp;</tt>).
Default value is 2.<br>
(standard)</dd>
<dt><strong>promoText</strong></dt>
<dd>If set, this text will appear as the first option in the list. In the standard
listbox class this defaults to "Select...". In the XL class this
defaults to null. <br>
(standard)</dd>
<dt><strong>bulletStyles</strong></dt>
<dd>An array of strings that can be used as part of the leading in addition
to the indentChar. This allows you to put different sorts of bullets in front
of menu entries at different levels. Default is currently <tt>array('', '&#8226;
', '-- ', '&nbsp;- ', '&nbsp;')</tt>. <br>
(XL only)</dd>
<dt><strong>useBullets</strong></dt>
<dd>True/false, controls whether or not to use the bulletStyles. Default is
false. <br>
(XL only)</dd>
<dt><strong>linkSelectKey</strong></dt>
<dd>Works in much the same way as for the TreeMenu presentation classes. Matching
menu nodes (ideally there should be only one match) will have the "selected"
attribute added to their OPTION element, so that it will be pre-selected in
the listbox.<br>
(XL only)</dd>
</dl>
<p> </p>
<h2><a name="history" id="history"></a>TreeMenuXL History</h2>
<h3><a name="xl11"></a>TreeMenuXL 1.1 (1.0.4/XL1.1)</h3>
<p>When I began working with TreeMenu 1.0.4, I found the following issues:</p>
<blockquote>
<ul>
<li>It made Netscape 4.x browsers very sick.</li>
<li>Use of multiple menus on a page was clumsy.</li>
<li>Multiple copies on a page of the same menu were not supported.</li>
<li>Very limited control over menu appearance.</li>
</ul>
</blockquote>
<p>I wanted greater built-in control over the menu appearance, and I wanted to
produce different kinds of menu representations, such as listboxes, in addition
to the trees. Part of my solution to the Netscape 4.x problem was to add the
capability of statically generating menus, instead of depending entirely on
client-side JavaScript for this function.</p>
<p>In addition to providing solutions for these problems, TreeMenuXL 1.1 offered
a number of new features: The Style extension for using CSS classes with menu
nodes, Menus without images, Listbox Menus, Rigid and Expanded menus, the property
list interface, image size control, expansion and highlighting of selected branches
(linkSelect). </p>
<h3><a name="xl12"></a>TreeMenuXL 2.0 (1.1.0/XL2.0)</h3>
<p> Richard Heyes' release of TreeMenu 1.1.0 contains solutions for most of the
issues that I had with TreeMenu 1.0.4, and in several cases adopts my ideas
(while generally improving on the implementation). This greatly simplifies the
code for TreeMenuXL, and so the XL 2.0 release is a reimplementation using the
new TreeMenu 1.1.0 base.</p>
<p>XL 2.0 still offers a number of benefits over the current TreeMenu 1.1.0, including
Menu-independent assignment of Presentation properties, more usable Style interface,
menus without images, more-flexible listbox menus, statically generated Rigid
menus, flexible node creation interface using both positional parameters and
property list array, image size control, expansion and highlighting of selected
branches (linkSelect).</p>
<h3><a name="summary_of_new_features" id="summary_of_new_features"></a>Summary
of New Features in TreeMenuXL</h3>
<p><em>This section is current as of TreeMenu 1.0.4 and TreeMenuXL 1.1. It has
not yet been entirely updated for TreeMenu 1.1.0 and TreeMenuXL 2.0.</em></p>
<p>What features are in TreeMenuXL that aren't in the current TreeMenu release?</p>
<dl>
<dt><strong>Styles for Menu Nodes</strong></dt>
<dd>The <strong>Style</strong> extension supports the use of style sheets (CSS)
to control the appearance of menu entries. It has an automatic mode that assigns
standard styles to different levels of the menu tree. It possible to override
the standard styles in a variety of ways.</dd>
<dt> </dt>
<dt><strong>Menus without Images</strong></dt>
<dd>In its original form, HTML_TreeMenu always uses 20x20 graphic elements in
the generated menus, though they may be invisible. This constrains the layout
of menu. HTML_TreeMenuXL currently provides <em>limited</em> support for menus
without images.</dd>
<dt> </dt>
<dt><strong>Listbox Menus</strong></dt>
<dd>A new output option is available for statically generating HTML listboxes
from a menu object. The extended Listbox class offers control over the CSS
class within the form, supports pre-selected options, and allows greater flexibility
in the appearance of the options themselves.</dd>
<dt> </dt>
<dt><strong>Rigid and Expanded Menus</strong></dt>
<dd>My solution to the Netscape 4.x problem was to perform server-side browser
detection and generate static menus on the server for older browsers. Once
the code was in place for doing this, it was easy to add the <strong>Rigid
Menu</strong> feature. I have also extended the Expanded Branch function in
the original package so that it's easier to create a dynamic menu that starts
out fully expanded.</dd>
<dt> </dt>
<dt><strong>Property List Interface</strong></dt>
<dd>Along with these extensions has come a proliferation of new menu properties
that need to be controlled. Rather than multiply the argument lists of the
class functions, most behavior is now controlled using property lists.</dd>
<dt> </dt>
<dt><strong>Image Size Control</strong></dt>
<dd>The sizes of line and icon graphics is no longer limited to 20x20.</dd>
<dt> </dt>
<dt><strong>Expansion and Highlighting of Selected Branches (LinkSelect)</strong></dt>
<dd>HTML_TreeMenuXL will automatically expand the branches containing nodes
that match certain criteria (for example, of the current page), and can highlight
the selected nodes.</dd>
<dt> </dt>
</dl>
<h2></h2>
<h2><a name="reference"></a>HTML_TreeMenu Reference</h2>
<p><em>To Be Added</em>... Intended to be a concise summary of the interface and
property settings.</p>
<h2><a name="thingstodo"></a>Things To Do</h2>
<p>This section is my personal list of further work to be done on my version of
the HTML_TreeMenu package. Remember, Richard Heyes is the original author and
maintainer of HTML_TreeMenu, and he will undoubtedly have different priorities.
No assumptions should be made regarding when or if any of these enhancements
will be completed, or when they will be merged into Heyes' official version
of this package.</p>
<ul>
<li><tt>lineImageHeight</tt> and <tt>lineImageWidth</tt> might be renamed <tt>navImageHeight</tt>
& <tt>-Width</tt>.</li>
<li>Replace current <tt>images</tt> property (image directory) with two properties,
one for navigation graphics and one for icons.</li>
<li>Currently, <tt>HTML_TreeMenu</tt> does not generate validated HTML. Need
to replace the <nobr>...</nobr> tag and add alt strings to all
images.</li>
<li>Document the <strong>brOK</strong> property.</li>
<li>Write the Reference section.</li>
<li>This page is kind of long. Could be split into a multi-page document.</li>
<li><strong><em>Done</em></strong><em> (XL1.0)</em> Support the use of different
style rules for different menus on the same page.</li>
<li><em><strong><em>Done</em></strong> (XL1.1) </em>Support the use of icons
and navigation images that are sizes other than 20x20.
<ul>
<li>Provide an image set that's smaller than 20x20.</li>
<li>Replace the blank images in 'TMimagesAlt' by 1x1 spacer images.</li>
</ul>
</li>
<li><em><strong>Done</strong> (XL1.1)</em> Menu generation as an HTML Listbox.
</li>
<li> <em><strong>Done</strong></em> <em>(XL1.1)</em> Change the constructor
and printMenu interface to use property lists instead of the current argument
lists. </li>
<li><em><strong>Done</strong> (Richard did this in TreeMenu 1.1)</em> Currently
the menu tree structure and the menu representation are handled by the same
class (HTML_TreeMenuXL). I'm considering separating these two functions, the
way <strong>phpNav</strong> does. So one would first create an object that
represents the tree structure for a menu, and then use a separate object to
generate a particular type (e.g. a collapsible tree, a list box, or something
else) of menu.</li>
<li><em><strong>Done</strong></em> <em>(XL2.0)</em> Provide a way to modify
the leading for items in Listbox menus.</li>
<li><em><strong>Done</strong></em> <em>(no longer necessary as of TreeMenu 1.1)</em>
Merge class <tt>HTML_TreeMenuSafe</tt> into the base class <tt>HTML_TreeMenu</tt>.</li>
</ul>
<p>Want to suggest an enhancement? Feel free, I don't bite. <a href="mailto:hide@address.com?subj=TreeMenu_Suggestion">Send
me mail</a>. I will try to give it serious consideration.</p>
<h2><a name="sourcecode"></a>HTML_TreeMenuXL Source Code</h2>
<script language="JavaScript" type="text/JavaScript">
<!--
var popUpWin=0;
function popUpWindow(URLStr, left, top, width, height)
{
if(popUpWin)
{
if(!popUpWin.closed) popUpWin.close();
}
popUpWin = open(URLStr, 'srcWin', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,width='+width+',height='+height+',left='+left+', top='+top+',screenX='+left+',screenY='+top+'');
return popUpWin;
}
-->
</script>
<form action="showsource.php" method="post" name="sourceform" target="srcWin"
onSubmit="MM_callJS('popUpWindow(\'\',10,10,700,400)'); return true;">
<p>Click here to see the source code for <em>this</em> page in a new window:<br>
<br>
<input type="submit" name="Submit" value="View Example Source Code">
</p>
</form>
<p>Click the link to download <strong>HTML_TreeMenuXL</strong>:</p>
<ul>
<li>2002-12-02 (1.1.0/XL2.0.2) <a href="HTML_TreeMenuXL-2.0.2.tgz">HTML_TreeMenuXL-2.0.2.tgz</a>
(based on TreeMenu 1.1.0)</li>
</ul>
<p>Archive Versions:</p>
<ul>
<li>2002-11-15 (1.1.0/XL2.0.1) <a href="HTML_TreeMenuXL-2.0.1.tgz">HTML_TreeMenuXL-2.0.1.tgz</a>
(based on TreeMenu 1.1.0)</li>
<li>2002-11-08 (1.0.4/XL1.1a) <a href="HTML_TreeMenuXL-1.1a.tar.gz">HTML_TreeMenuXL-1.1a.tar.gz</a>
(based on TreeMenu 1.0.4)</li>
<li>2002-11-02 (1.0.4/XL1.0) <a href="HTML_TreeMenu-1.0.4-cc1.0.tar.gz">HTML_TreeMenu-1.0.4-cc1.0.tar.gz</a>
(based on TreeMenu 1.0.4)</li>
</ul>
<p> </p>
<!-- InstanceEndEditable -->.
<table border="0" cellspacing="2" cellpadding="2" width=
"100%">
<tr>
<td colspan="2"> <hr> </td>
</tr>
<tr>
<td colspan="2">
<table width="100%" cellspacing="0" summary="">
<tr>
<td width="88"> <a href=
"http://validator.w3.org/check?uri=<?php echo $_SERVER['HTTP_HOST'].$PHP_SELF; ?>">
<img src="/images/vh40.png" alt="Valid HTML 4.0!"
border="0" height="31" width="88"></a> </td>
<td width="88"> <a href=
"http://jigsaw.w3.org/css-validator/validator?uri=<?php echo $_SERVER['HTTP_HOST'].$PHP_SELF; ?>">
<img border="0" width="88" height="31" src=
"/images/vcss.gif" alt="Valid CSS!"></a> </td>
<td align="RIGHT"> <a href="http://www.chipchapin.com/" target="_blank">Chip's
Home Page</a> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"> <hr> </td>
</tr>
<tr>
<td valign="top"> <div class="footer"> Copyright © 2002 <a href=
"mailto:hide@address.com?subject=<?php echo $pgEmailSubj ?>">Chip
Chapin</a>,Ê <a href=
"http://www.chipchapin.com/" target="_blank">http://www.chipchapin.com</a>
</div></td>
<td align="right"> <div class="date">
Updated
<?php
echo strftime("%A %B %d, %Y %T %Z", getlastmod());
if (false) {
?>
<!-- #BeginDate format:Am1 -->October 6, 2003<!-- #EndDate -->
<?php } ?>
</div></td>
</tr>
</table>
<p> </p>
</body>
<!-- InstanceEnd --></html>