4

我正在使用带有通配符定义的 spring mvc 3 和 tiles 2。我想在我的一些图块中加载额外的 css 和 javascript 文件。有没有办法做到这一点？最好在 tile jsp 文件中，而不是在 tiles-definitions.xml 中。

4

3 回答 3

8

这是一个很好的问题，因为瓷砖的主要好处之一是它提供的关于构图的中心视图。如果这种集中化也可以包含 CSS 和 JS 文件，那就太好了。

碰巧这是可能的，这里有一个例子。这个例子使用了tiles3，但是它应该很容易适应tiles-2（tiles 3允许你使用多种类型的表达式）你可以绕过这个。

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

瓷砖.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 文件列表放入 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>

我想你可以弄清楚其余的。对最后一个块中的标签感到抱歉<s:iterator>，我不确定 Spring 等效项，也不会倾向于测试它。但是，如果您将其翻译为 Spring，那么您可以在这里自行回答。我很乐意投票。

于 2013-05-19T20:42:25.017 回答
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：资源

于 2013-05-18T05:17:15.507 回答
1

这就是我对 Spring 所做的，其余的就像四元数一样。

/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>
于 2015-06-11T17:41:12.433 回答