back

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

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

では、さっそく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をここに出力するためのものです。この変数は、コントローラー側で用意すればいいでしょう。



(by. SYODA-Tuyano.)

※リストが表示されない場合

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>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.