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

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

とっかかりということで、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 BuildGoalscompile を指定して実行する。
  • プロジェクトで右クリックして 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>

templateResolverproperty の意味合いは以下の通り。
  • prefixsuffix は、Viewテンプレートの検索先を指定します。この場合は、 /WEB-INF/templates/*.html からViewテンプレートを探します。
  • templateMode は、Viewテンプレートで使用する形式を指定します。
  • 指定できる形式は、ここを参照してください。

テンプレートの置き換え

Hello WorldのJSPのテンプレートからThymeleafのテンプレートに置き換えます。
サーブレットの設定で書いた通り、 /WEB-INF/templates を作成してベースにするHTMLファイルを置きます。
今回は、 home.jsphome.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としてまとまっています。今回はこれを参考にしています。

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


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

コメント

Amazon ad