« Don't do this | Main | Got a nail? »

Tab switching with SiteMesh

Using SiteMesh and meta tags for menus

In "Dependency Injection with SiteMesh", Matt Raible describes a technique using SiteMesh for "a tabbed menu that highlighted the current tab based on which page you were on." Matt's technique a SiteMesh feature that allows the target page to pass information in meta tags to decorator. This stops the template having to "know" what page (or class of pages) it's rendering. The target page has a meta tag with a attribute value of "menu"

    <head>
        <meta name="menu" content="Authors"/>
    </head>

and the decorator pulls in the menu value as follows:

    <c:set var="currentMenu" scope="request">
        <decorator:getProperty property="meta.menu"/>
    </c:set>
    <c:import url="/WEB-INF/pages/menu.jsp">
        <c:param name="template" 
            value="/template/menu/tabs.html"/>
    </c:import>

which allows the script menu.jsp (not shown here) to treat the menu value as a variable called 'template'. It's a neat trick.

Using SiteMesh and CSS selectors for menus

Here's another technique that uses the SiteMesh's decorator:getProperty tag and leverages CSS selectors instead of scripts.

In the template, tell SiteMesh to fetch the body element's id attribute from the target page being rendered using decorator:getProperty thus:

    <body <decorator:getProperty 
        property="body.id" 
        writeEntireProperty="true" /> >

The 'writeEntireProperty' value tells SiteMesh to take the whole 'id="xxx"' and not just the id value.

Set up your global tab bar using a list, something like this:

    <div id="navbar">
        <ul>
        <li id="tab-home"><a href="/home">home<a/></li>
        <li id="tab-help"><a href="/help">help<a/></li>
        <li id="tab-about"><a href="/about">about<a/></li>
        </ul>
    </div>

and set up a corresponding CSS selector rule, something like this:

    body#home #tab-home a, 
    body#help #tab-help a,
    body#about #tab-about a
    {
        background-image: url( /images/naveON.gif );
    }

this tells the browser to swap a background image when the combination of id attributes on the body and li elements match, ie

  <body id="about">
    ...
    <div id="navbar">
        <ul>
        <li id="tab-home"><a href="/home">home<a/></li>
        <li id="tab-help"><a href="/help">help<a/></li>
        <li id="tab-about"><a href="/about">about<a/></li>
        </ul>
    </div>

will highlight the 'about' tab. Now in each target page you can set the id attribute, for example:

  <body id="help">

SiteMesh will pull 'id="help"' from that page into the template's body element, which triggers the CSS selector.

What's nice about this is twofold. First using CSS for tab highlighting is elegant, idiomatic and fast. Second it doesn't require scripting in your jsp/velocity/etc pages.


August 2, 2007 01:58 AM

Comments

Post a comment

(you may use HTML tags for style)




Remember Me?

Trackback Pings

TrackBack URL for this entry:
http://www.dehora.net/mt/mt-tb.cgi/2134