| まえがき セットアップ サンプル解説 hello.html ## まえがき 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のサンプルを見ることが出来ます。 ## サンプル解説 ### hello.html ブラウザで、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>
| © Copyright The Seasar Project and the others 2004, all rights reserved. |