[Wicket修行日記:8]ExampleNavomatic [Wicket修行日記:8]ExampleNavomatic

Wicket修行日記目次

久々の更新です。
滞ってしまい、ごめんなさい。

今回は、Apache Wicket - Examplesの「Navomatic」について勉強しました。
ちょっと難しかったです・・・

アプリケーションの内容については、説明するよりも実際に使ってもらった方がわかりやすいと思います。
http://wicketstuff.org/wicket13/navomatic/

本家ページでは英語でチュートリアルが書かれているのですが、日本語に翻訳されたページも発見しましたので紹介します。
Wicket Examples ■Navomatic - iad_otomamay@kronos-jp.netの日記

それでは、気づいたこと、学んだことを書いていきたいと思います。

コーディングから実際に動かすまで

とりあえず、サンプルコードを実際に打ってみて動かすのが、理解するための一番の近道だと思ったので、早速動かそうとしてみました。

いくつかサンプルコードで引っかかる部分がありました。

• NavomaticBorder.html

  Page3.htmlへのリンク部分がありますが、Page3のサンプルコードはありませんので、ページを勝手に作るなりリンクを消すなりしましょう。

• パッケージ名

  サンプルコード（web.xmlを含む）に含まれるWikcetに含まれるクラスのパッケージ名がおかしいです。
  次のように修正しましょう。

  wicket.hoge.hogehoge.ClassName → org.apache.wicket.hoge.hogehoge.ClassName
  

以上のことに気をつけさえすれば、

$ mvn jetty:run

で動くと思います。

それでは、このExampleで学んだことを書いていこうと思います。

HTMLファイルと対応するのはWebPageクラスの子クラスだけではない

今まで、WebPageクラスを継承するクラス（今回はPage1クラスやPage2クラス）だけが、同じ名前のHTMLファイル（今回はPage1.htmlやPage2.html）と自動的に対応付けされるのだと思ってました。

でも今回のExampleでは、Borderコンポーネントクラスを継承したNavomaticBorderクラスがNavomaticBorder.htmlに対応付けされているみたいです。

もしかして、WebPageクラスもコンポーネントの一つで、コンポーネント全てが自動的に同じ名前のHTMLファイルと対応付けされるのかな？
それとも、今回のケースは特別？

<wicket:link>タグ

NavomaticBorder.htmlに以下のような記述があります。

<wicket:link>
<a href="Page1.html">Page1</a><br/>
<a href="Page2.html">Page2</a>
</wicket:link>

どうやら、<a>タグを<wicket:link>タグで囲むと次のような利点があるみたい。

• 現在表示しているページへのリンクが押せなくなる
• 現在表示しているページへのリンクがイタリックになる
• Wicketに指示を出すための複雑なURLを自動で生成してくれる

これは便利そう！
覚えておきます。

NavomaticBorderコンポーネント

おそらく、このExampleの最大の難関がNavomaticBorderコンポーネントだと思います。
NavomaticBorderコンポーネントはBorderコンポーネントの子クラスです。

Page1.javaには以下のような記述があります。
これにより、Page1にNavomaticBorderコンポーネントを追加しています。

public Page1() {
	add(new NavomaticBorder("navomaticBorder"));
}

NavomaticBorderコンポーネントが追加されるのは、Page1.htmlにおける以下の部分のようです。

<span wicket:id="navomaticBorder">
You are viewing Page1
</span>

前回のLabelコンポーネントはSpanタグの中身が置き換わっただけだったのですが、今回はspanタグの中身（You are viewing Page1）の周りにNavomaticBorder.htmlの内容が付け加えられるみたいです。
（この結論にたどり着くまでかなり時間がかかりましたorz）

具体的にはNavomaticBorder.htmlのwicket:borderタグ内の要素が、Page1.htmlのspanタグの周りに付け加えられます。
Page1.htmlのspanタグの中身は、NavomaticBorder.htmlのwicket:borderタグ内の中で一番最初に現れる「wicket:bodyタグ」の場所に挿入されるみたいです。

BoxBorderコンポーネント

Borderコンポーネントと違って、周りに細い黒線が追加されます。
Borderコンポーネントの子クラスです。

おそらくNavomaticBorderコンポーネントのような使い方もできると思うのですが、今回のExampleでは単に、「指定した領域を黒線で囲む」という用途で使用されているみたいです。

NavomaticBorder.javaには以下のような記述があります。
ここで、NavomaticBorderコンポーネントに二つのBoxBorderコンポーネントを追加しています。

public NavomaticBorder(final String componentName) {
	super(componentName);
	add(new BoxBorder("navigationBorder"));
	add(new BoxBorder("bodyBorder"));
}

それぞれのBoxBorderは、NavomaticBorder.htmlの次の部分を囲みます。

Navigation Links


Page1

Page2

まとめ

今回はとても長くなってしまいました。
わかりにくかったらごめんなさい。

今回のBorderコンポーネントの例は、前回のLabelコンポーネントの例と違ったWicketの使い方を知ることができてとても良かったと思います。

少しブランクがあったので不安でしたが、これから軌道にのっていけそうです。

間違いとかあればご指摘ください。
よろしくお願いしますー！

次に進む。