使用 Apache Tiles 3 構建頁面佈局

時間 2019-12-06

原文原文鏈接

參考博客：http://aiilive.blog.51cto.com/1925756/1596059
Apache Tiles是一個JavaEE應用的頁面佈局框架。Tiles框架提供了一種模板機制，能夠爲某一類頁面定義一個通用的模板，該模板定義了頁面的總體佈局。佈局由能夠複用的多個塊組成，每一個頁面能夠有選擇性的從新定義塊而達到組件的複用。
Tiles最早做爲Apache Struts框架的一個組件，後來被獨立爲Apache的一個獨立項目。
Tiles項目主頁：http://tiles.apache.org/index.html
Tiles配置的DTD定義：http://tiles.apache.org/framework/tiles-core/dtddoc/index.html
這裏咱們經過 Apache Tiles 3 來構建一個簡單的頁面佈局。
首先咱們能夠創建一個maven webapp項目。
（關於如何用maven創建一個webapp項目：http://www.cnblogs.com/moonlightpoet/p/5598802.html）
Apache Tiles依賴的maven dependencies以下：javascript

    <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
    <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-jsp</artifactId>
      <version>3.0.5</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-servlet -->
    <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-servlet</artifactId>
      <version>3.0.5</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-extras -->
    <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-extras</artifactId>
      <version>3.0.5</version>
    </dependency>

在web.xml中添加Tiles監聽器。html

  <listener>
    <listener-class>org.apache.tiles.extras.complete.CompleteAutoloadTilesListener</listener-class>
  </listener>

Tiles監聽器也能夠自定義實現：http://tiles.apache.org/framework/config-reference.htmljava

假設咱們的佈局分爲header,body,footer，而且將html頁面中的meta,script部分抽取出來。
/snippet/meta.jsp:web

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

/snippet/script.jsp:apache

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<style>
div {
    width: 500px;
    height: 50px;
    background: yellow;
}
 
#body {
    background: aqua;
}
</style>
<script type="text/javascript">
    document.writeln("words wrote by script.jsp");
</script>

/snippet/header.jsp:app

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>header</h1>

/snippet/footer.jsp:框架

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>footer</h1>

/snippet/body.jsp:webapp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<p>body</p>

經過上面的公共部分和主題，構建一個佈局文件以下：
/layout/layout.jsp:jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html>
<html>
<head>
<tiles:insertAttribute name="meta" />
<title><tiles:insertAttribute name="title" /></title>
<tiles:insertAttribute name="script" />
</head>
<body>
    <div id="header">
        <tiles:insertAttribute name="header" />
    </div>
    <div id="body">
        <tiles:insertAttribute name="body" />
    </div>
    <div id="footer">
        <tiles:insertAttribute name="footer" />
    </div>
</body>
</html>

注意，文件中有關jstl的那一行可能會提示出錯，解決辦法是在pom.xml添加jstl的maven dependency：maven

    <!-- https://mvnrepository.com/artifact/jstl/jstl -->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

Tiles經過在xml文件中配置definition進行頁面公共部分的重用和頁面佈局的組合。

/WEB-INF/tiles-defs.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">
<!-- Definitions for Tiles documentation -->
<tiles-definitions>
 
    <definition name="tiles.base.definition">
        <put-attribute name="meta" value="/snippet/meta.jsp" />
        <put-attribute name="script" value="/snippet/script.jsp" />
        <put-attribute name="header" value="/snippet/header.jsp" />
        <put-attribute name="footer" value="/snippet/footer.jsp" />
    </definition>
    
</tiles-definitions>

上面地定義時抽象的，他沒有包含任何一個jsp頁面模板。
定義好公共部分以後，經過配置definition來組合頁面佈局。
咱們能夠看到，tiles-defs.xml並未包含body.jsp的內容。咱們能夠經過繼承tiles.base.definition來定義一個tiles.index.definition，其佈局模板爲/layout/layout.jsp：

     <definition name="tiles.index.definition" extends="tiles.base.definition"
        template="/layout/layout.jsp">
        <put-attribute name="body" value="/snippet/body.jsp" />
    </definition>

完整的tiles-defs.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">
<!-- Definitions for Tiles documentation -->
<tiles-definitions>
 
    <definition name="tiles.base.definition">
        <put-attribute name="meta" value="/snippet/meta.jsp" />
        <put-attribute name="script" value="/snippet/script.jsp" />
        <put-attribute name="header" value="/snippet/header.jsp" />
        <put-attribute name="footer" value="/snippet/footer.jsp" />
    </definition>
    
     <definition name="tiles.index.definition" extends="tiles.base.definition"
        template="/layout/layout.jsp">
        <put-attribute name="body" value="/snippet/body.jsp" />
    </definition>
 
</tiles-definitions>

到這裏已經將頁面的佈局進行了分割，組合。如今應用definition來構建一個請求響應頁面。
/example/index.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insertDefinition name="tiles.index.definition">
    <tiles:putAttribute name="title" value="example index.jsp" />
</tiles:insertDefinition>

效果以下：

接下來看看網頁源代碼，以下：

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>example index.jsp</title>

<style>
div {
    width: 500px;
    height: 50px;
    background: yellow;
}
 
#body {
    background: aqua;
}
</style>
<script type="text/javascript">
    document.writeln("words wrote by script.jsp");
</script>
</head>
<body>
    <div id="header">
        
<h1>header</h1>
    </div>
    <div id="body">
        
<p>body</p>
    </div>
    <div id="footer">
        
<h1>footer</h1>
    </div>
</body>
</html>

該例子中佈局layout.jsp中body是可變的，title對一個不一樣的頁面有不一樣的標題設置。在tiles-defs.xml的tiles.index.definition繼承了tiles.base.definition,而且添加了其body頁面，接着在插入tiles.index.definition的index.jsp頁面添加了title。這樣作達到的效果是整個站點的header,footer,meta,script抽取到了一個definition，而後經過繼承的方式進行擴展，豐富不一樣的佈局的頁面組成元素，在具體的響應頁面來定義專屬該頁面的內容。從而達到對頁面的佈局的控制，公共部分的複用的效果。

擴展參考內容：http://aiilive.blog.51cto.com/1925756/1596069?utm_source=tuicool&utm_medium=referral