Spring Advent Calendar 2013 3日目です。
http://www.adventar.org/calendars/153

Thymesheetとは

Thymeleafのテンプレートからth属性を取り除いてCSSみたいに外だししようというものです。
https://github.com/connect-group/thymesheet

Thymeleafのおさらい

ThymesheetのREADMEに書いてあるので、おさらいがてら適当訳してみました。

Thymeleafは、Javaのライブラリーです。XHTML/HTML5を提供するWebはもちろんWebでない環境でもっともいい感じの、XML / XHTML / HTML5（他のフォーマットも拡張可能）のテンプレートエンジンです。
Spring MVCに組み込むためのモジュールが提供されており、Spring MVCのJSPテンプレートエンジンに対する、HTML5での完全な代替として使うことが出来ます。
Thymeleafのゴールは、エレガントでちゃんとした形式でのパワフルで自然なテンプレート、つまり静的なプロトタイプとして動作しブラウザで正しく表示できるテンプレートを作る方法を提供することです。

詳しくはこちらをご覧下さい。

Thymesheetの使い方

とっかかりレベルではREADMEみればOKって感じですが、一応サンプル作ってみました。
去年のAdvent Calendarで書いたものから修正しています。
https://bitbucket.org/twopack/spring-thymeleaf/branch/thymesheet
というわけで、さくさくと説明です。

Mavenの設定

pom.xmlに以下を追加します。
Thymesheetは、Thymeleafは2.1.0以降をサポートですのでdependencyのバージョンもチェック。

<dependency>
        <groupId>com.connect-group</groupId>
        <artifactId>thymesheet-spring3</artifactId>
        <version>2.1.0</version>
</dependency>

Spring Configration

コンテキストファイルでテンプレートエンジンの指定をThymesheetのものにします。

<beans:bean id="templateEngine" class="com.connect_group.thymesheet.spring3.SpringThymesheetTemplateEngine">
    <beans:property name="templateResolver" ref="templateResolver" />
</beans:bean>

テンプレート

今回のサンプルだとThymesheetを使う前はこんなです。

<P th:text="${serverTimeMessage}">  The time on the server is 2012/12/05 10:01:10 JST. </P>

これが、Thymesheetを使うとこんなになります。th属性はなくなりました。

<P>  The time on the server is 2012/12/05 10:01:10 JST. </P>

ただし、CSSのようにTSSファイル（Thymesheet Style Sheetかな？）をリンクします。
th属性で指定していた埋め込みの情報は、home.tssに追い出しています。

<link rel="thymesheet" href="resources/ts/home.tss"/>

TSSファイル

で、TSSファイルは以下です。とっかかり過ぎですねw
pタグは以下のth属性入れてね、ということです。

p { 
    th-text: "${serverTimeMessage}"
}

th:textがth-textになったぐらいです。わかりやすいですね。
CSSのようなイメージで以下のような表現が出来ます。READMEより拝借。

table > tbody > tr {
    th-each:"prod : ${allProducts}";
}

まとめ

Thymeleafのコンセプトを更に進めた感じのものだなと思います。
さらにHTMLとの分離が進んで、デザイナーさんとの分解点がはっきりすると思います。
ただ、実用するにはとっかかりだけじゃ不十分ですね、完全に。。。。
Standard Dialectとの対応など、いろいろ確認してみないとダメかな、という感じです。また来年w

明日はToshiaki Makiさんです！

step by step

2013年12月3日火曜日

[Spring Advent Calendar 2013 3日目] Thymesheetを使ってみる #spadc13