ページの継承

以下のようなWicket用のページがあったとして、

  • ページ毎に、<title> タグ、ページ見出し(<h1>)、メインコンテンツの部分を変えたい
  • 特定のページでのみ <head> 内に別途 JavaScript を追加したい
  • レイアウトなどそれ以外の部分は全ページで統一したい

などを行いたい場合は、ページの継承で実現する。

元となる、親ページの作成

まずは、継承元となるページを用意する。

HTMLテンプレート

  • ページ見出しに wicket:id の指定を追加
  • メインコンテンツ部分を <wicket:child> で囲う

まずはタイトル・見出し部分を動的に変更可能なようにする。この部分に関してはレイアウトに変更はなく、表示する文字列だけを変更すればいいので、wicket:id の指定をし、動的に値を設定できるようにする。

次にメインコンテンツの部分。ここはレイアウト自体が変更になるためここでは記述ができない。このようなサブページに丸投げする部分については <wicket:child> で囲う。このタグで囲われた部分が、これからサブページで指定するメインコンテンツ部分とまるまる入れ替わる。

ページクラス

対応するページクラスについては以下の通り。

wicket:id="titleHead"wicket:id="titleBody" の部分については、サブページで表示文字列を指定させ、それを取得して設定するようにする。プロパティファイルと getString(String) を使用すればもっとスマートにできるがここでは省略。

サブページの作成

HTMLテンプレート

まずはサブページ用のHTMLテンプレートを用意。

  • <head> 内に追加したいタグがある場合、<wicket:head> で囲う。囲われた部分が、親ページの <head> に加えられる。今回の例では、サブページ専用 JavaScript を追加している。
  • 親ページの <wicket:child> と置き換えて表示したい部分だけ、<wicket:extend> で囲う。
  • 上記以外の部分はアプリケーション実行時には反映されない。

このHTMLテンプレートで本当に必要な部分は12~14行目、23~26行目だけ。それ以外の部分は無くても動作する。つまり、

このように書いても同様に動作するし、極端な話、

テンプレートの中身がこれだけでも動くことは動く。しかしこれではサブページの HTML テンプレートを Web ブラウザで開きレイアウトを確認する…ということができなくなってしまう。感想でも述べたように、テンプレートが正しい HTML であるというところが売りの一つだと思っているので、サブページに記述された共通部分はアプリケーションとしては本来不要だとしても、メンテナンスなどを考え消さずに記述したままにしておくことをオススメする。

ページクラス

クラスのほうは以下の通り。大したことはしていない。

実際に表示させてみる

IEで表示させると、以下のようになる。

wicket_subpage.png