JSPを使っていて、ちょっとレイアウトを確認したいだけなのに、いちいちアプリケーションサーバを立ち上げて、デプロイしないといけないことに、苛立ちを覚えたことはありませんか。デザイナとの連携に苦労したことはないでしょうか。S2JSFを使うと、ViewのテンプレートをHTMLで記述できるようになります。もうJSPに悩まされる必要はなくなるのです。
Seasar2と同様にJDK1.4以上が必要です。S2JSFVx.x.x.zipを解凍してできたs2jsfディレクトリをEclipseで、
「ファイル→インポート→既存のプロジェクトをワークスペースへ」でインポートしてください。
サンプルはS2JSFExamleVx.x.x.jarとして別途用意されているので、ダウンロードして解凍してください。先程と同様に、Eclipseで、「ファイル→インポート→既存のプロジェクトをワークスペースへ」でインポートします。サンプルは、Tomcat5、Tomcat Pluginを使うことを前提にしています。もし、まだインストールしていない場合は、インストールしておいてください。
Tomcatを起動し、ブラウザでhttp://localhost:8080/s2jsf-exampleにアクセスすると、S2JSFのサンプルを見ることが出来ます。
ブラウザで、http://localhost:8080/s2jsf-example/hello/hello.html?message=aaaにアクセスするとHello aaaと表示されるはずです。それでは、HTMLの中身を見てみましょう。
01:<html xmlns:m="http://www.seasar.org/maya" m:extends="/WEB-INF/layout/layout.html"> 02:<head> 03:<meta http-equiv="Content-Type" content="text/html; charset=Windows-31j" /> 04:<title>Hello</title> 05:</head> 06:<body> 07:<span m:inject="f:param" m:name="layoutTitle" m:value="Hello"/> 08:<span m:inject="s:insert" m:name="body"> 09:Hello <span m:value="#{message}">hoge</span> 10:</span> 11:</body> 12:</html>
1行目のxmlns:m="http://www.seasar.org/maya"で名前空間を指定しています。このURI(http://www.seasar.org/maya)は固定です。プレフィックスのmは任意の値を指定することが出来ますが、慣例的にmを使うことになっています。
次のextends属性で、継承するレイアウトを指定しています。一貫したLook & Feelを提供するために、ページのレイアウトが、ヘッダー、メニュー、ボディ、フッターで構成され、個別のページはボディ部分だけが異なるというのは、よく見かけるパターンではないでしょうか。このようなニーズにこたえるために、S2JSFでは、ベースになるページでレイアウトを定義し、個別のページでは、ベースとなるページを継承して特定の部分(例えばボディ)だけを上書きするということが可能になっています。それでは、layout.htmlを見てみましょう。
01:<html xmlns:m="http://www.seasar.org/maya"> 02:<head> 03:<meta http-equiv="Content-Type" content="text/html; charset=Windows-31j" /> 04:<link m:inject="s:link" rel="stylesheet" type="text/css" href="/css/global.css"/> 05:<title m:value="#{layoutTitle}">S2JSF Example</title> 06:</head> 07:<body> 08:<table border="0" cellspacing="5"> 09:<tr> 10: <td colspan="2"><span m:inject="s:insert" m:src="/WEB-INF/layout/header.html"/></td> 11:</tr> 12:<tr> 13: <td width="140" valign="top"> 14: <span m:inject="s:insert" m:src="/WEB-INF/layout/menu.html"/> 15: </td> 16: <td valign="top" align="left"> 17: <span m:inject="s:insert" m:name="body"/> 18: </td> 19:</tr> 20:<tr> 21: <td colspan="2"> 22: <hr/> 23: </td> 24:</tr> 25:<tr> 26: <td colspan="2"> 27: <span m:inject="s:insert" m:src="/WEB-INF/layout/footer.html"/> 28: </td> 29:</tr> 30:</table> 31:</body> 32:</html>
|