Friday, October 26, 2007

Simple Nested Tab Menus for Java web applications

I had a bit of a eureka moment when I finally realised that navigational menus belong at a layer above the core functionality that a web application provides. Borrowing an AOP term, navigation, especially menu navigation, can often be a cross cutting concern.

In a Java web application it is possible to layer navigation on top of a web application by using the Sitemesh servlet filter. Menus that appear simple to the user can actually be quite complicated to implement. I was looking through the example menus layouts that Listamatic2 has to offer and a couple of the nested menus really took my fancy (i.e. Blue's clues and Horizontal in horizontal). Some further investigations lead me to a fantastic example as used on Yahoo! News and described on their design pattern site, they even provide example code.

I recognised that this type of hierarchical manipulation was prime XML territory and consequently created a working example. I am very pleased with the results; I think it is a most elegant solution! The image above is taken from my implementation based upon the Yahoo example code. The menu configuration is a simple XML file and is therefore easily changed. Changing the menu and moving menu options about is very easy to do. The Sitemesh filter performs an XSL transformation that displays the tab menu transitions (performance can be improved by caching the XML/XSL in application scope). In this example my core functionality is a skeleton Spring MVC application but it could easily be any suitable Java view technology (JSP, Struts, Freemarker, Velocity etc.). Download it at the link below:

Download ~8kb

Again to keep this distribution to the bare bones, it requires you to install Maven 2 which will download the Java libraries that the application needs. Download my distribution, unzip and run:

mvn compile war:war


ismjml said...

Great work! I've been thinking about an elegant way of implementing this very feature for some time... and I really love this approach!

I'm using it in my next project... Many Thanks...

Note: Comment imported. Original by Glen Smith website: at 2007-10-29 08:56

ismjml said...

Great work.

I am using the same concept in my project.

Note: Comment imported. Original by Anonymous at 2008-05-09 10:08