美文网首页
使用Apache Tiles进行视图布局

使用Apache Tiles进行视图布局

作者: xdoyf | 来源:发表于2017-06-22 17:34 被阅读0次

1、在web.xml中配置项目使用的自定义标签及引入所有标签库。

  <!-- JSP默认设定 -->
  <jsp-config>
    <!-- 项目自定义taglib -->
    <taglib>
      <taglib-uri>http://www.xxxxx.co.cn/xxx/xxx/tags</taglib-uri>
      <taglib-location>/WEB-INF/tld/atd-csm.tld</taglib-location>
    </taglib>

    <jsp-property-group>
      <url-pattern>*.jsp</url-pattern>
      <page-encoding>UTF-8</page-encoding>
      <include-prelude>/WEB-INF/views/common/include.jsp</include-prelude>
      <trim-directive-whitespaces>true</trim-directive-whitespaces>
    </jsp-property-group>
  </jsp-config>

参考:taglib and jsp-property-group

以下为include.jsp的内容:

<%@ page session="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles-extras" prefix="tilesx"%>
<%@ taglib uri="http://sargue.net/jsptags/time" prefix="javatime"%>
<!--自定义的jsp标签-->
<%@ taglib tagdir="/WEB-INF/tags" prefix="atd-ui"%>
<!--tld标签-->
<%@ taglib uri="http://www.xxxx.co.cn/asw/atd-csm/tags" prefix="atd-csm" %>

至此,整个项目的标签库就引入完成了,
这样做可以很好地控制标签库前缀的命名风格,且不需重复引入。

2、配置tilesConfigurer

  <!-- [Apache Tiles] -->
  <!-- 读取Tiles定义文件 -->
  <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
    <!--两种定义方式-->
    <property name="definitions" value="/WEB-INF/views/**/tiles.xml" />
    <property name="definitions">
      <list>
       <value>/WEB-INF/tiles/common/tiles.xml</value>
       <value>/WEB-INF/views/**/tiles.xml</value>
      </list>
    </property >
  </bean>

TilesConfigurer会加载/WEB-INF/views/目录下所有的Tile定义。你可以将此配置放到核心配置文件中或是在核心配置文件中导入视图相关的配置如:

<import resource="views.xml" />

并且件TilesConfigurer的配置放到views.xml中。

3、定义通用的模板JSP

standard.jsp:

<!DOCTYPE html>
<html lang="ja">
  <head>
  <!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]-->

  <!--=========== METADATA ============-->
  <!--metadata相关内容-->
  <%@ include file="meta.jsp" %>
  <!--=========== /METADATA ============-->

  <!--=========== StyleSheet ============-->
  <!--引入所有的css-->
  <tilesx:useAttribute name="cssPathList" ignore="true" />
  <c:forEach var="cssPath" items="${cssPathList}">
    <spring:theme var="themeAwareCssPath" code="${cssPath}" text="${cssPath}" />
    <link rel="stylesheet" href="<spring:url value='${themeAwareCssPath}'/>">
  </c:forEach>
  <!--=========== /StyleSheet ============-->

  <!--=========== Script ==============-->
  <%@ include file="/WEB-INF/views/common/fragment/script.jsp" %>
  <!--引入所有的js-->
  <tilesx:useAttribute name="jsPathList" ignore="true" />
  <c:forEach var="jsPath" items="${jsPathList}">
    <script src="<spring:url value='${jsPath}'/>"></script>
  </c:forEach>
  <!--=========== /Script ============-->


</head>
<body id="Wrap">
  <!--插入通用的header和footer-->
  <tiles:insertAttribute name="header" />
  <!--content由具体画面实现-->
  <tiles:insertAttribute name="content" />
  <tiles:insertAttribute name="footer" />
</body>
</html>

tiles.xml:

  <definition name="standard-layout" template="/WEB-INF/views/common/standard.jsp">
    <!--添加通用的header和footer-->
    <put-attribute name="header" value="/WEB-INF/views/common/header.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/common/footer.jsp" />

    <!--添加通用的css-->
    <put-list-attribute name="cssPathList" inherit="true">
      <add-attribute value="/resources/css/import.css" />
      <add-attribute value="/resources/css/mb.css" />
      <add-attribute value="/resources/css/shutter-form-module.css" />
    </put-list-attribute>
    <!--添加通用的js-->
    <put-list-attribute name="jsPathList" inherit="true">
      <add-attribute value="/resources/js/jquery.js" />
      <add-attribute value="/resources/js/shutter.js" />
    </put-list-attribute>
  </definition>

以上就是标准layout的定义,之后所有的独立画面的jsp均继承此标准布局。
比如:

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

  <!-- DIAP160 -->
<definition name="DIAS0160P01PB" extends="standard-layout"><!--继承标准布局-->
    <!--只需添加content的内容即可-->
    <put-attribute name="content" value="/WEB-INF/views/mybooking/DIAS0160P01PB/content.jsp" type="template" />
    <!--添加此画面独有的css-->
    <put-list-attribute name="cssPathList" inherit="true">
      <add-attribute value="/resources/css/common/asw_fw_pc.css" />
      <add-attribute value="/resources/css/common/aswbedSeatmap_pc.css" />
      <add-attribute value="/resources/css/common/aswbedFareReference_pc.css" />
      <add-attribute value="/resources/css/common/asw_screen_pc.css" />
      <add-attribute value="/resources/css/common/aswbedCommon_pc.css" />
      <add-attribute value="/resources/css/common/asw_initialize.css" />
    </put-list-attribute>
    <!--添加此画面独有的js-->
    <put-list-attribute name="jsPathList" inherit="true">
      <add-attribute value="/resources/js/mybooking/DIAS0160P01PB/content.js" />
      <add-attribute value="/resources/js/aswbed_dialog.js" />
      <add-attribute value="/resources/js/target_dmsbe.js" />
      <add-attribute value="/resources/js/aswbed_common.js" />
      <add-attribute value="/resources/js/aswbed_seat_map.js" />
    </put-list-attribute>
  </definition>
</tiles-definitions>

以上。

关于metadata:

<meta charset="UTF-8">
<!--根据画面id到property文件中查找相对应的title,description和keywords的值添加到相应tag中-->
<atc:screenId var="screenId" />
<%-- title--%>
<title><spring:message code="${screenId}.title" arguments="${titleSubstitutionValues}" htmlEscape="true" text="" /></title>

<%-- description --%>
<spring:message code="${screenId}.description" arguments="${descriptionSubstitutionValues}" htmlEscape="true" text=""
  var="descriptionContent" />
<c:if test="${not empty descriptionContent}">
  <meta name="description" content="${descriptionContent}">
</c:if>

<%-- keywords --%>
<spring:message code="${screenId}.keywords" arguments="${keywordsSubstitutionValues}" htmlEscape="true" text="" var="keywordsContent" />
<c:if test="${not empty keywordsContent}">
  <meta name="keywords" content="${keywordsContent}" />
</c:if>

<!--其他metadata-->
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
<meta name="contextPath" content="${pageContext.request.contextPath}">
<meta name="screenId" content="${screenId}">

相关文章

网友评论

      本文标题:使用Apache Tiles进行视图布局

      本文链接:https://www.haomeiwen.com/subject/mzmfcxtx.html