HTMLのレイアウトを使っています

S2JSF

サンプル解説を見ながらいろいろとやっています。
http://www.seasar.org/s2jsf.html#hello

1つのHTMLを、

＋layout.html＝全体のレイアウト
　-　 header.html＝共通ヘッダ
　-　 footer.html＝共通フッタ
　-　 （処理したいHTML）

に分けて、
処理したいHTMLからは、以下のような感じでレイアウトの変数を置換していきます。

<span m:inject="f:param" m:name="layoutTitle" m:value="継承元レイアウトの変数を置換します"/>
<span m:inject="s:insert" m:name="body">
<div>
継承元レイアウトの変数に挿入されるブロック
</div>
</span>

頭の中でレイアウトが組みあがるイメージを持ちつづける必要があるので、結構疲れますね(^^;

さて、良くあるのが、ヘッダ部の一部がページによって若干変化する場合です。

  • パンくずリストをヘッダ部に入れたい
  • ある条件下にある場合だけリンクやボタンをヘッダ部に追加したい

など。

こんな感じになりました。

  • ■layout.html
<head>
<title m:value="layout$Title">タイトル</title>
</head>
<body>
<span m:inject="s:insert" m:src="/WEB-INF/layout/header.html"/>
<span m:inject="s:insert" m:name="layout$Contents"/> <!--処理するHTMLからここに内容が入る-->
<span m:inject="s:insert" m:src="/WEB-INF/layout/footer.html"/>
</body>
  • ■header.html
<body>
<span m:inject="s:insert">
<img m:inject="h:graphicImage" m:url="/images/seasar.gif"/>
<h1>
<span m:inject="s:insert" m:name="header$Title"/><!--処理するHTMLからここは書き換え可能-->
</h1>
<span m:inject="s:insert" m:name="header$Controls"/><!--処理するHTMLからここは書き換え可能-->
</span>
</body>

処理したいHTMLからは、以下のような感じでレイアウトの変数を置換していきます。

  • ■処理するHTML
<body>
<!--header.htmlへの挿入-->
<span m:inject="f:param" m:name="header$Title" m:value="S2JSFへようこそ！"/>
<span m:inject="s:insert" m:name="header$Controls">
<input type="button" value="ここではこのボタンが使えます"/>
</span>

<!--layout.htmlへの挿入-->
<span m:inject="f:param" m:name="layout$Title" m:value="Seasar公式サイト − S2JSF"/>
<span m:inject="s:insert" m:name="layout$Contents">

<p>ようこそ世界</p>

</span>
</body>

layout.htmlを置換しているのか、header.htmlを置換しているのか、分かりやすくしておかないと、後で追えません(--;

今回の場合は、''layout$hoge''と''header$hoge''のように、'$'でどのパーツを置換しているのかを区切るようにしてみました。

これだと、エディタでも探しやすくなるのではと思います。