Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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 &amp; JS files as well.</p> <p>It happens that this <em>is</em> 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.</p> <p>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:". </p> <p><strong>tiles.xml</strong></p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd"&gt; &lt;tiles-definitions&gt; &lt;definition name="default" template="/WEB-INF/template/template.jsp"&gt; &lt;put-list-attribute name="cssList" cascade="true"&gt; &lt;add-attribute value="/style/cssreset-min.css" /&gt; &lt;add-attribute value="/style/cssfonts-min.css" /&gt; &lt;add-attribute value="/style/cssbase-min.css" /&gt; &lt;add-attribute value="/style/grids-min.css" /&gt; &lt;add-attribute value="/script/jquery-ui-1.8.24.custom/css/ui-lightness/jquery-ui-1.8.24.custom.css" /&gt; &lt;add-attribute value="/style/style.css" /&gt; &lt;/put-list-attribute&gt; &lt;put-list-attribute name="jsList" cascade="true"&gt; &lt;add-attribute value="/script/jquery/1.8.1/jquery.min.js" /&gt; &lt;add-attribute value="/script/jquery-ui-1.8.24.custom/js/jquery-ui-1.8.24.custom.min.js" /&gt; &lt;add-attribute value="/script/jquery.sort.js" /&gt; &lt;add-attribute value="/script/custom/jquery-serialize.js" /&gt; &lt;/put-list-attribute&gt; &lt;put-attribute name="title" value="defaults-name" cascade="true" type="string"/&gt; &lt;put-attribute name="head" value="/WEB-INF/template/head.jsp"/&gt; &lt;put-attribute name="header" value="/WEB-INF/template/header.jsp"/&gt; &lt;put-attribute name="body" value="/WEB-INF/template/body.jsp"/&gt; &lt;put-attribute name="footer" value="/WEB-INF/template/footer.jsp"/&gt; &lt;/definition&gt; &lt;definition name="REGEXP:\/recruiter#candidate-input\.(.*)" extends="default"&gt; &lt;put-list-attribute name="cssList" cascade="true" inherit="true"&gt; &lt;add-attribute value="/style/recruiter/candidate-input.css" /&gt; &lt;/put-list-attribute&gt; &lt;put-list-attribute name="jsList" cascade="true" inherit="true"&gt; &lt;add-attribute value="/script/widgets/resume/resume.js" /&gt; &lt;/put-list-attribute&gt; &lt;put-attribute name="body" value="/WEB-INF/content/recruiter/candidate-input.jsp"/&gt; &lt;/definition&gt; &lt;definition name="REGEXP:(.*)#(.*)" extends="default"&gt; &lt;put-attribute name="title" cascade="true" expression="OGNL:@com.opensymphony.xwork2.ActionContext@getContext().name"/&gt; &lt;put-attribute name="body" value="/WEB-INF/content{1}/{2}"/&gt; &lt;/definition&gt; &lt;/tiles-definitions&gt; </code></pre> <p><strong>/WEB-INF/template/template.jsp</strong></p> <pre><code>&lt;%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %&gt; &lt;%@taglib prefix="s" uri="/struts-tags"%&gt; &lt;%@page contentType="text/html" pageEncoding="UTF-8" %&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;tiles:insertAttribute name="head"/&gt; &lt;body&gt; &lt;%-- website header --%&gt; &lt;div id="wrapper"&gt; &lt;div id="content"&gt; &lt;tiles:insertAttribute name="header"/&gt; &lt;tiles:insertAttribute name="body"/&gt; &lt;div class ="outer content"&gt; &lt;tiles:insertAttribute name="footer"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is the important part getting the lists of CSS files and JS files into the head tile:</p> <p><strong>/WEB-INF/template/head.jsp</strong></p> <pre><code>&lt;%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%&gt; &lt;%@taglib prefix="s" uri="/struts-tags"%&gt; &lt;%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt; &lt;tiles:importAttribute name="cssList"/&gt;&lt;tiles:importAttribute name="jsList"/&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt; &lt;s:iterator value="#attr.cssList" var="cssValue"&gt; &lt;link href="&lt;s:url value="%{cssValue}"/&gt;" rel="stylesheet" type="text/css"&gt; &lt;/s:iterator&gt; &lt;s:iterator value="#attr.jsList" var="jsValue"&gt; &lt;script src="&lt;s:url value="%{jsValue}"/&gt;"&gt;&lt;/script&gt; &lt;/s:iterator&gt; &lt;title&gt;&lt;tiles:insertAttribute name="title" defaultValue="no title"/&gt;&lt;/title&gt; &lt;/head&gt; </code></pre> <p>I think you can figure out the rest. Sorry about the <code>&lt;s:iterator&gt;</code> 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.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload