加載瓷磚和彈簧的資源mvc

8

這是一個很好的問題，因爲瓷磚的一個主要優點是它提供的關於構圖的中心視圖。如果這個集中化還可以包括CSS文件，那將是非常好的。

發生這種情況是可能的，這裏是一個例子。這個例子使用了tiles3，但它適應tiles-2應該非常簡單（第三個tile讓你使用多種類型的表達式），你可以一步步地做到這一點。

另外請注意，我使用Struts2作爲我的動作框架，這不是問題，但是因爲我要使用一個工作示例，您將知道「OGNL：」前綴表達式意味着EL Struts2使用的將會是用過的。你也應該知道，如果你升級到Tiles-3，你還可以使用Spring EL，在表達式前加上「MVEL：」。

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:@[email protected]().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的等價物，也不會傾向於測試它。但是，如果你把它翻譯成春天，那麼你自己在這裏回答會很好。我很樂意投票。

來源

2013-05-19 20:42:25 Quaternion

+0

感謝這個詳細的答案。所以要做到這一點的方法是從通配符中移除特殊頁面並將其放入自己的定義中。我希望有一個瓷磚標籤，我可以在身體中使用，將資源插入頭部。 –

+1

由於效率原因，這不能存在。您會注意到大頁面加載（連接速度很慢）數據正在流入頁面。這樣可以防止數據在服務器端緩存，節省資源。如果你想要你解釋的交互類型，有兩種選擇：1）使用sitemesh（你爲這個功能支付的內容被緩存）2）我正在考慮的東西：在瓦片頂部建立一個圖層，將定義數據存儲在數據庫中。當定義被插入到數據庫中時，您可以定義所有的依賴關係，當您拉取圖塊定義時... – Quaternion

+0

假設正文圖塊需要3個css文件，2個js文件，那麼當從數據庫中檢索圖塊定義時，我們可以獲取所有必需資源的列表。確實，瓷磚呈現自上而下，但如果我們可以在渲染開始之前獲得所有必需的成分！我們可以通過效率組合（瓷磚）獲得裝飾者（SiteMesh）的好處。 – Quaternion

1

在調度員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/" />

並在您的瓷磚，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

來源

2013-05-18 05:17:15

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>

來源

2015-06-11 17:41:12

加載瓷磚和彈簧的資源mvc

回答

相關問題