helo.htmをレイアウト対応にする
では、実際にレイアウトを使ってみましょう。ここでは例として、この連載で一番最初に作成した簡単なサンプルをレイアウト対応にしてみます。まずは、helo.htmの修正です。
<h2 id="title">サンプルページ</h2> <p>$msg</p> <p>$form</p>
たったこれだけです。レイアウトのボディにはめ込む部分だけ用意すればいいので、このようにとてもシンプルなものになりました。続いて、HeloPageクラスを修正しましょう。
public class HeloPage extends LayoutPage {
public String header = "レイアウトされたページ";
public String footer = "copyright tuyano@2009.";
public String msg = "";
private Form form;
private TextField input;
private Submit submit;
@Override
public void onInit(){
System.out.println(this.path);
msg = "お名前は？";
form = new Form("form");
input = new TextField("input","入力：");
submit = new Submit("submit", "送信");
form.add(input);
form.add(submit);
this.addControl(form);
}
@Override
public void onPost(){
msg = "こんにちは、" + input.getValue() + "さん！";
}
}
先に作成したLayoutPageクラスを継承してクラスを作成しています。またレイアウトで使用するため、header、footerといったpublicフィールドに表示内容を用意してあります。レイアウト対応とするために必要な措置は、実にこれだけです。できあがったら、実際にhelo.htmにアクセスしてみましょう。レイアウトテンプレートを使ってページが表示されるのが確認できます。
実際にやってみると分かることですが、フォームの入力や送信などといった処理も、レイアウトを使ってもまったく何の問題もなく機能します。
メニューを作成する
全体の統一感という点では、ナビゲーションのためのメニューも重要でしょう。Apache Clickでは、メニューを作成するためのMenuコントロールというものが用意されています。これは、WEB-INF内に用意されたメニューの方法（menu.xmlというファイル）をロードして、それをもとにメニューを生成するものです。ただし、作成されたメニューをきれいにレイアウトして表示するための処理は自分で用意しなければいけません。Apache Clickのサイトで公開されているUser Guideに基本的な使い方が掲載されています。
http://incubator.apache.org/click/docs/user-guide/html/ch05.html
が、これはある程度Velocityのマクロ機能などを理解していないと読んでもよくわからないかも知れません。先ほどのレイアウトに組み込んで利用してみることにしましょう。まず、Velocityのマクロを用意します。WebContent内に「macro.vm」というテキストファイルを作成してください。そしてここに、次のようにマクロを記述します。
#macro( writeMenu $rootMenu )
<table id="menuTable" border="0" width="100%"
cellspacing="0" cellpadding="0" style="margin-top: 2px;">
<tr>
<td>
<div class="menustyle" id="menu">
<ul class="menubar" id="dmenu">
#foreach ($topMenu in $rootMenu.children)
#if ($topMenu.children.empty)
<li class="topitem">$topMenu</li>
#else
<li class="topitem">$topMenu
<ul class="submenu"
#foreach ($subMenu in $topMenu.children)
><li>$subMenu</li
#end
></ul>
</li>
#end
#end
</ul>
</div>
</td>
</tr>
</table>
#end
Velocityのマクロは、用意されているディレクティブを使ってタグを出力していくものです。ここでは「writeMenu」というマクロを定義しています。これは、その後にあるMenuオブジェクトをもとにメニューの内容を出力していくものです。
レイアウトの修正
続いて、作成したレイアウトにメニューを組み込みましょう。まずはLayoutPageクラスの修正です。これはクラス内に、以下のpublicフィールドを追加するだけです。
public Menu rootMenu = Menu.getRootMenu();
ここでは、rootMenuというフィールドにMenuを保管しています。Menu.getRootMenuは、WEB-INF内にあるmenu.xmlというXMLファイルをロードし、それをもとにMenuインスタンスを生成して返すメソッドです。
続いて、レイアウトのテンプレートにメニューを出力させます。layout.htmを開き、<body>のすぐ下に、次のように記述してください。
#writeMenu($rootMenu)
ここで呼び出しているwriteMenuは、先ほど作成したVelocityのマクロです。LayoutPageのrootMenuフィールドを引数に指定して、writeMenuを使いメニューのタグを出力させているわけです。
