在tile&中加载资源春天的mvc

时间:2013-05-17 11:18:31

标签: spring-mvc tiles

我正在使用spring mvc 3和tile 2以及通配符定义。我想在我的一些瓷砖中加载额外的css和javascript文件。有办法做到这一点吗?最好是在tile jsp文件中,而不是在tiles-definitions.xml。

3 个答案:

答案 0 :(得分:8)

这是一个很好的问题,因为瓷砖的主要优点之一是它在构图方面提供的中心视图。如果这种集中化还可以包括CSS& JS文件也是如此。

碰巧这个可能,这是一个例子。这个例子使用了tiles3,但是应该很容易适应tiles-2(tile 3允许你使用多种类型的表达式),你可以这样做。

另请注意,我使用Struts2作为我的动作框架,这不是问题但是因为我将使用一个工作示例,您将知道“OGNL:”前缀表达式意味着将使用EL Struts2使用。您还应该知道,如果升级到Tiles-3,您还可以通过在表达式前添加“MVEL:”来使用Spring EL。

<强> 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>

这是将CSS文件和JS文件列表放入头部磁贴的重要部分:

<强> /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>

我想你可以弄清楚剩下的了。对于最后一个块中的<s:iterator>标签感到抱歉,我不确定Spring的等价物,也不倾向于测试它。但是,如果你把它翻译成春天,那么你在这里自我回答会很棒。我很乐意投票。

答案 1 :(得分:1)

在dispatcher-servlet.xml中提供mvc静态资源映射,如下所示:

<!-- static resource mapping for style sheets, etc. -->
    <mvc:resources mapping="/styles/**"  location="/WEB-INF/skins/" />
    <mvc:resources mapping="/scripts/**" location="/WEB-INF/scripts/" />

在您的tiles-layout.jsp文件中,您可以通过编写

来访问它们
<script type="text/javascript" src="${context}/scripts/jquery-1.7.js></script>
 <link rel="stylesheet" type="text/css" href="${context}/styles/css/superfish.css">

请参阅:mvc:resources

答案 2 :(得分:1)

这就是我对Spring的看法,剩下的就像Quaternion发布的那样。

<强> /WEB-INF/template/head.jsp

<tiles:importAttribute name="cssList"/>
<tiles:importAttribute name="jsList"/>
<head>
    <c:forEach var="cssValue" items="${cssList}">
        <link type="text/css" rel="stylesheet" href="<c:url value="${cssValue}"/>" />
    </c:forEach>

    <c:forEach var="jsValue" items="${jsList}">
        <script src="<c:url value="${jsValue}"/>"></script>
    </c:forEach>
</head>

不要忘记在每个页面上指出 tiles.xml

中的正确定义
<tiles:insertDefinition name="definitionName">
    <tiles:putAttribute name="body">
        //content
    </tiles:putAttribute>
</tiles:insertDefinition>