Thymeleaf

Thymeleafでヘッダー・フッター・メニューなどを外だしするにはフラグメントを使用する

投稿日:

業務システムでは、ヘッダー・フッター・メニューなどを外だしすることが多い。
SAStrutsなどではtiles:putを使用して実現していたようなことだ。

Thymeleafではフラグメント化という機能を使用し、2パターン用意が使える。

読み込まれる側の定義

読み込みたい属性に th:fragment=”フラグメント名”を付けておく。

もしくは、単純にid属性を指定するだけでも良い。
下記例では、common.htmlに外だしするとする。

例1)
<span th:fragment=”hoge1“>フラグメントhoge1の内容</span>

例2)
<span id=”hoge2“>フラグメントhoge2の内容</span>

読み込む側の実装

  • th:include属性を使用する方法
  • th:replace属性を使用する方法

がある。読み込まれる側の定義でしたフラグメント名を上記属性値に指定するだけである。

th:includeの注意点は、タグ内の要素だけを取得してくることです。
属性も含めて取得する場合は、置換、すなわちth:replaceを使用する必要がある。

読み込む側の実装
例1)
<span th:include=”common::hoge1“>hoge1に置換されます</span>

例2)
<span th:include=”common::hoge2“>hoge2に置換されます</span>

読み込まれる側に変数を埋め込むのも可能

もちろん、読み込まれる側(共通部分)に変数(プロパティ)を埋め込むこともできる。

読み込まれる側にこのように書いておく。
<span th:text=”${hoge3}”>hoge3に置換されます</span>

コントローラークラスで
model.addAttribute(“hoge3”, “hoge3の内容です”);
上記のように書いておけば、hoge3は置換される。

 

フラグメント化すると、起動するまで全体像が見えない

フラグメント化してしまうと、SpringBoot起動するまで全体が見えなくなってしまう。

Thymeleafを使う理由はデザイナーとプログラマの協業可能と言う点が大きいのだが、残念ながらフラグメント化してしまうとそれが不可能になってしまう。

<参考>
http://blog.hachiro.info/entry/2013/12/22/115438

-Thymeleaf

執筆者:


comment

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

関連記事

no image

Spring-Thymeleafのバージョン別APIはこちら

Thymeleafの公式APIはここにある。 http://www.thymeleaf.org/documentation.html 自分はSpring Bootから入れてきたんだけど、どのバージョン …

no image

SpringMVC+Thymeleaf:Neither BindingResult nor plain target object for bean name ‘userName’ available as request attribute

java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name ‘ …

no image

次期業務システムのフロントエンドはHTML5+JavaScript?テンプレートエンジン?

Strutsの次期MVCフレームワークの本命として定着したのがSpringframeworkです。 SpringBootによってSpringMVCのアプリが簡単に始められるとして、業務システムに使用さ …

no image

Thymeleaf-SpringMVC <input type=”password”>はth:filedで出力

参考 http://arimodoki.dip.jp/promenade/t_htmlpassword.html ユーザー登録画面で、ユーザー名(ID)とパスワードを入力させて、次は確認画面で両方を表 …

no image

Thymeleafのth属性と基本的な式

th属性 th:href テンプレートの実装例 <a href=”./manage” th:href=”@{/echo}”>管理画面< …