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さんです！よろしくお願いします！
