Spring Framework Advent Calendar 2012の５日目です。

とっかかりということで、Hello Worldです。
以前のブログでもこの組み合わせについて書いていますが、導入を含めて少しまとめた形で書いていこうと思います。
以下の環境で確認しています。

Max OS X 10.7.5
Eclipse JavaEE Juno SR1
JDK 1.6
Spring MVC 3.1.1.RELEASE
Thymeleaf 2.0.13

プロジェクト作成

Spring MVCテンプレートからのプロジェクト作成

Spring MVCのテンプレートからプロジェクトを作ります。
Eclipseで、
New -> Other -> Spring Template Project -> Spring MVC Project
から作成します。ウィザードを完了した状態で私の環境ではプロジェクトにエラーがある状態でした。これらは以下を実行して解消しました。

Run -> Run As -> Maven Build で Goals に compile を指定して実行する。
プロジェクトで右クリックして Maven -> Update Project を選択する。

Thymeleafのライブラリを依存関係に追加

Spring 3.xでThymeleafを使う場合には、 thymeleaf-spring3 を使用します。
使用するには、Mavenのpom.xmlに以下を追加します。

<dependency>
 <groupId>org.thymeleaf</groupId>
 <artifactId>thymeleaf-spring3</artifactId>
 <version>2.0.13</version>
</dependency>

テンプレートエンジンの変更

Spring MVCのテンプレートで作成されるプロジェクトは、JSPのテンプレートエンジンを使ったHello Worldです。これをThymeleafのテンプレートエンジンに差し替えます。

サーブレットの設定

サーブレットの設定ファイルを以下のように書き換えます。

<beans:bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
 <beans:property name="prefix" value="/WEB-INF/templates/" />  
 <beans:property name="suffix" value=".html" />
 <beans:property name="templateMode" value="HTML5" />
</beans:bean>
 
<beans:bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine">
 <beans:property name="templateResolver" ref="templateResolver" />
</beans:bean>

<beans:bean class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
 <beans:property name="templateEngine" ref="templateEngine" />
</beans:bean>

templateResolver の property の意味合いは以下の通り。

prefix と suffix は、Viewテンプレートの検索先を指定します。この場合は、 /WEB-INF/templates/*.html からViewテンプレートを探します。
templateMode は、Viewテンプレートで使用する形式を指定します。

ここ

テンプレートの置き換え

Hello WorldのJSPのテンプレートからThymeleafのテンプレートに置き換えます。
サーブレットの設定で書いた通り、 /WEB-INF/templates を作成してベースにするHTMLファイルを置きます。
今回は、 home.jsp を home.html とリネームして、JSPテンプレートのプロジェクトを実行した際に生成されたHTMLを中身としました。
この時点では、動的に出力は変化しません。

動的な出力

JSPテンプレートのHello Worldでは、現在時刻を表示するようになっていました。
同じことをThymeleafテンプレートでもやってみます。

データの作成

コントローラーの home メソッドは以下のように書き換えます。

@RequestMapping(value = "/", method = RequestMethod.GET)
public String home(Locale locale, Model model) {
 logger.info("Welcome home! The client locale is {}.", locale);
 
 Date date = new Date();
 DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
 
 String formattedDate = dateFormat.format(date);
 
 String message = "  The time on the server is " + formattedDate + ". ";
 
 model.addAttribute("serverTimeMessage", message );
 
 return "home";
}

JSPからの変更点はL10〜12です。
Thymeleafでは後述するようにHTMLのタグ属性で置換対象を指定します。このため、タグの中身全体を message で作成して serverTimeMessage 属性でViewに渡しています。

テンプレートでのデータの受け取り

テンプレートを以下のように変更して、コントローラーからの serverTimeMessage を出力に反映します。

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

th:text でコントローラーで設定した serverTimeMessage を指定しています。実行時にタグの中身が置き換わります。
th:text と属性で指定することで、タグの中身を想定する内容でHTMLに記述する事ができ、HTMLのみをブラウザで表示した場合にも、実行時と同様の表示が可能になります。これによって、デザインと実装の分離が進む事がThymeleafの利点となります。

まとめ

ここまでで実行するとJSPテンプレートと同様に現在時刻を表示するHello Worldができました。
Thymeleafのテンプレートで指定できる属性は、 The Standard Dialect としてTurtorialに記載があります。ここではごく簡単な例でしたが、他にもいろいろな指定が可能です。
また、Springと合わせた使い方についても別のTurtorialとしてまとまっています。今回はこれを参考にしています。

最後に、ソースについてはここで公開しています。セクションの単位でコミットしました。

６日目はKouhei Tokiさんです！よろしくお願いします！

step by step

2012年12月5日水曜日

Spring + Thymeleafでデザインの分離を進める（のとっかかり） [Spring Framework Advent Calendar 2012 5日目 #jsug ]