記憶庫

記憶庫

Tilesテンプレートからフッター部分を分離する

手順

タイル定義にフッター枠を追加する

/chameleon-web/src/main/webapp/WEB-INF/tiles/tiles-definitions.xmlApache Tilesの定義ファイル)に、フッター枠を追加する。

<?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="layouts" template="/WEB-INF/views/layout/template.jsp">
        <put-attribute name="title" value="Chameleon" />
        <put-attribute name="header"
            value="/WEB-INF/views/layout/header.jsp" />
        <put-attribute name="body" value="" />
        <!-- フッター枠を追加する -->
        <put-attribute name="footer"
            value="/WEB-INF/views/layout/footer.jsp" />
    </definition>

    <definition name="*/*" extends="layouts">
        <put-attribute name="title" value="title.{1}.{2}" />
        <put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" />
    </definition>
</tiles-definitions>
フッターの記述を移動する

/Chameleon-web/src/main/webapp/WEB-INF/views/layout/template.jsp(レイアウト定義テンプレート) を以下の通りに修正する。

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript">
    
</script>
<c:set var="titleKey">
    <tiles:insertAttribute name="title" ignore="true" />
</c:set>
<title><spring:message code="${titleKey}" text="chameleon" /></title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/app/css/styles.css">
</head>
<body>
    <div class="container">
        <tiles:insertAttribute name="header" />
        <tiles:insertAttribute name="body" />
        <hr>
        <tiles:insertAttribute name="footer" />
<!-- 
        <p style="text-align: center; background: #e5eCf9;">Copyright &copy; 20XX CompanyName</p>
 -->
    </div>
</body>
</html>

上記でコメントアウトしたフッターの記述を、/Chameleon-web/src/main/webapp/WEB-INF/views/layout/footer.jsp に切り出す。
ついでに表記も修正。

<p style="text-align: center; background: #e5eCf9;">Copyright &copy; 2017 KnowledgeFort</p>
表示確認

以下の通り表示されればOK。