-
Notifications
You must be signed in to change notification settings - Fork 0
Thymeleaf
hyukke edited this page Jun 16, 2016
·
4 revisions
XML, XHTML, HTMLを使用したテンプレートを変換する Java のテンプレートエンジン。
Thymeleaf はth:を付与した属性を解釈して HTML を生成する。
html要素に対して、記述したth:を Thymeleaf に解釈させるための名前空間を指定し、HTML を生成する。
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sample</title>
</head>
<body>
<div>
<span th:text="Something text">Override text</span>
</div>ベースとなるテンプレートページは Decorator と呼ばれる。
名前空間（xmlns）にレイアウトを指定する、
テンプレートページの例は以下の通り。
<!DOCTYPE html>
<html lang="ja"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title layout:title-pattern="$CONTENT_TITLE">Sample</title>
<link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}" type="image/vnd.microsoft.icon"/>
<link rel="icon" th:href="@{/assets/images/favicon.ico}" type="image/vnd.microsoft.icon"/>
<!-- XXX Reading CSS Files... -->
</head>
<body class="layout">
<div th:replace="fragments/header :: header"></div>
<div class="side">
<div th:replace="fragments/menu :: menu"></div>
</div>
<div class="main main-spread">
<div layout:fragment="content"></div>
<div th:replace="fragments/contentFooter :: contentFooter"></div>
</div>
<!-- XXX Reading Script Files... -->
</body>
</html>- テンプレートページに指定した
layout:fragment="content"の箇所に、各コンテンツページの同属性の箇所が埋め込まれる -
layout:title-pattern="$CONTENT_TITLE"各コンテンツのタイトルを反映することが可能
テンプレートページに対して、各コンテンツページは Fragment と呼ばれる。
コンテンツページには、テンプレートページと同様に名前空間にレイアウトを指定し、layout:decoratorでテンプレートページを指定する。
コンテンツページ内の主要部分を置き換えるようにした例は以下の通り。
<!DOCTYPE html>
<html lang="ja"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="layout">
<head>
<title>サンプル検索</title>
</head>
<body>
<div layout:fragment="content">
<!-- XXX Something Contents... -->-
htmlの属性において、 Decorator がページ全体に適用されるように指定 - 全体的に読み込むスタイルシートやスクリプトファイルは、個別の指定は不要
- コンテンツページに指定した
layout:fragmentが、テンプレートページの同属性の箇所に置き換わる
スクリプトの読み込みを置き換えるようにした例は以下の通り。
<!-- Decorator -->
<div layout:fragment="contentScripts" th:remove="tag"></div>
</body> <!-- Fragment -->
<div layout:fragment="contentScripts">
<script th:src="@{/js/xxxx.js}"></script>
</div>
</body>HTML 要素に特殊な属性および式を埋め込むことによって、置換された HTML が生成される。
th:から始まる属性に変数式${...}を指定すると、指定した値によって要素が置換される。
テキストが指定されていても上書きされる。
<p th:text="${sample.sampleId}">0001</p>th:objectによって選択したオブジェクトのプロパティは、選択変数式*{...}で指定することができる。
<div th:object=${sample}>
<p th:text="*{sampleId}"></p>
</div>URL を指定する際は、リンク URL 式@{...}を指定することができる。
絶対 URL に加え、相対 URL も指定することが可能。
<div>
<!-- 絶対 URL -->
<a href="sample.html" th:href="@{http://www.sample.co.jp}">Absolute URL</a>
<!-- ページ相対 URL -->
<a href="sample.html" th:href="@{sample/search.html}">Related Page URL</a>
<!-- コンテキスト相対 URL -->
<a href="sample.html" th:href="@{/sample/search}">Related Context URL</a>
<!-- サーバー相対 URL 、同じサーバ内の異なるコンテキストの URL を指定 -->
<a href="sample.html" th:href="@{~/another/sample/search}">Related Server URL</a>
<!-- プロトコル相対 URL -->
<a href="sample.html" th:href="@{//sample.co.jp/sample.js}">Related Protocol URL</a>
</div>