Apache Tiles 2.5 - Mark menu element as active - spring

I'm using Spring MVC 3.1 and Tiles 2.
I have this Tile:
<ul class="nav">
<li class="active">Person</li>
<li>Student</li>
<li>Superadmin</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?

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">Person</li>
<li class="student">Student</li>
<li class="superadmin">Superadmin</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.

Related

Attribute not found on Apache Tiles

I'm using Apache Tiles on a Sprint MVC app and I have this tiles.xml:
<tiles-definitions>
<definition name="defaultLayout" template="/WEB-INF/tiles/template/defaultLayout.jsp">
<put-attribute name="title" value="" />
<put-attribute name="header" value="/WEB-INF/tiles/template/header.jsp" />
<put-attribute name="content" value=""/>
<put-attribute name="footer" value="/WEB-INF/tiles/template/footer.jsp" />
</definition>
<definition name="home" extends="defaultLayout">
<put-attribute name="title" value="Alsa" />
<put-attribute name="content" value="/WEB-INF/pages/home.jsp" />
<put-attribute name="active" value="index" />
</definition>
</tiles-definitions>
What I'm trying to do is use the attribute active to add a class to active menu item. For that I have this in header.jsp:
<%# taglib uri="http://tiles.apache.org/tags-tiles-extras" prefix="tilesx" %>
<tilesx:useAttribute name="active" />
The problem is that everytime I try to render the page I get this error:
org.apache.tiles.template.NoSuchAttributeException: Error importing
attributes. Attribute 'active' is null
What am I doing wrong?
The trick here is to add cascade=true to your attribute so that it will be available to nested definitions and templates.
<definition name="home" extends="defaultLayout">
<put-attribute name="title" value="Alsa" />
<put-attribute name="content" value="/WEB-INF/pages/home.jsp" />
<put-attribute name="active" value="index" cascade="true"/>
</definition>
See:
https://tiles.apache.org/framework/tutorial/advanced/nesting-extending.html
You may need to declare the class. You'll also need id.
<tilesx:useAttribute name="active" id="active" class="java.lang.String"/>
Also if there are other tiles definitions in your app other than "home" and if any of them do not define an "active" attribute, you may want to set "ignore" to true as part of your definition to avoid runtime errors. More here:https://tiles.apache.org/framework/tiles-jsp/tlddoc/index.html

Spring Tiles: Add context information (menu, title)

I am wondering what is the best way to add context information (like the current menu or the title of the page) to spring 3 + tiles 2 app.
I want the system to be as easily extenable as possible, so for example my tiles config uses a wildcards, because I do not want to write a new entry for every new request handler:
<tiles-definitions>
<definition name="baseLayout" template="/WEB-INF/jsp/layout.jsp">
<put-attribute name="title" value="Template" />
<put-attribute name="header" value="/WEB-INF/jsp/header.jsp" />
<put-attribute name="menu" value="/WEB-INF/jsp/menu.jsp" />
<put-attribute name="body" value="/WEB-INF/jsp/content.jsp" />
<put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" />
</definition>
<definition name="**-tile" extends="baseLayout">
<put-attribute name="title" value="{1}" />
<put-attribute name="body" value="/WEB-INF/jsp/{1}.jsp" />
</definition>
</tiles-definitions>
So I guess the only choice left is to add stuff to the model. I could of course add a new model entry (e.g. MODEL_ID) for every requesthandler, like this:
#RequestMapping(value="/order/{orderId}.x")
public String showOrder(ModelMap model, #PathVariable long orderId) {
// do stuff
model.addAttribute(Context.MODEL_ID, Context.getOrderContext());
}
and then this particular MODEL_ID is interpreted in title.jsp to show a title and in menu.jsp to highlight the current menu item.
However, I do not like the idea of adding those lines to all request methods of all my controllers.
I was thinking about writing an Interceptor which tries to determine the "context" based on the name of the view or requestpath, but then I have to rewrite all URLs in the interceptor and also keep them in sync with the Controllers.
What is the correct or simpliest way to add context info to every controller to use in common tiles?

Spring & Tiles - Get rid of tiles.xml

I have a Tiles template where each page provides a title, some stuff to add in the <head>, stuff to put in some concrete <div>, and stuff to append to <body> after everything else.
Most of those things are very small since the page is rendered with JS.
How can I get rid of tiles.xml or make it more manageable?
I don't want each of the pages to require 3 files:
<definition name="my_page" template="/template.jsp">
<put-attribute name="title" value="My Title" />
<put-attribute name="head" value="/tiles/my-head.jsp" />
<put-attribute name="body" value="/tiles/my-page.jsp" />
<put-attribute name="body-append" value="/tiles/my-append.jsp" />
</definition>
And I don't want to put content of all pages in tiles.xml.
Ideally, it would simply redirect my_page to /my_page.jsp which would import and fill the template by itself.
I'm talking about a Spring app with TilesView.
You can use the tiles JSP tags directly in your JSP. You don't have to use definitions if you don't want to.
In your my_page.jsp:
<tiles:insertTemplate template="/template.jsp" flush="true">
<tiles:putAttribute name="title" value="My Title" />
<tiles:putAttribute name="head" value="/tiles/my-head.jsp" />
... etc
</tiles:insertTemplate>
See http://tiles.apache.org/framework/tiles-jsp/tlddoc/index.html

How to localize page title with Spring and Tiles2?

I have a Spring application which uses Tiles for the view tier. So all my pages definitions look like this:
<definition name="main.page" template="/tiles/layout.jsp">
<put-attribute name="title" value="Page Title"/>
<put-attribute name="header" value="/tiles/header.jsp"/>
<put-attribute name="body" value=""/>
<put-attribute name="footer" value="/tiles/footer.jsp"/>
</definition>
<definition name="welcome.page" extends="main.page">
<put-attribute name="title" value="Main Page"/>
<put-attribute name="body" value="/pages/welcome.jsp"/>
</definition>
The code which sets page title is:
<title><tiles:getAsString name="title"/></title>
I would like to localize with Spring tag:
<spring:message>
Are there any "best practices" how to do that?
Did you ever tried to put the message key in you tiles variable and use it as key for the spring message tag.
Something like that:
<definition name="welcome.page" extends="main.page">
<put-attribute name="titleKey" value="page.main.title"/>
<put-attribute name="body" value="/pages/welcome.jsp"/>
</definition>
jsp:
<set var"titleKey"><tiles:getAsString name="titleKey"/></set>
<title><spring:message code=${titleKey} /></title>
The previous answer contains several little mistakes
tiles.xml
<definition name="main" template="/WEB-INF/jsp/template.jsp">
<put-attribute name="titleKey" value="main.title" />
<put-attribute name="body" value="/WEB-INF/jsp/main.jsp" />
</definition>
jsp (/WEB-INF/jsp/template.jsp)
<c:set var="titleKey"><tiles:getAsString name="titleKey"/></c:set>
<title><spring:message code="${titleKey}"></spring:message> </title>

Best way to set HTML head title in a Spring+Tiles2 application?

I have a usability problem in my Spring webapp which uses Tiles as the view technology.
At the moment all of the pages display the same HEAD_TITLE and the PAGE_TITLE is page specific:
<html>
<head><title>HEAD_TITLE</title></head>
<body>
<h1>PAGE_TITLE</h1>
</body>
</html>
This is a major usability problem as the browsers history lists all different pages of the application with the same title. The reason why the HEAD_TITLE is same for all pages is that I haven't found a reasonable way to use the PAGE_TITLE as the HEAD_TITLE.
In most cases the PAGE_TITLE comes from a message bundle with <fmt:message /> tag and
some parameters are passed to it. The Tiles layout is such that the HEAD_TITLE should be already set at that point because all pages of the webapp use the same common layout which defines the <HEAD> elements of the pages amongst other stuff.
Any suggestions how to fix this usability problem? Should I set a "pageTitle" request attribute in my Spring controllers for all pages and use that as the PAGE_TITLE and also as the HEAD_TITLE? Or is it possible to somehow set the HEAD_TITLE in the page specific JSP?
Create a general definition and define headTitle and pageTitle attributes.
<definition name="threeColumnLayout" template="/WEB-INF/ThreeColumnLayout.jsp" >
<put-attribute name="headTitle" value="" />
<put-attribute name="pageTitle" value="" />
<put-attribute name="left" value="/WEB-INF/left.jsp" />
<put-attribute name="middle" value="" />
<put-attribute name="right" value="/WEB-INF/right.jsp" />
</definition>
Set appropriate values in more specific definition.
<definition name="/user/new" extends="threeColumnLayout">
<put-attribute name="headTitle" value="Administration" />
<put-attribute name="pageTitle" value="Create User" />
<put-attribute name="middle" value="WEB-INF/views/UserCreate.jsp" />
</definition>
Use <tiles:getAsString /> tag to retrieve such values in jsp page.
<head>
<title><tiles:getAsString name="headTitle"/></title>
</head>
<body>
<h1>
<title><tiles:getAsString name="pageTitle"/></title>
</h1>
</body>
Reference:- http://tiles.apache.org/framework/tiles-jsp/tagreference.html#tiles:getAsString

Resources