ページテンプレート的な使い方

Wicketropyをいぢってます。基本的な部分が分かるまで、もう少しいじる予定。

今回はページテンプレート対応を行ってみました。Strutsで言うTilesのようなものですね。デザインの共通化を図る目的で使用されます。

Wicketの場合ですが、テンプレートとなるベースのページの、コンテンツを埋めたい部分にタグを埋め込みます。そして実際に埋め込むコンテンツは、埋め込みたいコンテンツ用のHTMLを作成し、タグを埋め込みます。その結果、タグで括られた部分が、タグの内容として表示されます。

ただ、これだけだと、はどのページテンプレートに埋め込むかが分かりません。その対応付けを行うのが、HTMLに対応するJavaのクラスです。Wicketでは、WebPageクラスのサブクラス(側)と、更にそのサブクラス(側)と言うようにJavaの継承を行って表現します。

例えば以下のようなBasePage.html を用意します。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/" lang="ja" xml:lang="ja">
<body>
<div id="wrapper">
 <!-- Header start -->
 <div id="header">
  <h1 id="title">Wicketropy Entry</h1>
  <!--<div id="description">サイトの概要またはサブタイトル</div>-->
 </div>
 <!-- Header end -->

 <div id="contents">
   <!-- このwicket:childタグの内容が差し換わる -->
   <wicket:child>
   <h2 class="contents_title"><a href="#">コンテンツタイトル</a></h2>
   <div class="contents_body">
    <p>ここにページのメインコンテンツを記述します。</p>
    <h3>小見出し</h3>
    <p>コンテンツ続き</p>
   </div>
   </wicket:child>
 </div>
 <!-- Main contents end -->

 <!--中略-->
</div>
</body>
</html>

BasePage.java はWebPageのサブクラスです。特に変わったことはしていません。

で、上記のBasePage.htmlを利用したページ、EntryPage.htmlは以下のように作ります。埋め込む内容を書くだけの簡単なお仕事です。

<html>
    <body>
        <wicket:extend>
            <h2 class="contents_title">
                <span wicket:id="title">コンテンツタイトル</span>
            </h2>
            <div class="contents_body">
                <p wicket:id="body">ここにページのメインコンテンツを記述します。</p>
                <h3 wicket:id="timestamp">日付</h3>
                <p>ID = <span wicket:id="id">12345</span></p>
                <p><a wicket:id="permalink">permalink</a></p>
                <p><a wicket:id="editPage">このページを編集</a></p>
                <p><a wicket:id="newPage">新規ページの作成</a></p>
                <p><a wicket:id="randomPage">ランダムページ</a></p>
            </div>
        </wicket:extend>
    </body>
</html>

そしてJava側でページテンプレートとコンテンツの対応付けです。EntryPage.java は、BasePage.htmlのページテンプレートを使用することを明記するため、BasePage.javaのサブクラスとします。

public class EntryPage extends BasePage {
	private static final Logger logger = LoggerFactory.getLogger(EntryPage.class);
	
	@Inject
	private Service service;

	public EntryPage(PageParameters parameters) {
		super(parameters);
		logger.info("parameters = " + parameters.toString());
		//省略
	}
}

これでOK。コンパイル＆開発モードで実行し、EntryPage.htmlにアクセスした結果は、以下のようになります。ちゃんとできてます！

<!--省略-->
<wicket:child><wicket:extend>
<!--EntryPage.htmlのコンテンツが表示される-->
</wicket:extend></wicket:child>
<!--省略-->

Wicketのいいところは、各HTMLページはブラウザでもそのまま見ることができる点ですね。wicket:id, wicket:child, wicket:extendは、(多分ですが)HTMLとは別の名前空間になっているため、ブラウザからも無視されるようになっているのでしょう。そこが素晴らしい。

ページテンプレート側に複数のwicket:childを埋め込むことができないんじゃないか、という疑問が湧いてきたのですが、これは多分Panelの自作で回避することができると思います。その辺はまた別途調査です。

最後に。Wicketropyのデザインは、 http://jp.cssez.com/ を使用させていただきました。ありがとうございます。