Wicketフレームワークの紹介

1概要

Wicket は、デスクトップUI開発から知られているパターンを導入することによってWebインターフェースの構築を単純化することを目的とした、JavaサーバーサイドWebコンポーネント指向フレームワークです。

Wicketでは、JavaコードとXHTML準拠のHTMLページのみを使用してWebアプリケーションを構築することが可能です。 JavascriptもXML構成ファイルも必要ありません。

これは、要求 - 応答サイクルの層を提供し、低レベルでの作業を防ぎ、開発者がビジネスロジックに集中できるようにします。

この記事では、 __HelloWorld W __icketアプリケーションを構築することによって基本を紹介し、続いて互いに通信する2つの組み込みコンポーネントを使用した完全な例を紹介します。

2セットアップ

Wicketプロジェクトを実行するには、以下の依存関係を追加しましょう。

<dependency>
    <groupId>org.apache.wicket</groupId>
    <artifactId>wicket-core</artifactId>
    <version>7.4.0</version>
</dependency>

あなたはhttps://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.apache.wicket%22%20AND%20a%3A%でWicketの最新バージョンをチェックアウトしたいかもしれません22wicket%22[Maven Centralリポジトリ]、あなたが読んでいる時点では、ここで使われているものと一致しないかもしれません。

これで最初のWicketアプリケーションを構築する準備が整いました。

3 HelloWorld ウィケット

Wicketの WebApplication クラスをサブクラス化することから始めましょう。少なくとも、 Classを上書きする必要がありますPage> getHomePage() メソッドを拡張したものです。

Wicketはこのクラスをアプリケーションの主要エントリポイントとして使用します。メソッド内で、単に HelloWorldという名前のクラスの class__オブジェクトを返します。

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

Wicketは設定よりも規約を優先します。アプリケーションに新しいWebページを追加するには、2つのファイルを作成する必要があります。1つのディレクトリに同じ名前(ただし拡張子は異なる)のJavaファイルとHTMLファイルです。追加の設定は、デフォルトの動作を変更したい場合にのみ必要です。

ソースコードパッケージディレクトリに、まずHello World.javaを追加します。

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

それから HelloWorld.html :

<html>
    <body>
        <span wicket:id="hello"></span>
    </body>
</html>

最後のステップとして、__web.xml内にフィルタ定義を追加します。

<filter>
    <filter-name>wicket.examples</filter-name>
    <filter-class>
      org.apache.wicket.protocol.http.WicketFilter
    </filter-class>
    <init-param>
        <param-name>applicationClassName</param-name>
        <param-value>
          com.baeldung.wicket.examples.HelloWorldApplication
        </param-value>
    </init-param>
</filter>

それでおしまい。最初のWicket Webアプリケーションをコーディングしました。

war ファイル(コマンドラインから mvn package )をビルドしてプロジェクトを実行し、JettyやTomcatなどのサーブレットコンテナにデプロイします。

ブラウザでhttp://localhost:8080/HelloWorld/にアクセスしましょう。メッセージ Hello World! を含む空のページが表示されます。

4改札コンポーネント

Wicketのコンポーネントは、Javaクラス、HTMLマークアップ、そしてモデルからなるトライアドです。モデルは、コンポーネントがデータにアクセスするために使用するファサードです。

この構造は、問題をうまく分離し、コンポーネントをデータ中心の操作から切り離すことによって、コードの再利用を促進します。

以下の例は、Ajaxの動作をコンポーネントに追加する方法を示しています。それは2つの要素を持つページで構成されています:ドロップダウンメニューとラベルです。ドロップダウンの選択が変わると、ラベル(およびラベルのみ)が更新されます。

HTMLファイル CafeSelector.html の本文は最小限になり、2つの要素、ドロップダウンメニュー、およびラベルだけが含まれます。

<select wicket:id="cafes"></select>
<p>
    Address: <span wicket:id="address">address</span>
</p>

Java側で、ラベルを作成しましょう。

Label addressLabel = new Label("address",
  new PropertyModel<String>(this.address, "address"));
addressLabel.setOutputMarkupId(true);

HTMLファイルで割り当てられた wicket:id に一致する Label コンストラクタの最初の引数。 2番目の引数は、コンポーネントのモデル、つまりコンポーネントに表示されている基礎データのラッパーです。

setOutputMarkupId メソッドは、コンポーネントをAjaxによる変更の対象にします。それでは、ドロップダウンリストを作成し、それにAjaxの動作を追加しましょう。

DropDownChoice<String> cafeDropdown
  = new DropDownChoice<>(
    "cafes",
    new PropertyModel<String>(this, "selectedCafe"),
    cafeNames);
cafeDropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") {
    @Override
    protected void onUpdate(AjaxRequestTarget target) {
        String name = (String) cafeDropdown.getDefaultModel().getObject();
        address.setAddress(cafeNamesAndAddresses.get(name).getAddress());
        target.add(addressLabel);
    }
});

作成はラベルの作成に似ています。コンストラクタは改札ID、モデル、およびカフェ名のリストを受け入れます。

その後、Ajaxリクエストが発行されるとラベルのモデルを更新する UnUpdate コールバックメソッドと共に AjaxFormComponentUpdatingBehavior が追加されます。最後に、ラベルコンポーネントが更新対象として設定されます。

最後に、ラベルコンポーネントが更新対象として設定されます。

ご覧のとおり、すべてがJavaなので、1行のJavascriptは必要ありませんでした。ラベルの表示内容を変更するために、POJOを変更しました。 Javaオブジェクトを変更することによってWebページが変更されるというメカニズムは、裏側で起こり、開発者には関係ありません。

Wicketは、AJAX対応コンポーネントのすぐに使えるセットを多数提供しています。実例を含むコンポーネントのカタログはhttps://wicket.apache.org/learn/examples/index.html[こちら]から入手できます。

5結論

この紹介記事では、Wicketの基本であるJavaのコンポーネントベースWebフレームワークについて説明しました。

Wicketは、配管コードを完全に廃止することを目的とした抽象化層を提供します。

このフレームワークを使った開発がどのようなものかを知るために、https://github.com/eugenp/tutorials/tree/master/wicket[on GitHub]にある2つの簡単な例を紹介しました。