JavaとHTMLだけでWebアプリケーションを作る「Apache Wicket」

さて、ここでアプリケーションを構成するファイルの内容を見ながら少しずつカスタマイズしてみよう。Wicketのアプリケーションは大きく分けて以下の3つ部分から構成される。

静的コンテンツを記述したHTMLファイル
動的コンテンツを実装したJavaクラス
アプリケーションを管理するためのJavaクラス

NetBeansのWicketプラグインを使ってプロジェクトを作成した場合、まず静的コンテンツとして以下の2つのHTMLファイルと、これらのHTMLで利用するCSSファイルが用意される。

HeaderPanel.html - ページのヘッダ部分を表示するためのHTMLファイル
HomePage.html - サイトのトップページを表示するためのHTMLファイル
style.css - Webページで利用するスタイルシート

まずHeaderPanel.htmlはリスト1のようになっている。

リスト1 HeaderPanel.html

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

<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:wicket="http://wicket.apache.org">
  <head><title>Wicket Example</title></head>

  <body>
    <wicket:panel>
      <h1>Wicket Example</h1>

      <p id="titleblock">
    <b><font size="+1">
        Start of <span wicket:id="exampleTitle">Example Title Goes Here</span>
    </font></b>
      </p>
    </wicket:panel>
  </body>
</html>

ここで、

<span wicket:id="exampleTitle">Example Title Goes Here</span>

の部分がJavaで実装したコンテンツに置き換えられることになる。置き換えられるコンテンツは"wicket:id"属性の値によってJavaプログラムと関連付けられる。つまりこの例の場合は「exampleTitle」というIDを持ったコンテンツがここに挿入される。

HomePage.htmlの方は少し修正してリスト2のようにした。HeaderPanel.htmlの場合と同様に、wicket:id属性を持ったタグの部分が動的コンテンツに置き換えられる。この例では「message」というIDのコンテンツを追加してある。

リスト2 HomePage.html

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

<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:wicket="http://wicket.apache.org">
  <head>
    <title></title>
    <link wicket:id='stylesheet'/>
  </head>

  <body>
    <span wicket:id='mainNavigation'/>

    <!-- 追加した部分 -->
    <b><span wicket:id="message" >ここにメッセージが表示される。</span></b>

  </body>
</html>

動的コンテンツを実装するためのJavaクラスとしては以下の3つのファイルが用意される。

BasePage.java - HomePageの親クラスであり、ヘッダ(HeaderPanel.html)を持ったページを構成するためのJavaクラス
HomePage.java - HomePanel.htmlに挿入されるコンテンツを実装したJavaクラス
HeaderPanel.java - HeaderPanel.htmlに挿入されるコンテンツを実装したJavaクラス

BasePageクラスはリスト3のようにorg.apache.wicket.markup.html.WebPageというクラスを継承している。

リスト3 BasePage.java

package jp.co.mycom.howto.wicket;           

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.model.IModel;
import org.apache.wicket.markup.html.resources.StyleSheetReference;
import org.apache.wicket.util.string.Strings;

public class BasePage extends WebPage {
    public BasePage() {
        this(null);
    }

    public BasePage(IModel model) {
        super(model);
        final String packageName = getClass().getPackage().getName();

        // ヘッダパネルを追加
        add(new HeaderPanel("mainNavigation", 
                Strings.afterLast(packageName, '.')));
        // スタイルシートを指定
        add(new StyleSheetReference("stylesheet", 
                    BasePage.class, "style.css"));
    }
}

WebPageクラスはWicketでWebページを作成するためのベースになるクラスである。このクラスのadd()メソッドにWicketのコンポーネント(LabelやPanelなど)を渡すことで、ページにそれらのコンテンツが追加されるようになっている。このBasePageクラスではHeaderPanelオブジェクトを渡すことでヘッダ部分を作成している。

そのHeaderPanelクラスはリスト4のようにorg.apache.wicket.markup.html.panel.Panelクラスを継承している。

リスト4 HeaderPanelクラス

package jp.co.mycom.howto.wicket;           

import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;

public class HeaderPanel extends Panel {
    public HeaderPanel(String componentName, String exampleTitle) {
        super(componentName);
    // Labelを利用してタイトルを追加
        add(new Label("exampleTitle", exampleTitle));
    }
}

内部では文字を表示するためにorg.apache.wicket.markup.html.basic.Labelクラスを使用している。これらのクラスはWebページに追加するコンテンツを表すもので、org.apache.wicket.Componentクラスを継承している。

HomePageはBasePageクラスを継承したクラスで、HomePage.htmlに対応してWebサイトのトップページの本体部分の動作を定義する。デフォルトでは何の動作も実装されていないので、今回はリスト5のように「Hello Wicket!」と表示するLabelを追加した。

リスト5 HomePageクラス

package jp.co.mycom.howto.wicket;

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

public class HomePage extends BasePage {
    public HomePage() {
        // 追加分: 表示する文字をセットしたLabelを作成し、ページに追加
        add(new Label("message", "Hello Wicket!"));
    }
}

ここまでで気付いた方もいるだろうが、Wicketアプリケーションのコンテンツの構成はSwingのそれとよく似ている。基本的にはコンポーネントオブジェクトを定義してそれを組み合わせ、対応するHTMLを記述することでページ全体の構成や動作を決められるようになっているわけだ。

最後に、アプリケーション全体の設定はorg.apache.wicket.protocol.http.WebApplicationクラスを継承したApplication.javaで定義される。WebApplicationはアプリケーションを管理するためのベースとなるクラスであり、たとえばトップページの指定やセッションの作成、ログの記録、フィルタの設定などを行うことができる。

このApplication.javaでは、次のようにgetHomePage()メソッドがHomePageオブジェクトを返すように実装することによってHomePage.htmlがトップページになるように設定している。

リスト6 Application.java

package jp.co.mycom.howto.wicket;           

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

public class Application extends WebApplication {
    public Application() {
    }

    public Class getHomePage() {
        return HomePage.class;
    }

    /**
     * 追加分：初期化用メソッド
     */
    @Override
    protected void init() {
        super.init();
        // 出力するHTMLからwicketタグを削除するように設定
        super.getMarkupSettings().setStripWicketTags(true);
    }
}

今回はさらに初期化のためのinit()メソッドを定義し、その中で出力するHTMLからwicketタグを削除するように設定している。これは、デフォルトのままだとwicket:idを持つタグがWicketのコンテンツに置換した後でもタグ自身が残ってしまうためである。

ここまで修正できたら、プロジェクトをWebサーバにデプロイしてWebブラウザからアクセスすれば、図5のようにHomePage.javaで指定したメッセージが表示されるようになっているはずだ。

図5