Menu
I am using spring mvc 3 and tiles 2 with wildcard definitions. I want to load additional css and javascript files inside some of my tiles. Is there way to do this? Preferably in tile jsp file, not in tiles-definitions.xml.
834
This is a good question because one of the main benefits of tiles is the central view it provides with regards to composition. It would be really nice if this centralization could also include CSS & JS files as well.
It happens that this is possible, here is an example. This example uses tiles3 however it should be pretty simple to adapt to tiles-2 (tiles three lets you use multiple types of expressions) you can side step this.
Also note that I use Struts2 as my action framework, this is not an issue but as I'm going to use a working example you'll know the "OGNL:" prefixed expression means that the EL Struts2 uses will be used. You should also know that if you upgrade to Tiles-3 you can also use Spring EL by prefixing your expressions with "MVEL:".
tiles.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="default" template="/WEB-INF/template/template.jsp">
<put-list-attribute name="cssList" cascade="true">
<add-attribute value="/style/cssreset-min.css" />
<add-attribute value="/style/cssfonts-min.css" />
<add-attribute value="/style/cssbase-min.css" />
<add-attribute value="/style/grids-min.css" />
<add-attribute value="/script/jquery-ui-1.8.24.custom/css/ui-lightness/jquery-ui-1.8.24.custom.css" />
<add-attribute value="/style/style.css" />
</put-list-attribute>
<put-list-attribute name="jsList" cascade="true">
<add-attribute value="/script/jquery/1.8.1/jquery.min.js" />
<add-attribute value="/script/jquery-ui-1.8.24.custom/js/jquery-ui-1.8.24.custom.min.js" />
<add-attribute value="/script/jquery.sort.js" />
<add-attribute value="/script/custom/jquery-serialize.js" />
</put-list-attribute>
<put-attribute name="title" value="defaults-name" cascade="true" type="string"/>
<put-attribute name="head" value="/WEB-INF/template/head.jsp"/>
<put-attribute name="header" value="/WEB-INF/template/header.jsp"/>
<put-attribute name="body" value="/WEB-INF/template/body.jsp"/>
<put-attribute name="footer" value="/WEB-INF/template/footer.jsp"/>
</definition>
<definition name="REGEXP:\/recruiter#candidate-input\.(.*)" extends="default">
<put-list-attribute name="cssList" cascade="true" inherit="true">
<add-attribute value="/style/recruiter/candidate-input.css" />
</put-list-attribute>
<put-list-attribute name="jsList" cascade="true" inherit="true">
<add-attribute value="/script/widgets/resume/resume.js" />
</put-list-attribute>
<put-attribute name="body" value="/WEB-INF/content/recruiter/candidate-input.jsp"/>
</definition>
<definition name="REGEXP:(.*)#(.*)" extends="default">
<put-attribute name="title" cascade="true" expression="OGNL:@com.opensymphony.xwork2.ActionContext@getContext().name"/>
<put-attribute name="body" value="/WEB-INF/content{1}/{2}"/>
</definition>
</tiles-definitions>
/WEB-INF/template/template.jsp
<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<tiles:insertAttribute name="head"/>
<body>
<%-- website header --%>
<div id="wrapper">
<div id="content">
<tiles:insertAttribute name="header"/>
<tiles:insertAttribute name="body"/>
<div class ="outer content">
<tiles:insertAttribute name="footer"/>
</div>
</div>
</div>
</body>
</html>
This is the important part getting the lists of CSS files and JS files into the head tile:
/WEB-INF/template/head.jsp
<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<tiles:importAttribute name="cssList"/><tiles:importAttribute name="jsList"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<s:iterator value="#attr.cssList" var="cssValue">
<link href="<s:url value="%{cssValue}"/>" rel="stylesheet" type="text/css">
</s:iterator>
<s:iterator value="#attr.jsList" var="jsValue">
<script src="<s:url value="%{jsValue}"/>"></script>
</s:iterator>
<title><tiles:insertAttribute name="title" defaultValue="no title"/></title>
</head>
I think you can figure out the rest. Sorry about the <s:iterator> tags in the last block, I'm not sure of the Spring equivalent nor would I be inclined to test it. But should you translate this to Spring, it would be great for you to self answer here. I'd happily up vote it.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
