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

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

この記事を読むのに必要な時間:およそ 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と入力することで,再度確認できます。

著者プロフィール

矢野勉(やのつとむ)

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

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

URLhttp://d.hatena.ne.jp/t_yano/

著書

コメント

コメントの記入