我正在寻找一种使用 Apache Tiles 以类似于 ASP.NET MVC 4 的方式管理 CSS 和 JS 资源的好方法。
在 ASP.NET MVC4 中,您有 ContentBundles 和 ScriptBundles,您可以简单地编写
@Scripts.Render("~/bundles/jquery");
它将使用所有正确的语法插入您的 css/脚本。然后为了让它更好有 @RenderSection("JavaScript", required:false) 它允许您以正确的包含顺序插入 JavaScript,并在 View 上定义它。
@section JavaScript
{
<script type="text/javascript" src="@Url.Content("/Scripts/jquery.tablesorter.min.js")"></script>
<script type="text/javascript" src="@Url.Content("/Scripts/Custom/Roster.js")"></script>
}
简而言之,我基本上想在 Spring MVC 中使用 Apache Tiles 做这样的事情。甚至有可能吗?
我最初的想法和尝试是在瓷砖配置文件中创建一个“包”作为定义,但随后需要一些 JSP 代码来正确插入和创建 html 语法。有没有人以前尝试过这个或找到一个好的解决方案?
我在 http://www.coderanch.com/how-to/java/TilesJavaScript 找到了这个例子但它在 Tiles 3 的语法上似乎并不正确。
主布局.jsp
">
以下是对多个 js 文件执行此操作的方法:
瓷砖defs.xml
<!-- 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>
本质上,我想要一种干净的方式来包含我所有的 JavaScript 和 CSS,使用类似于 ASP.NET MVC 捆绑方法的 Apache Tiles。这样我就不必将链接硬编码到每个需要额外内容的 JSP 文件中。
请您参考如下方法:
对于任何感兴趣的人,这就是我最终实现它的方式。我使用 Tiles 3 做到了这一点,我不确定以前版本的 Tiles 中的语法是否有所不同。它似乎工作得很好。
布局文件
<!-- templates -->
<definition name="base" template="/WEB-INF/views/templates/template.jsp">
<put-attribute name="title" value=""></put-attribute>
<put-attribute name="header" value="/WEB-INF/views/tiles/shared/header.jsp"></put-attribute>
<put-attribute name="content" value=""></put-attribute>
<put-attribute name="footer" value="/WEB-INF/views/tiles/shared/footer.jsp"></put-attribute>
<put-list-attribute name="javascripts">
<add-attribute value="/static/javascript/modernizr.js" />
<add-attribute value="/static/jquery/jquery-2.1.0.min.js" />
<add-attribute value="/static//bootstrap/js/bootstrap.min.js" />
</put-list-attribute>
<put-list-attribute name="stylesheets">
<add-attribute value="/static/bootstrap/css/bootstrap.min.css" />
<add-attribute value="/static/stylesheets/global.css" />
</put-list-attribute>
</definition>
<!-- HomeController -->
<definition name="home/index" extends="base">
<put-attribute name="title" value="Home"></put-attribute>
<put-attribute name="content" value="/WEB-INF/views/tiles/home/home.jsp"></put-attribute>
</definition>
<!-- LoginController -->
<definition name="login/login" extends="base">
<put-attribute name="title" value="Login"></put-attribute>
<put-attribute name="header" value=""></put-attribute>
<put-attribute name="content" value="/WEB-INF/views/tiles/user/login.jsp"></put-attribute>
<put-attribute name="footer" value=""></put-attribute>
<put-list-attribute name="stylesheets" inherit="true">
<add-attribute value="/static/stylesheets/sign-in.css" />
</put-list-attribute>
</definition>
<!-- UserController -->
<definition name="user/list" extends="base">
<put-attribute name="title" value="Users"></put-attribute>
<put-attribute name="content" value="/WEB-INF/views/tiles/user/list.jsp"></put-attribute>
</definition>
<definition name="user/add" extends="base">
<put-attribute name="title" value="User - Add"></put-attribute>
<put-attribute name="content" value="/WEB-INF/views/tiles/user/createOrUpdate.jsp"></put-attribute>
</definition>
<definition name="user/edit" extends="base">
<put-attribute name="title" value="User - Edit"></put-attribute>
<put-attribute name="content" value="/WEB-INF/views/tiles/user/createOrUpdate.jsp"></put-attribute>
</definition>
<!-- ErrorController -->
<definition name="error/error" extends="base">
<put-attribute name="title" value="Error"></put-attribute>
<put-attribute name="content" value="/WEB-INF/views/tiles/error/error.jsp"></put-attribute>
</definition>
模板.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:importAttribute name="javascripts"/>
<tiles:importAttribute name="stylesheets"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="XXXXXXXXXXX">
<meta name="description" content="Something">
<title><tiles:insertAttribute name="title"></tiles:insertAttribute></title>
<!-- stylesheets -->
<c:forEach var="css" items="${stylesheets}">
<link rel="stylesheet" type="text/css" href="<c:url value="${css}"/>">
</c:forEach>
<!-- end stylesheets -->
</head>
<body>
<!--[if lt IE 10]>
<p class="alert alert-warning">
Warning: You are using an unsupported version of Internet Explorer. We recommend using Internet Explorer
10+. If you are a Windows XP user you'll need to download an alternative browsers such as FireFox, Chrome,
Opera, or Safari.
</p>
<![endif]-->
<!-- header -->
<div id="header">
<tiles:insertAttribute name="header"></tiles:insertAttribute>
</div>
<!-- end header -->
<!-- content -->
<div id="content">
<tiles:insertAttribute name="content"></tiles:insertAttribute>
</div>
<!-- end content -->
<!-- footer -->
<div id="footer">
<tiles:insertAttribute name="footer"></tiles:insertAttribute>
</div>
<!-- end footer -->
<!-- scripts -->
<c:forEach var="script" items="${javascripts}">
<script src="<c:url value="${script}"/>"></script>
</c:forEach>
<!-- end scripts -->
</body>
</html>