Wicketで始めるオブジェクト指向ウェブ開発

第2回　コンポーネントとモデル

java, フレームワーク, wicket

この記事を読むのに必要な時間：およそ 4.5 分

今回は，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と入力することで，再度確認できます。

java, フレームワーク, wicket

著者プロフィール

矢野勉（やのつとむ）

フリーランスのプログラマ。Wicket-ja主催。

ウェブ・アプリケーションの開発を中心にさまざまな案件に関わってきました。現在はWicketによる開発を支援しています。

URL：http://d.hatena.ne.jp/t_yano/

著書