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

Thymeleaf使用時の.cssや.jsファイルの置き場所

src/main/resources/templatesの中にhtmlファイルを入れている。 CSSやJavaScriptファイルは、 src/main/resources/staticというフォルダ …

no image

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

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

no image

Exception parsing document: template=”/aaa/bbb”, line 15 – column 68

SpringMVC+Thymeleafで開発をしていて、こんなエラーになる時がある。 Exception parsing document: template=”/aaa/bbb&#822 …

no image

ThymeleafでHTML5を使い、閉じタグを書かない方法

Thymeleafのデフォルト設定では閉じタグを要求される SpringMVC+Thymeleafで開発しようとして、HTML5を使うことにした。 <!DOCTYPE html> < …

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 ‘ …