- 追加された行はこの色です。
- 削除された行はこの色です。
#freeze
[[Spring-MVC/ステップ・バイ・ステップ]]
2008/04/08からのアクセス回数 &counter;
#contents
** なぜVelocityを使うのか [#jdb9d0e3]
[[Vecotiy活用術>http://www.pwv.co.jp/take_public_html/EStore/docs/Velocity.html]]
でも示していますが、もう一度整理してみると
- ブラウザーで出力イメージをそのまま確認でき、Velocityテンプレートの変数と表示箇所の対応を確認できる
- VTL（Velocityの記述言語）の構文がシンプルで分かりやすい
- 変数のアクセス記法が柔軟で、javaで記述したメソッドも呼び出すことができる
- Webアプリケーションのビュー以外にも汎用のテンプレートしてjavaのプログラムで利用できる
が、挙げられます。
プログラムが仕事の私にとって最後の「汎用のテンプレート」を習得することは大きなメリットです。
** Velocityテンプレートをブラウザーで表示した例 [#p407be34]
Recipeの編集画面のVelocityテンプレートをブラウザーで表示すると以下のように表示されます。
#ref(edit_vm.jpg);
Nameの値を保持しているrecipe.nameがテキスト領域に表示され、変数と値の対応を簡単に確認することが
できます。
WebアプリケーションによってHtmlに変換された画面は、
#ref(edit_html.jpg);
です。
** VTLの構文 [#fab0fbe1]
Velocityテンプレートで使用されているテンプレート言語（以下VTLと記す）の構文は、非常にシンプルです。
詳しくは、
[[VTLのページ>http://www.jajakarta.org/velocity/velocity-1.2/docs-ja/vtl-reference-guide.html]]
を参照してください。
*** 変数の値の参照 [#i469b9fa]
変数の値を参照する方法には、以下の3通りがあります。
- 通常表記：$変数名
- 沈黙表記：$!変数名
- 正式表記：${変数名}
通常表記と沈黙表記の違いは、参照する変数の値がnullの場合に$変数名を表示するのか、何も表示しないかです。
*** 変数属性（プロパティ）の参照 [#ca703583]
属性へのアクセスは、変数名.(ドット)の後に属性名を指定します。
変数がハッシュマップの場合には、キーを属性として指定することでハッシュマップの値を参照することができます。
*** メソッド呼び出し [#i636b95d]
$変数名.メソッド名（）または$変数名.メソッド名（パラメータ）の形式でjavaのメソッドを呼び出すことができます。
*** 変数への代入 [#fdf27f42]
変数への代入は以下の形式で使用します。
#pre{{
#set($lref = rref)
}}
- lrefには、代入する変数名を指定します
- rrefには、代入する値を指定。四則演算も使用可能です
例）moneyに123をセットします
#pre{{
#set($money="123")
}}
*** 条件分岐 [#a9ba5944]
条件分岐処理は、以下の形式で使用します。
#pre{{
#if (condition)
output
#elseif (condition)
output
#else
output
#end
}}
- conditionには、条件を指定します
- outputには条件に一致したときに出力する文字列または、VTLを指定します
*** ループ [#fb4127b0]
ループ処理は、以下の形式で使用します。
#pre{{
#foreach($ref in $list)
statement
#end
}}
- $refは、ループ内で使われる変数を指定します
- $listは、リストまたはマップ変数を指定します
- statementには、$refがある間出力する文字列または、VTLを指定します
*** インクルード指定 [#w30f25fc]
vmのインクルードには、parseとincludeの2種類があります。
- parseは、インクルードしたVTLを解析する
- includeは、インクルードしたVTLを解析しない
使用方法は、
#pre{{
#include(テンプレートファイル名)
#parse(テンプレートファイル名)
}}
です。
*** マクロ定義 [#ved09110]
よく使う処理をマクロとして登録することができます。
マクロの定義は以下の通りです。
#pre{{
#macro($vmname $arg1, $arg2, ... $argn)
VTL 構文
#end
}}
- vmnameは、マクロ名
- $arg1のように必要な引数を指定します
- VTL 構文には、マクロを使って出力する文字列または、VTLを指定します
マクロの呼び出しは、#vmname( $arg1 $arg2 )
のように呼び出します（$arg1と$arg2の間にカンマがないことに注意してください）
*** コメント文 [#ge77c251]
##行内コメントまたは、#*複数行コメント*#の形式で指定します。
** Velocityをビューとする設定方法 [#y5439f21]
*** viewResolverの指定 [#qf9965e5]
ビューの方式を指定しているのは、coverc-servlet.xmlのviewResolverタグの部分です。
これを以下の定義に置き換えます。
#pre{{
<bean id="velocityConfigurer" class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<property name="resourceLoaderPath" value="WEB-INF/velocity/" />
</bean>
<bean id="viewResolver" class="org.springframework.web.servlet.view.velocity.VelocityViewResolver">
<property name="suffix" value=".vm" />
</bean>
}}
この設定方法では、日本語を表示する場合ブラウザーのテキストエンコーディングをその都度
指定する必要があります。
日本語を表示す設定は、[[Spring-MVCのビューにVelocityを使いたい]]を参照してください。
*** ライブラリの追加 [#h7da4d89]
Velocityを使用するため、pom.xmlにvelocityのライブラリを追加します。
#pre{{
<dependency>
<groupId>velocity</groupId>
<artifactId>velocity-dep</artifactId>
<version>1.4</version>
</dependency>
}}
いつものように、クラスパスを変更します。
#pre{{
$ rm .project .classpath
$ mvn eclipse:eclipse -DdownloadSources=true
}}
** Velocityテンプレートの追加 [#f985fb0a]
Velocityテンプレートは、src/main/webapp/WEB-INF/velocityディレクトリに配置します。
editRecipe.vmは、次のようになります。
#pre{{
<html>
<head>
<title>Recipes</title>
</head>
<body>
Edit Recipe
</body>
<form method="post" action="#springUrl("/editrecipe.htm")">
<input type="hidden" name="id" value="$!recipe.id">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" value="$!recipe.name" size="20"></td>
<td></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="Save Changes"/>
</td>
</tr>
</table>
</form>
</html>
}}
同様にswitchboard/listRecipes.vmは、次のようになります。
#pre{{
<html>
<head>
<title>Recipes</title>
</head>
<body>
<table>
#foreach ($recipe in $recipeList)
<tr>
<td>${recipe.id}</td>
<td>${recipe.name}</td>
#set( $editLink = "/editrecipe.htm?id=${recipe.id}" )
<td><a href="#springUrl(${editLink})">[edit]</a></td>
</tr>
#end
</table>
</body>
</html>
}}
これだけの処理で、ビューでVelocityを使用することができるようになります。
簡単でしょう!!
** コメント [#uba18ec0]
この記事は、
#vote(おもしろかった[1],そうでもない[0],わかりずらい[0])
#vote(おもしろかった[23],そうでもない[1],わかりずらい[1])
皆様のご意見、ご希望をお待ちしております。
#comment
#comment_kcaptcha
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
