はじめに
本連載では「軽量フレームワーク（Lightweight Framework）」の中から注目株をピックアップし、その概略を紹介していこうと思います。第2回目となる今回は、前回に引き続きJavaの軽量フレームワーク「Apache Wicket」について説明していきます。
これまでの連載
前回、Wicketを利用した基本的なプログラムの作成を行いましたが、フォームからテキストを送信して表示するといった程度のサンプルではWicketの醍醐味がなかなか実感できなかったのではないでしょうか。そこで今回は、もう少しさまざまな機能を組み合わせたサンプルを作ってみることにしましょう。今回利用するのは、次のような機能です。
- アプリケーションで共通して保持されるデータと、ページで共通して保持されるデータの利用
- 多数のデータを繰り返し表示する
- データのページ処理
- 入力した値のバリデーションチェック
- 複数ページを用意した際のページ遷移
- Ajaxを利用した非同期通信による表示の更新
このぐらいのものを使ってみれば、Wicketの使い方もだいぶ分かってくることでしょう。では、今回はこれらの機能を使ったサンプルとして、簡単な「コメント掲示板」を作ってみます。名前とコメントを投稿すると、それを掲示板のように並べて表示するというものです。また、別ページからAjaxを利用して最新のコメントを表示する機能も作成してみましょう。
対象読者
- Javaで手ごろなフレームワークを探している技術者
- 最近のフレームワークをごくざっと理解しておきたい方
- Web開発の手法がどうも気に入らない、と常々考えているJavaプログラマ
アプリケーションクラスの定義
作成するプロジェクトは、前回作成したWicSampleプロジェクトをそのまま再利用します。まずは、アプリケーションクラスから作成していきましょう。前回作成したWicSample.javaを次のように書き換えます。
package jp.tuyano;
import java.util.Calendar;
import org.apache.wicket.Page;
import org.apache.wicket.protocol.http.WebApplication;
public class WicSample extends WebApplication {
private static String app_msg;
public String getApp_msg() {
return app_msg;
}
public void setApp_msg(String appMsg) {
Calendar d = Calendar.getInstance();
app_msg = "[" + d.getTime() + "] " + appMsg;
}
@Override
protected void init() {
super.init();
this.getRequestCycleSettings().setResponseRequestEncoding("UTF-8");
this.getMarkupSettings().setDefaultMarkupEncoding("UTF-8");
this.setApp_msg("開始しました。");
}
@Override
public Class<? extends Page> getHomePage() {
return IndexPage.class;
}
@Override
public String getConfigurationType() {
return WebApplication.DEPLOYMENT;
}
}
ここでは、いくつか追加された機能があります。app_msgというprivateフィールドは、最後に投稿されたメッセージを保管しておくものです。また、これへのアクセサとしてgetApp_msg、setApp_msgというメソッドも用意しました。いくつか修正はありますが、基本的には難しいことはないので説明は無用でしょう。
IndexPageのテンプレート
では、メインページとなるIndexPageを作成しましょう。まずはテンプレートとなるHTMLファイルからです。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;
}
#feedback { text-color: #FF0000; }
#navigate{ font-size: 10pt; font-weight: 700px; }
</style>
</head>
<body>
<h1 wicket:id="title">Wicket Sample</h1>
<div wicket:id="error"></div>
<form wicket:id="form1">
<table>
<tr><td>name:</td>
<td><input type="text" wicket:id="Name" /></td></tr>
<tr><td>comment:</td>
<td><textarea wicket:id="Comment" rows="3" cols="30"></textarea></td></tr>
<tr><td></td>
<td><input type="submit" wicket:id="submit" value="送信" /></td></tr>
</table>
</form>
<div id="navigate" wicket:id="navigate"></div>
<a wicket:id="link">LINK</a>
<div wicket:id="list">
<hr />
<span wicket:id="comment"></span>
</div>
</body>
</html>
ここでは、入力フィールドとテキストエリアのあるフォームを用意してあります。その他に、各種の表示用のタグがいくつも用意されています。いずれもwicket:id属性を設定し、Wicketのコンポーネントを設定するよう設計されていることが分かります。
