Spring Boot Thymeleaf レイアウト

FrontPage > Spring Bootの覚書 > Spring Boot Thymeleaf

画面レイアウト

画面レイアウト †

1. include †

フッタを別ファイルに作成し、メインの画面で取り込むようにしてみる。

フッタファイルを作成する。th:fragmentで指定したタグの内部が取り込まれる対象となる。

(src/main/resources/templates/footer.html)
```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <footer th:fragment="copy">
    <hr/>
    &copy; 2015 ziqoo.com
  </footer>
</body>
</html>
```

メイン画面を作成する。th:includeでfooter.htmlのfragment="copy"部分を取り込む。

(src/main/resources/templates/contentSample.html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="@{/resources/css/base.css}" rel="stylesheet"
  type="text/css" />
<title>Content Sample</title>
</head>
<body>
  <div style="width:100%; height:100px; padding:50px; background-color: aliceblue;">
  このページはcontentSampleです。
  </div>
  <div th:include="footer :: copy"></div>
</body>
</html>

メイン画面表示用のViewControllerをMvcConfig.javaに追加する。

(src/main/java/com/ziqoo/sbSample/MvcConfig.java抜粋)

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/contentSample").setViewName("contentSample");

実行結果

(html)

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/sbSample/resources/css/base.css" />
<title>Content Sample</title>
</head>
<body>
  <div style="width:100%; height:100px; padding:50px; background-color: aliceblue;">
  このページはcontentSampleです。
  </div>
  <div>
    <hr />
    &copy; 2015 ziqoo.com
  </div>
</body>
</html>

↑

2. replace †

includeと違い、タグの中身だけではなくタグそのものが置き換わる。

メイン画面を修正する。

(src/main/resources/templates/contentSample.html抜粋)

<body>
  <div style="width:100%; height:100px; padding:50px; background-color: aliceblue;">
  このページはcontentSampleです。
  </div>
  <div th:replace="footer :: copy"></div>
</body>

実行結果

(html抜粋)

<body>
  <div style="width:100%; height:100px; padding:50px; background-color: aliceblue;">
  このページはcontentSampleです。
  </div>
  <footer>
    <hr />
    &copy; 2015 ziqoo.com
  </footer>
</body>

↑

3. レイアウト定義 †

フッタなどをメインの画面から直接取り込むのではなく、画面のレイアウトを別ファイルに定義しておいて、これを指定する。

モジュールを追加する。
build.gradleファイルのdependenciesにthymeleaf-layout-dialectを追加する。

(build.gradle抜粋)

dependencies {
    compile("org.springframework.boot:spring-boot-starter-jdbc")
    compile("org.springframework.boot:spring-boot-starter-web")
    compile("org.springframework.boot:spring-boot-starter-thymeleaf")
    compile("org.springframework.security:spring-security-web:3.2.6.RELEASE")
    compile("org.springframework.security:spring-security-config:3.2.6.RELEASE")
    compile("org.thymeleaf.extras:thymeleaf-extras-springsecurity3:2.1.1.RELEASE")
    compile("nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect")

Project Explorerより、プロジェクトを右クリックし、[Gradle]->[Refresh All]を選択

MvcConfig.javaにLayoutDialectを追加する。

(src/main/java/com/ziqoo/sbSample/MvcConfig.java抜粋)

package com.ziqoo.sbSample;

import nz.net.ultraq.thymeleaf.LayoutDialect;

import org.springframework.boot.autoconfigure.web.WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;

@Configuration
public class MvcConfig extends WebMvcAutoConfigurationAdapter {

    @Bean
    public LayoutDialect layoutDialect() {
        return new LayoutDialect();
    }

レイアウトファイルを作成する。

(src/main/resources/templates/layout.html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">layout</title>
</head>
<body>
  <div layout:fragment="content"></div>
  <div th:replace="footer :: copy"></div>
</body>
</html>

メインの画面を修正する。
layout:decorator="layout"でレイアウトファイルを指定。
layout:fragment="content"で指定されたタグがレイアウトファイル内の該当箇所と置き換わる。
フッタ部分を削除する。

(src/main/resources/templates/contentSample.html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="@{/resources/css/base.css}" rel="stylesheet"
  type="text/css" />
<title>Content Sample</title>
</head>
<body>
  <div layout:fragment="content" style="width:100%; height:100px; padding:50px; background-color: aliceblue;">
  このページはcontentSampleです。
  </div>
</body>
</html>

実行結果は「2. replace」と同様。

↑

メニューを追加してみる †

レイアウトファイルを修正する。
layout:fragment="menu"を追加

(src/main/resources/templates/layout.html抜粋)

<body>
  <table>
    <tr>
      <td style="vertical-align: top;padding-right: 10px;">
        <div layout:fragment="menu"></div>
      </td>
      <td>
        <div layout:fragment="content"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <div th:replace="footer :: copy"></div>
      </td>
    </tr>
  </table>
</body>

メインの画面を修正する。
layout:fragment="menu"を追加

(src/main/resources/templates/contentSample.html抜粋)

<body>
  <div layout:fragment="content" style="height:100px; padding:50px; background-color: aliceblue;">
  このページはcontentSampleです。
  </div>

  <div layout:fragment="menu">
    <ul>
    <li>あんなこと</li>
    <li>こんなこと</li>
    <li>そんなこと</li>
    </ul>
  </div>
</body>

実行結果

↑

メニューも外出しにしてみる。 †

メニューファイルを作成する。

(src/main/resources/templates/menu.html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
  <div th:fragment="menu">
    <ul>
      <li>買う</li>
      <li>売る</li>
      <li>捨てる</li>
    </ul>
  </div>
<body>
</html>

メイン画面からメニューを取り込むように修正する。

(src/main/resources/templates/contentSample.html抜粋)

  <th:block layout:fragment="menu">
    <div th:replace="menu :: menu">
      <ul>
        <li>あんなこと</li>
        <li>こんなこと</li>
        <li>そんなこと</li>
      </ul>
    </div>
  </th:block>

実行結果