4/5 WicketでダイナミックなWeb開発！(前編) [Javaプログラミング] All About

WebPageクラスの作成

では、画面に表示するページを作成するWebPageクラスを作りましょう。先に、WebApplicationクラスのgetHomePageで、「Page1」というクラスを返すようにしておきましたから、ここではjp.allabout.Page1というWebPageクラスを作成しましょう。

package jp.allabout;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;

public class Page1 extends WebPage {

  public Page1() {
    Label label = new Label("message", "これは、Wicketで作成したテキストです。");
    this.add(label);
  }
}

WebPageクラスは、org.apache.wicket.markup.html.WebPageを継承して作成します。ここでは、Labelコンポーネントを１つ作成し、これを組み込んでいます。といっても、このLabelはAWTなどのLabelではありません。org.apache.wicket.markup.html.basicパッケージにあるクラスで、WebPageクラスに組み込むための専用コンポーネントクラスの一つです。このLabelは、AWTのLabelと同様、テキストを表示する働きをします。

new Label( ID指定 , 表示テキスト )

このLabelは、このようにIDと表示テキストの２つを引数に指定します。このIDは、この後に作成するHTMLテンプレートで、このコンポーネントが挿入されるタグを指定するためのものです。

こうして作成されたコンポーネントは、WebPageの「add」メソッドでページに組み込みます。「ただaddするだけ？　コンポーネントの配置とかレイアウトとかはどうするの？」と思った人。それを行うのが、HTMLのテンプレートなのです。

HTMLテンプレートの作成

では、HTMLテンプレートファイルを作成しましょう。テンプレートファイルといっても、基本的には普通のHTMLと同じように.html拡張子のテキストファイルとして作成をします。注意すべき点は、以下の２点です。

１．WebPageのクラス名と同じファイル名にすること。例えば「Page1」クラスのテンプレートであれば、必ず「Page1.html」というファイル名にします。

２．WebPageクラスのクラスファイル（.classのファイル）と同じ場所に配置をすること。Eclipseの場合、WebPageクラスのソースコードファイルと同じ場所に作成をすれば、自動的にそのクラスファイルが作成される場所にコピーされます。

では、Page1.javaが保管されている場所に「Page1.html」というHTMLファイルを作成しましょう。そして、以下のようにソースコードを記述しておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Wicket Page1</title>
  </head>
  <body>
    <h4>※Wicket Sample</h4>
    <span wicket:id="message" id="message">メッセージ</span>
  </body>
</html>

ここでは、HTMLでページのレイアウトを作成しています。が、実際に表示されるコンポーネント部分は、<span wicket:id="message" id="message">というタグが記述されていますね。

Wicketでは、wicket:idで指定したIDのコンポーネントがこのタグにはめ込まれ表示されるような仕組みになっています。つまり、この<span>タグに、"message"というIDのコンポーネントが表示されるわけです。

先に、Page1クラスで作成したコンポーネントを思い出してください。"message"というIDを指定してLabelが作成されていましたね？　このLabelコンポーネントが、<span>タグに表示されるというわけです。

Wicketでは、このようにHTMLのページには<span>や<div>タグを使って、「ここにこのコンポーネントが表示される」という指定だけを記述しておきます（もちろん、普通にHTMLのタグで何かを表示させることもできます）。

では、Webアプリケーションを動かしてみましょう。