Spring広告を含む記事です

【Springフレームワーク】Hibernate5.2とThymeleaf3を使ってデータを一覧表示してみよう！

前回まででJSTLを使ったテーブルデータの一覧表示について、ご紹介させていただきましたが、今回は、テンプレートエンジンThymeleaf3を使ったテーブルデータの一覧表示についてご紹介したいと思います。

はじめに

JSTLを使った画面では、jspファイルを使わないといけないため、どうしても出来上がった画面を確認するために一旦プロジェクトを通して確認しないといけません。

それに比べて、Thmeleafを使った画面では、htmlファイルを使うことができるため、プロジェクトを実行しなくても、画面のプレビューなりでレイアウトや画面構成を確認することができます。

つまりThymeleafを使えば、デザイナーさんにも優しい開発を行うことができるということです！

JSTLを使った画面作成については、下記サイトで紹介しているので、ご興味のある方は参考にしてみてください。

エンジニアぽむの備忘録
2020.04.12
【Springフレームワーク】Hibernate5.2を使ってデータを一覧表示してみよう！
https://iteng-pom.com/archives/639

開発環境

開発環境は下記の通りです。

Spring 5.2.1.RELEASE
Hibernate 5.2.10.Final
MySQL 8.0.16
Thymeleaf 3.0.11.RELEASE
Thymeleafは、2020/06/14時点で最新安定バージョンです。

ThymeleafのDependency追加

  • artifactIdがthymeleafのDependencyを追加しました。

  • artifactIdがthymeleaf-spring5のDependencyを追加しました。

thymeleaf-spring5の5は、Springのバージョン5を意味しています。Springのバージョン4を使っているのなら、thymeleaf-spring4を使用してください。
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.pom2019</groupId>
    <artifactId>SpringWeb</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>

        <!-- Generic properties -->
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

        <!-- Web -->
        <jsp.version>2.2</jsp.version>
        <jstl.version>1.2</jstl.version>
        <servlet.version>3.1.0</servlet.version>

        <!-- Spring -->
        <spring-framework.version>5.2.1.RELEASE</spring-framework.version>

        <!-- Thymeleaf -->
        <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>

        <!-- Hibernate / JPA -->
        <hibernate.version>5.2.10.Final</hibernate.version>

        <!-- Logging -->
        <logback.version>1.2.3</logback.version>
        <slf4j.version>1.7.25</slf4j.version>

        <!-- Test -->
        <junit.version>4.12</junit.version>

    </properties>

    <dependencies>

        <!-- Spring MVC -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring-framework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring-framework.version}</version>
        </dependency>

        <!-- Other Web dependencies -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>${jstl.version}</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>${servlet.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>${jsp.version}</version>
            <scope>provided</scope>
        </dependency>

        <!-- Spring and Transactions -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>${spring-framework.version}</version>
        </dependency>

        <!-- Thymeleaf -->
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>${thymeleaf.version}</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
            <version>${thymeleaf.version}</version>
        </dependency>

        <!-- Logging with SLF4J & LogBack -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>${slf4j.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>${logback.version}</version>
            <scope>runtime</scope>
        </dependency>

        <!-- Hibernate -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-entitymanager</artifactId>
            <version>${hibernate.version}</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.16</version>
        </dependency>

        <!-- Test Artifacts -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>${spring-framework.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.6.1</version>
                <configuration>
                    <encoding>UTF-8</encoding>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

ViewResolverの設定

テンプレートエンジンThymeleafを使うことを宣言しています。

package com.pom2019.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.thymeleaf.spring5.SpringTemplateEngine;
import org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring5.view.ThymeleafViewResolver;
import org.thymeleaf.templateresolver.ITemplateResolver;

@Configuration
public class ThymeleafConfig {
    @Bean
    public ITemplateResolver templateResolver() {
        SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
        resolver.setPrefix("/WEB-INF/view/");
        resolver.setSuffix(".html");
        resolver.setTemplateMode("HTML");
        resolver.setCharacterEncoding("UTF-8");
        return resolver;
    }

    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        //templateEngine.addDialect(new SpringSecurityDialect());
        //templateEngine.addDialect(new Java8TimeDialect());
        return templateEngine;
    }

    @Bean
    public ViewResolver viewResolver() {
        ThymeleafViewResolver thymeleafViewResolver = new ThymeleafViewResolver();
        thymeleafViewResolver.setTemplateEngine(templateEngine());
        thymeleafViewResolver.setCharacterEncoding("UTF-8");
        return thymeleafViewResolver;
    }
}

元のViewResolverを無効化

元からあるViewResolverをコメントアウトして無効化します。そして、新しいViewResolverが設定された今回のThymeleafConfigクラスまでのパッケージをコンポネートスキャンします。

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

    <!-- Uncomment and your base-package here: -->
    <context:component-scan
        base-package="com.pom2019.controller"/>
    <context:component-scan
        base-package="com.pom2019.config"/>

    <mvc:annotation-driven />

    <!-- 
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
     -->
            <!-- Example: a logical view name of 'showMessage' is mapped to '/WEB-INF/jsp/showMessage.jsp' -->
    <!-- 
            <property name="prefix" value="/WEB-INF/view/"/>
            <property name="suffix" value=".jsp"/>
    </bean>
     -->

</beans>

htmlファイルの作成

  • 名前空間thでThymeleafを使用すること宣言しています。

  • タグ内にthと付いている箇所が今回追加した内容です。

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>家電リスト</title>
        <style>
    table {
        border-collapse: collapse;
    }
    td {
        border: 1px solid gray;
        padding: 3px 8px;
    }
    </style>
</head>
<body>
<h2>家電リスト</h2>

<p>
    <button id="btnNew">新規</button>
</p>

<table>
    <tr>
        <td>id</td>
        <td>家電名</td>
        <td>購入日時</td>
        <td colspan="2">アクション</td>
    </tr>
    <tr th:each="data : ${list}">
        <td class="id" th:text="${data.id}"></td>
        <td th:text="${data.householdAppliancesName}"></td>
        <td th:text="${#dates.format(data.purchaseDate, 'yyyy/MM/dd')}"></td>
        <td><button class="btnEdit">編集</button></td>
        <td><button class="btnDelete">削除</button></td>
    </tr>
</table>
</body>
</html>

実行結果

本プロジェクトをサーバーに追加してサーバーを起動後、実行します。

画面が表示されました！

まとめ

テンプレートエンジンThymeleafを使えば、あたかも静的htmlファイルを作るような感覚で、動的なhtmlファイルを作ることができます。

thタグは、プレビュー画面では無視されるようなので、Javaを介さず画面のデザインを決めたい場合や、また画面のデザインを決めた画面を活用したい場合にも、重宝しそうですよね！

最後までお読み頂きありがとうございました。

広告

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUT US
ぽむ
はじめまして！ ぽむ と申します。 Java、Kotlin (Android)、VBAなどの開発経験があるITエンジニアです。 備忘録として始めたブログですがみなさまのお役に立てたら光栄です。 英語など IT 以外の話題にも触れていこうと思っています。 詳しい自己紹介についてはこちら！ よろしくお願いします。