thymeleaf備忘録
概要
thymeleafはjavaのテンプレートエンジンで、最近流行っているらしい。
なんでも、静的にも動的にもページが描画できて、WEBデザイナーとプログラマの共同作業が可能、つまりMVCの分業ができるらしい(詳細は下記) 。
センスある人にviewは任せて、われわれプログラマはゴリゴリとロジックかけて、適材適所みたい。
デザインが完成し、htmlファイルが来ると、タグの埋め込みやらコントローラ間の値の受け渡しは
プログラマの仕事で、thymeleafの勉強が必要となるわけです。
基本的なところにとどまりますが、備忘録として。
静的にも動的にも描画できる
概要で述べた「静的にも動的にも描画できる」というthymeleafの売り。なんやねんという方へ。
静的にとは値の受け渡しなしでも値が表示できるという意。動的にとはコントローラ側から値を受け取れるという意。例は下記のとおり。th:textは表示しますよ的なやつ。
I'am <span th:text="${nature}"> Human </span></p>
例えば、コントローラ側で「nature」に「gentle」がセットされているとき、「I'm gentle」と表示される。(予想通りだわ)
一方、「nature」に何も入っていないときは、エラーにならず「I'm Human」と表示される。
このように、htmlがコントローラに依存しない点が使いやすいようである。
繰り返し処理
コントローラ側でリストをセットし、そいつを回したいなんてあるあるですね。
こんな感じに使います。リストは性質をフィールドにもつ人間オブジェクト(dtoとする)のリストで
tableに表示していくものとします。
<tr th:each="nature : ${human}">
<td th:text="${nature.name}">太郎</td>
<td th:text="${nature.age}">30</td>
<td th:text="${nature.sex}">男</td>
</tr>
<tr>タグでリストを回しています。javaの拡張for文みたいなイメージ。そこで取り出したオブジェクトか
ら、<td>タグで値をとります。「${nature.name}」でnameが取れます(dtoの参照変数名と合わせる)。
条件分岐
1.条件に沿う場合のみ出力したい場合
条件に合うときのみ、何らかの処理をしたいときは「th:if」を利用する。
例えば、「エラーメッセージがnullでないときにエラーと表示したい」とき。
<p th:if="${errorMessage != null}">エラー</p>
上記は「errorMessage」がnullでないときは「エラー」を出力します。
対してnullの場合は<p>タグごと消えます。つまり何も出力されません。
「th:if」の反対の意を持つものとして「th:unless」も用意されているみたいですが
読みにくいし、あまり使いたくないですね。
2.条件に沿うときと沿わないときとで出力を変えたい場合
条件にあうときはこっち、沿わんときはこっちを表示したいんじゃって時は、
三項演算子が使えます。これはなんかけっこう使えました。例は以下。
<p th:text="${---条件式---}? 'A' : 'B'"/>
条件式が真のとき「A」が、偽のとき「B」が出力されます。
このように書けば、「if...then...else...」が実現できるはず。
3.分岐が多数ありそれぞれ出力を変えたい
これがこの時はこれで...のように多数の分岐を要する時は「switch」が使えます。
上記で取り上げた人間オブジェクトを例とします。
<td th:switch="${nature.age}">
<p th:case =="24">1990年生まれ</p>
<p th:case =="23">1991年生まれ</p>
<p th:case =="22">1992年生まれ</p>
</td>
このようにjavaと同じように使えます。
これで「if...else if...else if...」を実現出来るはず。
ただし、cssなどデザインを付けるとき、中のタグにまで範囲が
及ぶかどうかは検証できていないのでご注意を。
以上。