HTML::Widget::SideBar 1.02 review

HTML::Widget::SideBar can creates the HTML (and possibly some Javascript) for a navigational or otherwise active (hierarchical) sideb

License: GPL (GNU General Public License) File size: 14K Developer: Yosef Meller

0

HTML::Widget::SideBar can creates the HTML (and possibly some Javascript) for a navigational or otherwise active (hierarchical) sidebar for a web page.

SYNOPSYS

use HTML::Widget::SideBar;
use CGI; # Or something like that.

# We are going to create a sidebar in which only the active (clicked) branch
# is visible.
my $tree = HTML::Widget::SideBar->new;
$tree->setToggleAction;

foreach (1..3) {
my $list = $tree->append(value => "list$_");
$list->append(value => "aaa$_", URL => "http://localhost/$_");
$list->append(value => "bbb$_");
$list->append(value => "ccc$_");
}
$tree->getSubTree(3)->setActive;

print header, start_html(-style => $tree->buildCSS($tree->deepBlueCSS),
-script => $tree->baseJS);
print join "n", $tree->getHTML(styles => {bar => 'nav',
level0 => 'navlink',
level0Over => 'navover'},
expand => 1
);
print end_html;

HTML::Widget::SideBar creates the HTML, and possibly some Javascript and CSS for a hirarchical side menu bar. It is very flexible, and allows you to create both simple navigational menus and complex dynamic sidebars with Javascript actions associated with items on the menu.

This module started as a hack on my Javascript::Menu, which makes them very similar, so if you got one of them, you'll use the other with no sweat, I think.
The module supports the notion of an 'active item' (usually the item denoting the page the user is viewing) and gives such item special treatment by marking it with a special CSS class and making it visible initially. It also has special support for selection menus where opening a branch closes all others.

What should you expect to see?

This depends greatly on your style definitions and action assignment (if you use that feature). Basically you'll have a vertical bar (which will take up as much of the screen as your CSS will allow). Inside that bar you'll have a tree of nested lists, and you can define the style for each level. When an item is clicked - its action is performed. A special predefined action allows you to show/hide child lists.
By default only the active branch (the branch containing the active item) and the top level list will be visible. You can override this (see getHTML).

Some naming rules

The sidebar will get an HTML id attribute. The default is 'sidebar' but this is changeable through getHTML, as other naming rules.
Every list will be of class 'list' unless another class is given through getHTML.
Every item in every list will be of the same class as all other items on the same level. The default is 'item' for all items, but you can set each level separately through getHTML.

The active item's class name is its level's class name, appended with 'Active'.
Optionally, you may also set a mouseover style. For those of you who design for Mozilla, you really don't need that, just use the CSS pseudo-class :hover. For others, this will set the onMouseOver and onMouseOut attributes of an item to switch to and from that class.

Setting up the supporting code.

The sidebar created by this menu is formatted by CSS only. This means you'll have to supply it. I included a class method called buildCSS which takes a datastructure (described below) and turns it into CSS, and an example of a sidebar design in such datastructure (I used this design in production).

You may also want to use the toggling support (described below), and in this case you'll need some Javascript. This is given directly through baseJS. You can use it straight or dump to a file and tweak it to suit you best.

Requirements:
Perl