IndexPage.htmlの作成
では、Webページを作成していきましょう。Webページは、HTMLテンプレートと「WebPage」というクラスの2つで構成されます。まずは、HTMLテンプレートから作りましょう。これは「src」のjp.tuyanoパッケージ内に「IndexPage.html」というファイル名で作成をします。テンプレートは、対応するWebPageクラスと同じパッケージ内に、同じ名前のファイルとして作成をします。今回は、IndexPageというページを作りますので、ファイル名は「IndexPage.html」となるわけです。
<?xml version="1.0" encoding="UTF-8"?>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index Page</title>
<style type="text/css">
h1 {
background-color: #CCAAFF;
border-style: none none solid solid;
border-width: 0px 0px 2px 5px;
padding: 1px 5px 1px 5px;
font-size: 14pt;
}
</style>
</head>
<body>
<h1 wicket:id="title">Wicket Sample</h1>
<span wicket:id="border">
<p wicket:id="label">loaded...</p>
</span>
</body>
</html>
見れば分かるように、ごく普通のHTMLのソースコードです。1つだけ違っているのは、いくつかのタグに「wicket:id」という属性が追加されていることでしょう。これは、WebPageクラス側で用意するコンポーネントを割り当てるためのID情報です。アプリケーションクラスでgetConfigurationTypeをDEPLOYMENTにすると、これらのID情報は実際にWebブラウザに出力されるページからはすべて取り除かれます。
ここでは、"title"、"border"、"label"といったIDがタグに指定されています。これらのIDに、WebPageクラスからWicketのコンポーネントが割り当てられていくのです。
IndexPageクラスの作成
続いて、WebPageクラスを作成しましょう。これは、「src」内のjp.tuyanoパッケージに「IndexPage.java」というソースコードファイルとして作成します。ソースコードは次のとおりです。
package jp.tuyano;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.*;
import org.apache.wicket.markup.html.border.*;
public class IndexPage extends WebPage {
public IndexPage(){
Label title = new Label("title","Wicket Sample");
this.add(title);
BoxBorder border = new BoxBorder("border");
this.add(border);
Label label = new Label("label","This is test.");
border.add(label);
}
}
WebPageクラスは、org.apache.wicket.markup.html.WebPageを継承して作成します。ここでは、コンストラクタの中で、ページ内に必要なコンポーネントを用意しています。今回作成しているのは、「Label」が2つと「BoxBorder」です。
Labelは、文字どおり、テキストを表示するコンポーネントです。これは次のようにしてインスタンスを作成します。
new Label( ID名 , 表示する値 )
第1引数には、HTMLテンプレートでwicked:idに用意した値が指定されます。また第2引数は、ここではStringが値として渡されますが、通常は値を管理する「Model」と呼ばれるものが用いられます（Modelについてはこの後で改めて登場します）。
BoxBorderは、四角い枠（ボーダー）を表示するものです。これも、引数にID名を指定してインスタンスを作成します。BoxBorderは、その中にコンポーネントを組み込むことができます。コンポーネントの組み込みは「add」というメソッドを使います。コンストラクタの処理を見てみると、1つ目のLabelはthisにaddし、2つ目のLabelはBoxBorderにaddし、そのBoxBorderをまたthisにaddする、という構造になっていることが分かります。
これで必要なファイル類は揃いました。プロジェクトを見ると、以下の図のようにファイルが構成されているのが分かります。
