Wicketで始めるオブジェクト指向ウェブ開発
第2回 コンポーネントとモデル
今回は，Wicketのオブジェクト指向によるWeb開発を支える基盤である「コンポーネント」と「モデル」の関係について紹介します。
ページはコンポーネントの固まり
Wicketのウェブページは「コンポーネント」の固まりです。コンポーネントとはユーザへの表示とユーザからの入力を受け付けるオブジェクトです。すべてのコンポーネントはComponentのサブクラスとして作られています。ウェブページ自身を表すPageクラスすらも，Componentのサブクラスです。
Wicketのページは，Pageという一番親となるコンポーネントの上に，さまざまなコンポーネントが載せられたような構造になっています。この構造は，デスクトップ・アプリケーションにおいて，ボタンやフィールドなどのコンポーネントがウインドウという親コンポーネントに載せられているのと同じ考え方です。
HTML要素＝コンポーネント
Wicketでは，ほぼすべてのHTMLは対応するWicketコンポーネントによって制御できます。<input type="text">であれば，WicketのTextFieldコンポーネントを要素に適用することで，タグの表示や入出力をプログラムからコントロールできます。
<form>はFormコンポーネントによって，<input type="button">や<button>，<a>などはLinkコンポーネントによって，ただのタグを「オブジェクト」にすることができます。コンポーネントの属性を変えるということは，ブラウザに出力されるタグをコントロールすることと同じです。Wicketは，HTMLタグにコンポーネントを適用することによって，静的なHTMLを動的なオブジェクトとして扱うのです。
コンポーネントはタグの表示をコントロールする
コンポーネントはHTML要素を制御するものですから，コンポーネントを操作することで，HTMLの生成をコントロールすることができます。逆に言えば，HTMLの表示を制御したいのであれば，その場所にコンポーネントを適用すればよいのです。
非常にシンプルな例が，前回作成したQuickstartアプリケーションで使われています。Labelコンポーネントです。
Labelコンポーネントによる表示のコントロール
HTML要素にコンポーネントを適用する
第1回で作成したquickstartアプリケーションに「HomePage.html」と「HomePage.java」の2ファイルがありました。HomePage.htmlを制御しているプログラムが，HomePage.javaです。先にHTMLファイルを見てみましょう。次のようなシンプルなものです。
リスト1 HomePage.htmlの内容
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
<head>
<title>Wicket Quickstart Archetype Homepage</title>
</head>
<body>
<strong>Wicket Quickstart Archetype Homepage</strong>
<br/><br/>
<span wicket:id="message">message will be here</span>
</body>
</html>
強調表示の部分にある「message will be here」という文字は，実際にブラウザで表示したときには「If you see this message wicket is properly configured and running」に変わっていました（※1）。プログラムから，この部分が変更されたわけです。
WicketのコンポーネントはHTML要素を制御すると説明しました。今回は，どの要素が制御されているのでしょうか。
それは，メッセージが含まれている<span>タグです。コンポーネントによって<span>タグを制御して，表示を変えたのです。
強調している行には「wicket:id="message"」という属性が付けられています。この「wicket:id」属性が，要素をコンポーネントによってプログラム制御する，というWicketに対する指定になります。
では，要素にコンポーネントを適用するコードを見てみましょう。
リスト2 HomePageクラスのコンストラクタ
public HomePage(final PageParameters parameters) {
// Add the simplest type of label
add(new Label("message", "If you see this message wicket is properly configured and running"));
// TODO Add your page's components here
}
Wicketでは，ページの構築はWebPageのサブクラスを作成することで行います。HomePageクラスもWebPageクラスのサブクラスです。HomePageクラスのコンストラクタ内でHTML要素へのコンポーネント適用が行われています。
Wicketのコンポーネントは，第1引数に常にIDを受け取ります。このIDが，HTML上に指定したwicket:idと対応します。ここでは第1引数に「message」を指定しています。HTMLファイル内でwicket:id="message"と指定された<span>タグに，Labelコンポーネントを適用しているのです。
Labelコンポーネントの役割は，適用したHTML要素のボディ部分をプログラムから書き換えることです。一番シンプルな方法は，Labelの第2引数に文字列を指定することです。前述のソースコードでは，第2引数に，まさしくブラウザ上で見たあの文字が指定されています。
コンポーネントにはそれぞれ役割があります。その役割に応じて引数も異なっています。各コンポーネントの使い方を押さえることが，Wicketを使いこなす早道となります。
- ※1
- 前回作成したwicket-sampleフォルダ内でmvn jetty:runと入力することで，再度確認できます。
矢野勉（やのつとむ）
フリーランスのプログラマ。Wicket-ja主催。
ウェブ・アプリケーションの開発を中心にさまざまな案件に関わってきました。現在はWicketによる開発を支援しています。
URL：http://d.hatena.ne.jp/t_yano/
![[改訂3版]図解でよくわかる ネットワークの重要用語解説](http://image.gihyo.co.jp/assets/images/cover/2009/thumb/TH40_9784774138213.jpg){kind=small}
