Help us understand the problem. What is going on with this article?

Springboot + Thymeleaf + Layout Dialectを使って画面レイアウトを共通化する

Layout Dialectでレイアウトを共通化してみます。

#thymeleaf3になって変わっているようなので書き直しました。

共通レイアウトは、ページ全体のサイズ、ヘッダ、フッタやコンテンツ部の幅、高さを共通化して、コンテンツ部のみ、固有のページに定義します。下図のような感じをイメージしてます。
image.png

1.開発環境

  • Eclipse 4.8(Photon)
  • Java8
  • Windows 10 home

2.構成

├─java
│  └─com
│      └─sample
│                  HeloController.java
│                  SampleLayoutApplication.java
│                  ServletInitializer.java
└─resources
    │  application.properties
    ├─static
    └─templates
        │  index.html
        └─commons
                layout.html

共通化した画面レイアウト:commos/layout.html
固有の画面:index.html

3.依存関係

build.gradle
dependencies {
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    compile('org.springframework.boot:spring-boot-starter-web')
    runtime('org.springframework.boot:spring-boot-devtools')
    compileOnly('org.projectlombok:lombok')
    compile "org.thymeleaf:thymeleaf:3.0.9.RELEASE"
    compile "org.thymeleaf:thymeleaf-spring4:3.0.9.RELEASE"
    compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0')
    compile('org.webjars:jquery:3.3.1')
    compile('org.webjars:jquery-ui:1.12.1')
    compile('org.webjars:bootstrap:3.3.7')
    providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

Point
compile "org.thymeleaf:thymeleaf:3.0.9.RELEASE"
compile "org.thymeleaf:thymeleaf-spring4:3.0.9.RELEASE"
compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0')

4.共通レイアウト(commons/layout)

layout.html
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Spring Boot Sample Site</title>
<meta name="description" content="common-meta">
<link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{/webjars/jquery-ui/1.12.1/jquery-ui.min.css}" rel="stylesheet" />
<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<script th:src="@{/webjars/jquery-ui/1.12.1/jquery-ui.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</head>
<body>
    <div class="col-lg-6">
        <div class="bg-primary">
            <form th:action="@{/}" method="post">
                <h2 layout:fragment="header"></h2>
                <button>ログアウト</button>
            </form>
        </div>
        <div layout:fragment="contents"></div>
        <footer style="text-align:right;">共通フッタ</footer>
    </div>
</body>
</html>

Point
固有ページでは、ヘッダのタイトルと、個別のフォームをそれぞれ、「header」,「contents」で指定するだけですべてのフォームのレイアウトのイメージが同じになるようにします。また、共通で利用するcssやjavascriptは、layoutに書いておけば、固有ページに書かなくてよくなります。

5.固有ページ

index.html
<!DOCTYPE html>
<html
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorate="~{commons/layout}">

<head>
<title>個別ページタイトル</title>
<meta name="description" content="個別metaタグ">
</head>
<body>
    <div layout:fragment="header">タイトルは個別に設定します。</div>
    <div layout:fragment="contents">
        <P>ここから下が、個別のページです</P>
        <div id="hello-text"></div>
        <!-- 個別ページでjquery-uiが正しくうごくか検証します -->
        <input type="text" class="datepicker"/>
        <script>
            $(function() {
                $('#hello-text').text('Hello SpringBoot from JQuery!!');
                $('.datepicker').datepicker();
            });
        </script>
    </div>
</body>
</html>

Thymeleaf3では、htmlタグに「layout:decorate="~{commons/layout}」とします。
※ Thymeleaf2のときは、「layout:decorator="common/layout"」としていました。

6.実行して作成されたページ
image.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした