Thymeleafテンプレートエンジンを使う (2/4)
作成:2015-04-25 10:24
更新: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属性を使っています。
「th:text」は、この<p>タグに表示されるテキストを示す属性です。ここに値を用意することで、それが<p>タグにテキストとして表示されるようになります。要するに、こういうことですね。
今回は、${msg}という値を使っていますね。これは、サーバー側から渡される変数msgをここに出力するためのものです。この変数は、コントローラー側で用意すればいいでしょう。
まず、テンプレートファイルを用意しましょう。テンプレートファイルは、「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>
※関連コンテンツ
「初心者のためのSpring Bootプログラミング入門」に戻る