「Mixer2でビューを作るとき、いろんなページで共通のヘッダやフッタ部分を挿入するのってどうやるのだろう？」 よくあるケースです。JSPで言えば <jsp:include page="header.jsp"> にしておきつつ、 header.jspファイル内には <div id="header">ヘッダーのなか</div> のように書いておくやつ。
しかし、JSP的なやり方だと、ヘッダはヘッダ、フッタはフッタ、のようにバラバラになってしまい、 webデザイナーの立場からするとメンテが面倒なうえに実際の見栄えの確認がしづらくなってしまいます。 Mixer2ではいろいろなやり方がありますが、わかりやすくかつ手っ取り早いのが、パーツ取り用htmlテンプレート作戦です。
まず、通常の画面表示用テンプレートの他に、 parts.html のような名前でパーツ取り専用テンプレートを用意し、そこにヘッダとフッタのブロックを自由に書きます。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
実際にヘッダにしたい内容
</div>
これはパーツ取り専用htmlなので実際には出力しませんよ
<div id="footer">
フッタにしたい内容
</div>
</body>
</html>
次に実際に画面に出すテンプレートファイル（fooTemplate.htmlだとします）には次のように書いておきます。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
ここにヘッダがはいる予定です
</div>
実際に出力したいコンテンツ．．．
<div id="footer">
ここにフッターがはいる予定
</div>
</body>
</html>
画面出力のviewクラスはこんな感じ。（あくまでも模式的な例です）
Html partsHtml = mixer2Engine.loadHtmlTemplate("parts.html");
Div headerDiv = partsHtml.getById("header",Div.class).copy(Div.class);
Div footerDiv = partsHtml.getById("footer",Div.class).copy(Div.class);
Html fooHtml = mixer2Engine.loadHtmlTemplate("fooTemplate.html");
fooHtml.getBody().replaceById("header", headerDiv);
fooHtml.getBody().replaceById("footer", footerDiv);
実際には、テンプレートのロードを何度もやるのはやや非効率です。 共通クラスを切り出して、そこでparts.htmlのロードを一回だけ行ってheader/footer用Divインスタンスの copy()の結果を返させて、それを使うような感じがよいでしょう。
「fooTemplate.html上に <div id="header">ここにヘッダが入る</div> みたいなことを書く手間すら省きたい」という要求も実現可能です。
Html partsHtml = mixer2Engine.loadHtmlTemplate("parts.html");
Div headerDiv = partsHtml.getById("header",Div.class).copy(Div.class);
Div footerDiv = partsHtml.getById("footer",Div.class).copy(Div.class);
Html fooHtml = mixer2Engine.loadHtmlTemplate("fooTemplate.html");
// bodyタグの先頭にヘッダdivを差し込む
fooHtml.getBody().getContent().add(0, headerDiv);
// bodyタグの最後にフッタ用divを差し込む
fooHtml.getBody().getContent().add(footerDiv);
こんな感じ。
いかがでしょう。Mixer2でのビュー実装の書き方は様々です。 jspのカスタムタグではなく通常のjavaで書くので柔軟性とテストの書きやすさは段違い、というのがポイントです。 要件に合わせてご自由にどうぞ。
No comments:
Post a Comment