Apache Tiles 2.1.4 with CSS

Question

Hi,

I am using Apache Tiles 2.1.4 with Spring MVC 3. I have managed to configure these together and everything works fine. My next step is to add CSS and this is where I am having an issue - this is most probably a simple one but I can't get my template jsp to pick up the css.

Snippet from my tiles-defs.xml

<definition name="baseLayout" template="/WEB-INF/tiles/baseLayout.jsp">
  <put-attribute name="title"  value="Template"/>
  <put-attribute name="header" value="/WEB-INF/tiles/header.jsp"/>
  <put-attribute name="styles" value="base.css"/>
  <put-attribute name="subheader"   value="/WEB-INF/tiles/subheader.jsp"/>
  <put-attribute name="menu"   value="/WEB-INF/tiles/menu.jsp"/>
  <put-list-attribute name="bodyItems">
      <add-attribute value="/WEB-INF/tiles/body.jsp"/>
  </put-list-attribute>

Snippet from my template jsp (baseLayout.jsp)

<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/WEB-INF/css/displayTagTable.css"/>

Snippet from my css:

body {
background-color: red;

}

I have kept the css as simple as possible just to check if my jsp picks up the css file.

I have also checked that my css file is in the correct location - but my jsp file is not picking up the css file. Can someone help?

Any help will be much appreciated.

Thanks, Zahanghir

Answer 1

Files within WEB-INF aren't served directly through public URLs. Spring and tiles are able to indirectly serve JSPs files from WEB-INF programatically.

Can you please try moving the css directory into WebContent and updating your <link> tag's href attribute?

After you get that working, I have a suggestion. You can use Tiles tags if you include this page directive at the tops of your JSPs:

<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%&gt;

If you want, this allows you to store your CSS path as an attribute in tiles-defs.xml, and retrieve it from your JSPs with the tag:

<link type="text/css" rel="stylesheet"
    href="<tiles:getAsString name="IDENTIFIER_HERE"/>"/>

Your CSS URL will replace the tiles tag. And you could use this CSS path across multiple Tiles definitions.

The rest of the Tiles tags are documented here: Tiles Tag Reference Sheet