2013-05-17 4 views
4

Я использую весенний mvc 3 и плитки 2 с определениями подстановочных знаков. Я хочу загрузить дополнительные файлы css и javascript внутри некоторых моих фрагментов. Есть ли способ сделать это? Предпочтительно в файле tile jsp, а не в файлах-styles.xml.загрузка ресурсов в плитки и весна mvc

ответ

8

Это хороший вопрос, потому что одним из основных преимуществ плиток является центральное представление, которое оно обеспечивает в отношении композиции. Было бы очень приятно, если бы эта централизация могла также включать файлы CSS & JS.

Бывает так, что это есть Возможно, вот пример. В этом примере используются плитки 3, но довольно легко адаптироваться к плиткам-2 (три три слоя позволяют использовать несколько типов выражений), вы можете это сделать.

Также обратите внимание, что я использую 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 и не буду склонен тестировать его. Но если вы переводите это на Весну, было бы здорово, если бы вы сами ответили здесь. Я бы с радостью проголосовал.

+0

благодарит за этот подробный ответ. Таким образом, способ сделать это - удалить специальную страницу из подстановочного знака и поместить ее в свое собственное определение. Хотелось бы, чтобы в теге был тег плитки, который будет вставлять ресурсы в голову. –

+1

Это не может существовать по соображениям эффективности. Вы заметите, что на большой странице загружаются (с медленным подключением), данные передаются на страницу. Это предотвращает буферизацию данных на стороне сервера, экономя ресурсы. Если вы хотите, чтобы тип взаимодействия вы объясняли, есть два варианта: 1) Использовать sitemesh (вы платите за эту функцию за то, что контент буферизирован). 2) Что-то, о чем я думаю: работайте над слоем поверх плиток, где вы храните данные определения в БД. Когда определение вставляется в базу данных, вы можете определить все зависимости, когда вы вытаскиваете плит defs ... – 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

1

Так я и сделал с весной, остальное точно так же, как и 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> 
Смежные вопросы