セットアップ～画面表示

投稿日 2010/10/18

ダウンロードとインストール
WebApplicationクラスの作成
web.xmlの編集
ページの作成
起動、表示
感じたこと

ダウンロードとインストール

あらかじめJDE6、Eclipse（pleiades）、Tomcatをインストールしておく。Eclipseのサーバー設定なども行っておくこと。
Eclipseで「動的Webプロジェクト」を作成する。
公式サイトから「apache-wicket-1.4.12.zip」をダウンロード。
ファイルを展開し、lib以下のjarファイル全てを、プロジェクト\WebContent\WEB-INF\lib に入れる。warファイルはサンプルなので不要。

WebApplicationクラスの作成

以下のようなクラスを作成する。

public class クラス名 extends WebApplication {
  private static final String CHARSET = "UTF-8";

  // 初期化
  @Override
  protected void init() {
    super.init();
    getRequestCycleSettings()
      .setResponseRequestEncoding(CHARSET);
    getMarkupSettings()
      .setDefaultMarkupEncoding(CHARSET);
  }

  // ホームページとなるクラス
  @Override
  public Class getHomePage() {
    return ホームページとなるクラス.class;
  }

  // 動作モード
  // 開発時は「WebApplication.DEVELOPMENT」
  // リリース時は「WebApplication.DEPLOYMENT」
  // 開発モード時は画面にデバッグウィンドウが表示され、Ajaxの戻り値などが確認できる
  @Override
  public String getConfigurationType() {
    return WebApplication.DEVELOPMENT;
  }
}

public class クラス名 extends WebApplication {

private static final String CHARSET = "UTF-8";

// 初期化

@Override

protected void init() {

super.init();

getRequestCycleSettings()

.setResponseRequestEncoding(CHARSET);

getMarkupSettings()

.setDefaultMarkupEncoding(CHARSET);

}

// ホームページとなるクラス

@Override

public Class getHomePage() {

return ホームページとなるクラス.class;

}

// 動作モード

// 開発時は「WebApplication.DEVELOPMENT」

// リリース時は「WebApplication.DEPLOYMENT」

// 開発モード時は画面にデバッグウィンドウが表示され、Ajaxの戻り値などが確認できる

@Override

public String getConfigurationType() {

return WebApplication.DEVELOPMENT;

}

web.xmlの編集

プロジェクト\WebContent\WEB-INF\web.xml に、以下を追記。

<filter>
  <filter-name>フィルタ名</filter-name>
  <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
  <init-param>
    <param-name>applicationClassName</param-name>
    <param-value>上記で作成したクラス</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>フィルタ名</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

<filter-name>フィルタ名</filter-name>

<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>

<init-param>

<param-name>applicationClassName</param-name>

<param-value>上記で作成したクラス</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>フィルタ名</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

ページの作成

とりあえずホームページとなるクラスを作成。

public class ホームページとなるクラス extends WebPage {
  // コンストラクタ
  public ホームページとなるクラス() {
    WebMarkupContainer container =
      new WebMarkupContainer("samplecontainer");
    add(container);
    Label label = new Label("samplelabel", "Hello Wicket.");
    container.add(label);
  }
}

public class ホームページとなるクラス extends WebPage {

// コンストラクタ

public ホームページとなるクラス() {

WebMarkupContainer container =

new WebMarkupContainer("samplecontainer");

add(container);

Label label = new Label("samplelabel", "Hello Wicket.");

container.add(label);

}

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>Sample</title>
  </head>
  <body>
    <p wicket:id="samplecontainer">
      <span wicket:id="samplelabel">sample label</span>
    </p>
  </body>
</html>

<?xml version="1.0" encoding="UTF-8"?>

<html

xmlns="http://www.w3.org/1999/xhtml"

xmlns:wicket="http://wicket.apache.org/">

<head>

content="text/html; charset=utf-8" />

<title>Sample</title>

</head>

<body>

<span wicket:id="samplelabel">sample label</span>

</p>

</body>

</html>

上記の12行目の「sample label」の部分は、実行時はページクラスで指定された「Hello Wicket.」という文字列に置き換わって表示されるため、「あいう」でも「dummy」でも、もしくは空文字でも動作上の違いは無い。

ページクラスとhtmlファイルは同じファイル名（拡張子のみ異なる）にし、同じ場所に配置する。
（例）

起動、表示

Eclipseの「サーバー」ビューから「追加および除去」でプロジェクトを追加し、サーバを起動して、Webブラウザでurlにアクセスする。

感じたこと

Wicketでは、ページクラスに初期化処理やビジネスロジックなどを記述し（Model）、HTMLテンプレートにレイアウトを記述する（View）。

同様のことはStrutsなどでもできるように思えるが、実際はtaglibなどを使用するためViewにロジックが入り込んでしまうことが多く、ModelとViewの完全な分離はなかなか難しい。文字列の表示・非表示だけでも、<c:if>や<logic:equal>などを使うことになったり…

ところがWicketの場合、Viewにロジックは存在しない。表示・非表示の制御すらModelで行う。上記の「ホームページとなるクラス」はコード量が極端に少ないので伝わりづらいかもしれないが、コンポーネントを配置し、その上に別のコンポーネントを貼り付けていくという、言ってみればSwingなどのようなつくりになっている。

例えば、テキストボックスとsubmitボタンを持つフォームタグを設置する場合は以下のように記述する。

// フォーム設定
formModel = new CompoundPropertyModel(this);
Form form = new Form("form", formModel);
add(form);

// フォームの入力部分設定
fieldModel = new Model();
TextField field = new TextField("field", fieldModel);
form.add(field);

// フォームの送信ボタン設定
Button submit = new Button("submit", new Model()) {
  @Override
  public void onSubmit() {
    // 処理
  }
};
form.add(submit);

// フォーム設定

formModel = new CompoundPropertyModel(this);

Form form = new Form("form", formModel);

add(form);

// フォームの入力部分設定

fieldModel = new Model();

TextField field = new TextField("field", fieldModel);

form.add(field);

// フォームの送信ボタン設定

Button submit = new Button("submit", new Model()) {

@Override

public void onSubmit() {

// 処理

}

};

form.add(submit);

これを踏まえて考えると、表示・非表示の制御もModel側で行えるのでは？という考えに行き着くが、実際にそのようにして制御ができる。上記のサンプルページで「Hello Wicket.」を非表示にさせたいのなら container.setVisible(false); 、もしくは label.setVisible(false); と書くだけでいい。

一度Strutsに慣れるとかえって面倒に感じるかもしれないが、WicketではModelとViewが分離できることでもう一つ大きなメリットがある。それは「ViewがWebブラウザで開けるまともなHTMLである」というところだ。

従来のWebアプリでは、まずモックや紙芝居と呼ばれるHTMLファイルを作成した後、拡張子を変え、taglibやロジックを追加し…などとしているうちに最終的には別のものになってしまう。独自タグや埋め込み変数なども入っているため、当然Webブラウザで開いても正常に表示はされない。ところがWicketの場合、「wicket:id=…」などの属性を追加しなければならないところまでは従来と一緒だが、最終的にはファイルはHTMLとしての形を残しているし、ロジックやtaglibもないので、そのままWebブラウザで開いても正しく表示ができる。ここが大きい！（と思う）

またよく言われるメリットとして「設定ファイルが不要」ということが挙げられる。Strutsで言えばstruts-config.xmlの設定などがいらないということ。Xdocletを使えばある程度は緩和されるとはいえ、やはり実際のソースとは別の部分にそのような設定があるのは不便。リファクタリング時なども直しもれがあったりして。そういう手間がかからず、Javaの中で完結するのは確かに作りやすいのかもしれない。