libro
www.tuyano.com
初心者のためのSpring Bootプログラミング入門

Thymeleafテンプレートエンジンを使う (2/4)

作成:2015-04-25 10:24
更新:2015-04-25 10:24

■テンプレートファイルを作る

では、さっそくThymeleafを利用しましょう。前にGroovyでちらっとだけ使ってみましたが、覚えていますか? 今回はもうちょっと本腰を入れて使ってみてください。

まず、テンプレートファイルを用意しましょう。テンプレートファイルは、「main」フォルダ内に用意される「resources」フォルダの中に、更に「templates」というフォルダを作って、そこに入れます。まずは「reources」フォルダと「templates」フォルダを用意して下さい(「resources」フォルダは既にあるはずです)。

そして、「templates」フォルダ内に「helo.html」という名前でファイルを作成しましょう。Thymeleafは、通常のhtmlファイルとして作成をします。そして下のリスト欄のようにソースコードを記述しましょう。

Thymeleafを使ったテンプレートファイルでは、<html xmlns:th="http://www.thymeleaf.org">という形で<html>タグを用意しました。これにより、「th:○○」といった型式のThymeleaf用の属性が使えるようになります。ここでは、<p>タグのところに、このth属性を使っています。
<p class="msg" th:text="${msg}" />

th:text」は、この<p>タグに表示されるテキストを示す属性です。ここに値を用意することで、それが<p>タグにテキストとして表示されるようになります。要するに、こういうことですね。
<p th:text="○○" />
 ↓
<p>○○</p>

今回は、${msg}という値を使っていますね。これは、サーバー側から渡される変数msgをここに出力するためのものです。この変数は、コントローラー側で用意すればいいでしょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>top page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    p.msg { border:solid 1px lightgray; padding:10px; }
    </style>
</head>
<body>
    <h1>Helo page</h1>
    <p class="msg" th:text="${msg}" />
</body>
</html>
※関連コンテンツ

「初心者のためのSpring Bootプログラミング入門」に戻る