【问题标题】:Manage JavaScript and CSS with Apache Tiles使用 Apache Tiles 管理 JavaScript 和 CSS
【发布时间】:2014-07-05 13:44:24
【问题描述】:

我正在寻找一种使用 Apache Tiles 以类似于 ASP.NET MVC 4 的方式管理 CSS 和 JS 资源的好方法。

在 ASP.NET MVC4 中,您有 ContentBundles 和 ScriptBundles,您可以简单地编写

@Scripts.Render("~/bundles/jquery");

它将使用所有正确的语法插入您的 css/脚本。然后为了使它更好,@RenderSection("JavaScript", required:false) 允许您以正确的包含顺序插入 JavaScript,并在视图上定义它。

@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 做类似的事情。有可能吗?

我最初的想法和尝试是在 tile 配置文件中创建一个“捆绑包”作为定义,但随后需要一些 JSP 代码来正确插入和创建 html 语法。有没有人曾经尝试过这个或找到一个好的解决方案?

我在 http://www.coderanch.com/how-to/java/TilesJavaScript 找到了这个示例,但它似乎在 Tiles 3 的语法上不正确。

master-layout.jsp

">

以下是对多个 js 文件执行此操作的方法:

tiles-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 文件中。

【问题讨论】:

    标签: jsp spring-mvc apache-tiles


    【解决方案1】:

    对于任何感兴趣的人,这就是我最终实现它的方式。我使用 Tiles 3 做到了这一点,我不确定以前版本的 Tiles 中的语法是否不同。它似乎工作得很好。

    layout.xml

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

    【讨论】:

    • 感谢您发布解决方案!正是我想要的。
    • 漂亮干净的解决方案。谢谢
    • 为什么我们在tiles配置文件中定义jsp依赖?这将是开发人员的返工,因为设计师在 html/jsp 文件中声明了这些依赖项。
    • 感谢您的回答!它解决了我的问题,但我仍然想直接在页面中添加一些 JS。 Tiles 是否有某种“部分”,您可以在其中定义直接从 JSP 中包含在主布局中的内容?
    • 由于 javascripts 只是一个模型对象,请尝试从控制器中获取它并向其添加更多特定于页面的脚本。 JSTL 应该呈现更新后的列表
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多