OtherPageテンプレートの作成
では、このLinkのsetResponsePageで表示を変更する「OtherPage.class」を作成してみましょう。まずはテンプレートからです。OtherPage.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>Other 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;
}
#msg { text-color: #0000FF; }
</style>
</head>
<body>
<h1 wicket:id="title">Wicket Sample 2</h1>
<div wicket:id="msg"></div>
<br /><br />
<p>※これは、Ajaxでアプリケーションのメッセージを表示する例です。</p>
<div><a wicket:id="updatelink" href="javascript:void(0);">UPDATE</a></div>
</body>
</html>
ここでは、<div wicket:id="msg">というタグを用意し、必要に応じてここにメッセージを表示させます。また、<a wicket:id="updatelink">というタグを用意しておきますが、これはAjaxを利用して処理を呼び出すのに用います。
OtherPageクラスの作成
続いて、OtherPageクラスです。OtherPage.javaというファイルを用意し、次のようにソースコードを記述します。
package jp.tuyano;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.*;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.*;
import org.apache.wicket.model.Model;
public class OtherPage extends WebPage {
private Model<String> msgModel;
public OtherPage(){
Label title = new Label("title","別のページ");
this.add(title);
msgModel = new Model<String>("initial...");
final Label msg = new Label("msg",msgModel);
msg.setOutputMarkupId(true);
this.add(msg);
AjaxLink<String> link = new AjaxLink<String>("updatelink"){
private static final long serialVersionUID = 1L;
@Override
public void onClick(AjaxRequestTarget target) {
updateMsg();
if (target != null){
target.addComponent(msg);
}
}
};
this.add(link);
updateMsg();
}
public void updateMsg(){
WicSample app = (WicSample)this.getApplication();
msgModel.setObject(app.getApp_msg());
}
}
完成したらプロジェクトを実行し、メインページとなるIndexPageに用意したリンクをクリックしてみましょう。OtherPageに表示が変わります。ここでは、アプリケーションクラスにAjaxを使ってアクセスし、その結果を表示するようになっています。OtherPageに用意したリンクをクリックしてみましょう。アプリケーションクラスに保管されているメッセージが表示されます。アプリケーションに保管されているメッセージは、最後に投稿した内容を示すもので、"[ 投稿された日時 ] 投稿メッセージ"というような形式で表示されます。
AjaxLinkの利用
ここでは、リンクに「AjaxLink」というコンポーネントを利用しています。これは先ほどのLinkコンポーネントと同じようなものですが、Ajaxによる非同期通信でサーバに接続し処理を行わせるという点が異なります。これは、Linkと同様に、new AjaxLinkでインスタンスを生成し、onClickでクリック時の処理を実装します。使い方そのものはLinkとまったく同じです。
違いは、onClickメソッドに「AjaxRequestTarget」というものが渡される、という点です。これは、非同期通信完了後の処理などを管理するものです。ここでは、まずupdateMsgメソッドを呼び出してアプリケーションクラスからapp_msgの値を取り出してmsgModelに設定し、それからmsgコンポーネントをaddします。このように、AjaxRequestTargetにコンポーネントをaddすることで、その表示を更新させることができるのです。
まとめ
今回は、実際に簡単なアプリケーションを作成し、Wicketに用意されているさまざまな機能についてその利用例を説明しました。ある程度まとまったプログラムを作ってみると、Wicketの特徴が次第に見えてきます。
まず、モデルによるフォームの値の扱いと、ページ遷移に関する考え方（テンプレートとWebPageクラスが変わるだけという点）に慣れましょう。バリデーションやページネーションなどの機能は使い方に悩むということはあまりないはずです。基本的となる部分での概念の違いを乗り越えることさえできれば、Wicketを使いこなすのはそれほど難しくありません。
