Apache Tiles 2.5 - Mark menu element as active

Question

I'm using Spring MVC 3.1 and Tiles 2.

I have this Tile:

<ul class="nav">
  <li class="active"><a href="/person">Person</a></li>
  <li><a href="/student">Student</a></li>
  <li><a href="/superadmin">Superadmin</a></li>
</ul>

And the tiles.xml:

<tiles-definitions>
    <definition name="base.definition" template="/WEB-INF/pages/tiles/template.jsp">
        <put-attribute name="meta" value="/WEB-INF/pages/tiles/meta.jsp" />
        <put-attribute name="head" value="/WEB-INF/pages/tiles/head.jsp" />
        <put-attribute name="navbar" value="/WEB-INF/pages/tiles/navbar.jsp" />
        <put-attribute name="sidebar" value="/WEB-INF/pages/tiles/sidebar.jsp" />
        <put-attribute name="body" value="" />
        <put-attribute name="footer" value="/WEB-INF/pages/tiles/footer.jsp" />
    </definition>


    <definition name="user.new" extends="base.definition">
      <put-attribute name="body" value="/WEB-INF/pages/user.new.jsp" />
    </definition>

    <definition name="user.show" extends="base.definition">
      <put-attribute name="page_title" value="Tiles tutorial homepage" type="string"/>
      <put-attribute name="section_title" value="User's list" type="string"/>
      <put-attribute name="body" value="/WEB-INF/pages/user.show.jsp" />
    </definition>


    <definition name="login" template="/WEB-INF/pages/login.jsp">
        <put-attribute name="meta" value="/WEB-INF/pages/tiles/meta.jsp" />
        <put-attribute name="head" value="/WEB-INF/pages/tiles/head.jsp" />
        <put-attribute name="body" value="/WEB-INF/pages/login.jsp" />
    </definition>

</tiles-definitions>

Now, I want to set the class "active" for the selected menu. Can I do that with Tiles? Or I have to look up with Spring?

Answer 1

Approach 1 - JSP/JSTL and Spring/Bean

Change your menu tile to build the menu using a list of some menu-object, which you can set on the session/model. The menu-object could have a boolean flag indicating which one to set the active class on.

Approach 2 - JavaScript/Session

If you don't want to do it this way, you could use a combination of HTML classes, JavaScript, and a session/model attributeto accomplish the task. What you would do is overload the class attribute on your LI elements, something like:

<ul class="nav">
  <li class="person"><a href="/person">Person</a></li>
  <li class="student"><a href="/student">Student</a></li>
  <li class="superadmin"><a href="/superadmin">Superadmin</a></li>
</ul>

You would then have a little JS, using JSTL to get the class, to select the proper LI element and set the class. With jQuery it might look like:

$(document).ready(function() {
  $('.${mySelectedClass}').addClass('active');
});

This will use jQuery to select the proper LI and add the 'active' class to it.

Approach 3 - Pure JSTL using URL

If you don't like tying your menu to the presence of an attribute, and you know your URL will, when parsed, will have some information you could use to determine which LI to set as active, you could use that. You can get the current page's URL like

<c:out value="${pageContext.request.requestURL}"/>

Parse ${pageContext.request.requestURL} in some meaningful way, and you could use it to determine which is active.

Approach 4 - Pure JavaScript using URL

Same as above, but using JavaScript to get the current URL, parse it, and manipulate the DOM as we did in approach 2.

Hopefully one of these help you.