tanamonの稀に良く書く日記

KEEP CALM AND DRINK BEER

WicketでHello World

id:t_yanoさん主催の第1回 Wicket勉強会に参加する予定なのですが、なんだかすごい人数が集まっているらしく、Wicketについて何も知らないまま行くのは気が引けるので、事前に少し予習しておこうと思います。


というわけで、Hello Worldを表示させてみました。

Eclipseプロジェクトの作成

Eclipse上でJavaのプロジェクトを作成します。
名前は何でもいいのですが、WicketSampleとでもしてください。

今回はファイル構成をちょこっといじって、以下のようにしました。

WicketSample
    /app
        /WEB-INF
            /classes
            /lib
            /src

また、プロジェクトの設定でTomcatのアプリケーション・ルートを/appに変更し、コンテキスト定義を更新しておきます。

Wicketライブラリの取得

必要なライブラリをダウンロードし、ダウンロードしたファイルを解凍して、中のjarファイルをEclipseプロジェクトへコピーします。

Wicket 1.4-m3

http://www.apache.org/dyn/closer.cgi/wicket/1.4-m3

  • lib/wicket-1.4-m3.jar → WicketSample/app/WEB-INF/lib/wicket-1.4-m3.jar
log4j 1.2.15

http://logging.apache.org/log4j/1.2/download.html

  • log4j-1.2.15.jar → WicketSample/app/WEB-INF/lib/log4j-1.2.15.jar
SLF4J 1.5.2

http://www.slf4j.org/download.html

  • slf4j-api-1.5.2.jar → WicketSample/app/WEB-INF/lib/slf4j-api-1.4.2.jar
  • slf4j-log4j12-1.4.2.jar → WicketSample/app/WEB-INF/lib/slf4j-log4j12-1.4.2.jar


コピーしたら、Eclipseのビルドパスにライブラリを登録しておきます。
コンパイル時に必要なのはwicket-1.4-m3.jarだけですが、全て登録したほうがよいと思います)


これでプログラムを作る準備ができました。

HTMLの作成

app/WEB-INF/src/example/helloworld/HelloWorld.html
<html>
<body>
    <span wicket:id="message" id="message">Message goes here</span>
</body>
</html>

spanタグにwicket:idという属性がありますが、Wicketではこの値を利用してHTMLとコンポーネントを紐付けています。そのため、wicket:idの"message"という値は非常に重要なものになります。

また、WicketではHTMLファイルを関連するJavaクラスと同じ階層に置く必要がありますので、ファイルの配置先には注意してください。同様にファイル名もクラスと同名にしておいてください。

Pageクラスの作成

app/WEB-INF/src/example/helloworld/HelloWorld.java
package example.helloworld;

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

public class HelloWorld extends WebPage {
	
	public HelloWorld() {
		add(new Label("message", "Hello World!"));
	}
}

続いてJavaファイルを作成します。
Labelクラスのコンストラクタで、先ほどのwicket:idの"message"と、表示させたい文字列を指定しています。このLabelクラスをHelloWorldクラスにadd()することで、HelloWorld.htmlのspanタグの中身が置き換わります。

SwingやFlexのようにGUIアプリケーションのような記述のしかたですね。


ちなみに、HelloWorld.htmlの"Message goes here"という文字は、この処理によって上書きされるため画面上には表示されなくなります。通常、デザイナーが作成したHTMLファイルにはレイアウト確認用にダミーの文字が書かれていますが、そのダミーの文字を消さないままで開発が行えるため、この機能はとても便利です。

Applicationクラスの作成

app/WEB-INF/src/example/helloworld/HelloWorldApplication.java
package example.helloworld;

import org.apache.wicket.Page;
import org.apache.wicket.protocol.http.WebApplication;

public class HelloWorldApplication extends WebApplication {

	@Override
	public Class<? extends Page> getHomePage() {
		return HelloWorld.class;
	}

	@Override
	protected void init() {
		super.init();
		getRequestCycleSettings().setResponseRequestEncoding("UTF-8");
		getMarkupSettings().setDefaultMarkupEncoding("Shift_JIS");
	}
}

こちらはWebApplicationクラスです。
簡単に言うと、複数のWebPageに適用されるような設定を定義するクラスです。
初期化処理もここで行います。


今回は、getHomePage()で、デフォルトのページ、つまりURLの最後が"/"でアクセスされた場合のWebPageクラスを定義しています。


また、初期化処理としてエンコードの指定を行っています。初期化処理はWebPageとは違い、コンストラクタではなくinit()メソッドで行います。

getRequestCycleSettings().setResponseRequestEncoding("UTF-8");

リクエスト・レスポンスのエンコードを"UTF-8"として指定しています。デフォルトが"UTF-8"なので、記述しなくても同じ動作をしますが、明示的に記述しておいたほうがいいでしょう。

getMarkupSettings().setDefaultMarkupEncoding("Shift_JIS");

HTMLファイルのエンコードを"Shift_JIS"に指定しています。こちらもデフォルトは"UTF-8"です。
HTMLがXHTMLファイルの場合、XML宣言に指定されたエンコードがあればそちらを優先します。

web.xmlの作成

app/WEB-INF/web.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
      PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
      "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
    <display-name>Wicket Examples</display-name>
    <filter>
        <filter-name>HelloWorldApplication</filter-name>
        <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
        <init-param>
          <param-name>applicationClassName</param-name>
          <param-value>example.helloworld.HelloWorldApplication</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>HelloWorldApplication</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

web.xmlでは、HelloWorldApplicationクラスが、どのようなルールの時に呼ばれるかを定義しています。今回は、全てのURLパターンでHelloWorldApplicationが呼ばれるようにしています。

実行

Tomcatを起動し、http://localhost:8080/WicketSample/にアクセスすると、画面に

Hello World!

と表示されます。