使用Apache Tiles管理JavaScript和CSS

灰狐狸

我正在寻找一种以与ASP.NET MVC 4类似的方式使用Apache Tiles管理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文件执行的操作:

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

本质上,我想要一种干净的方法,使用类似于ASP.NET MVC捆绑方法的Apache Tiles来包含所有JavaScript和CSS。这样,我不必将链接硬编码到每个需要其他附加功能的JSP文件中。

灰狐狸

对于任何有兴趣的人,这就是我最终实现它的方式。我是使用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>

template.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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用CSS和Javascript散发圆形效果

来自分类Dev

使用Apache Felix iPOJO事件管理处理程序

来自分类Dev

使用JavaScript打开和关闭CSS转换

来自分类Dev

使用jQuery的Deferred管理同步和异步JavaScript函数

来自分类Dev

Apache Tiles:管理CSS和JS资源

来自分类Dev

使用freeRadius和Apache进行单点登录?

来自分类Dev

使用Virtualenv和Apache部署Django

来自分类Dev

Spring MVC和Apache Tiles端口连接到AngularJS / Backbone

来自分类Dev

使用Javascript和CSS的ReactJs模式

来自分类Dev

使用Apache POI打开xls和xlsx

来自分类Dev

使用Apache Helix集群管理的Mysql数据丢失处理

来自分类Dev

使用PostgreSQL和Apache安装Redmine 3.0.1

来自分类Dev

Ionic:使用CSS和JavaScript

来自分类Dev

使用JavaScript解析Apache日志时间戳

来自分类Dev

在AngularJS和Apache Tiles中使用文件内Javascript

来自分类Dev

使用JavaScript获取和设置CSS变量?

来自分类Dev

使用Apache和Passenger的SSL

来自分类Dev

使用Puppet和Vagrant配置Apache

来自分类Dev

使用HTML / CSS / Javascript(BibTeX样式)的参考管理

来自分类Dev

使用Thymeleaf和Apache Tiles时避免重复内容的模式

来自分类Dev

使用Apache和MySQL Windows服务

来自分类Dev

使用freeRadius和Apache进行单点登录?

来自分类Dev

Apache Tiles中的insertDefinition和importAttribute有什么区别?

来自分类Dev

使用Apache Oak进行用户管理

来自分类Dev

Rails无法与Apache和乘客配合使用

来自分类Dev

查找Apache正在使用的IP和PORT

来自分类Dev

使用Tiles和SubTiles和纯CSS的菜单

来自分类Dev

Apache 和 Mysql 使用 Ubuntu mate

来自分类Dev

使用 Apache 和 Daphne 提供静态文件