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?

Molluscoid

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.

Francescafrancesco

Thank you so much! Sorry for the late but the site didn't notify me! – Molluscoid

You should set this respone as the solution if it satisfies you – Lenz

what about the tiles way? – Dirt

Unless there is some feature I don't know about Apache Tiles, you still have to pass something in or use some logic within the tile to switch between active and not active. Tiles simply allows you to encapsulate a JSP fragment and wire it into a modular template. Maybe there is a way to have an if/else, but if there is, I am not aware of it. – Francescafrancesco