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>

Maven Centralリポジトリで最新バージョンのWicketを確認することをお勧めします。これは、読んだ時点で、ここで使用されているものと一致しない場合があります。

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

3. HelloWorldウィケット

Wicketのサブクラス化から始めましょうウェブアプリケーションクラス。少なくとも、オーバーライドする必要があります。 クラス<? ページを拡張>getHomePage() 方法。

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

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

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

ソースコードのパッケージディレクトリで、最初にHelloWorld。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>

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

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

ブラウザでhttp:// localhost:8080 / HelloWorld/にアクセスしてみましょう。 メッセージのある空のページ 「こんにちは世界」 表示されます。

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、モデル、およびカフェ名のリストを受け入れます。

次に、 AjaxFormComponentUpdatingBehavior が、 onUpdate コールバックメソッドとともに追加されます。このコールバックメソッドは、ajaxリクエストが発行されるとラベルのモデルを更新します。 最後に、ラベルコンポーネントが更新のターゲットとして設定されます。

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

ご覧のとおり、すべてがJavaであるため、1行のJavascriptは必要ありませんでした。 ラベルの表示を変更するために、POJOを変更しただけです。 Javaオブジェクトの変更がWebページの変更に変換されるメカニズムは、カーテンの後ろで発生し、開発者には関係ありません。

Wicketは、AJAX対応のコンポーネントの大きなセットをすぐに提供します。 実例を含むコンポーネントのカタログは、こちらで入手できます。

5. 結論

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

Wicketは、配管コードを完全に排除することを目的とした抽象化レイヤーを提供します。

このフレームワークを使用した開発がどのように見えるかを味わうために、GitHubにあるの2つの簡単な例を含めました。