JavaRanch Home    
 
This page:         last edited 23 October 2010         What's Changed?         Edit

Tiles and JavaScript   

I have a definition of header/body/footer and then extensions of that defintion for particular body JSPs.

Each "body" jsp may need a reference to a different .js file. These references are supposed to go in the <head>, but that tag is located in the main layout definition. So, how can I include the JavaScript files I want in the <body>, when the references to the .js files have to go in the <head> ?

This solution was provided by Durgaprasad Guduguntla. Here's how you do it for a single .js file:

You can achieve this by configuring the path of the JavaScript file in the tiles definition and expose that name in the master layout. The child definitions can override the JavaScript file value and thus can render different JavaScript files within the <head> element itself. Please take a look at the following code snippets:

tiles-defs.xml
<!-- Master Definition -->
<definition name="master.page" path="/layouts/masterlayout.jsp">
    <put name="title" value="App Home Page" />
    <put name="jsfile" value="/config/javscript.js" />
    <put name="header" value="/pages/header.jsp" />
    <put name="body" value="/pages/body.jsp" />
    <put name="footer" value="/pages/footer.jsp" />
</definition>
 
<!-- Child page Definition -->
 
<definition name="child.page" extends="master.page">
    <put name="title" value="Child Page" />
    <put name="jsfile" value="/config/childpage_javscript.js" />
</definition>

master-layout.jsp


<head>
<script src="<%=request.getContextPath()%><tiles:getAsString name='jsfile' />"></script>
<title><tiles:getAsString name="title" /></title>
</head>

Here's how you'd do it for multiple js files:

tiles-defs.xml
        <!-- Master Definition -->
    <definition name="master.page" path="/layouts/masterlayout.jsp">    
        <put name="title" value="App Home Page" />  
        <put name="jsfile" value="/config/javscript.js" />  
        <put name="header" value="/pages/header.jsp" /> 
        <put name="body" value="/pages/body.jsp" /> 
        <put name="footer" value="/pages/footer.jsp" />
    </definition> 
    
    <!-- Child page Definition --> 
    <definition name="child.page" extends="master.page">    
        <put name="title" value="Child Page" /> 
        <put name="jsfile" value="app.childpage.jsfiles.tile" />
    </definition>
 
    <!-- JS Files Definition tile -->
 
    <definition name="app.childpage.jsfiles.tile" path="/layouts/jslayout.jsp">
        <putList name="jsfilesList">
            <add value="/config/childpage_jsfile1.js"/>
            <add value="/config/childpage_jsfile2.js"/>
            <add value="/config/childpage_jsfile3.js"/>
        </putList>
    </definition>

jslayout.jsp


<tiles:useAttribute id="list" name="jsfilesList" classname="java.util.List" />
<c:forEach var="jsfileName" items="${list}">
    <script src="<%=request.getContextPath()%><c:out value='${jsfileName}' />"></script>
</c:forEach>

<< Back to StrutsFaq


JavaRanchContact us — Copyright © 1998-2014 Paul Wheaton