Wicket Examples ■Using Fragments - レベルエンター山本大のブログ

フラグメントを使う

This example shows you how to use fragments (Wicket 1.2 feature) to lessen the burden on extra markup files.
Fragments are 'inline panels' and are a quick way of using panel type components in pages without having to create a Panel markup file and class.
このサンプルは、（Wicket 1.2の機能である）余分なマークアップの負担を減らすための「フラグメント機能」を利用する方法を紹介します。
フラグメントとは”インラインパネル”であり、ページでパネルマークアップとクラスを作らずにパネル型のコンポーネントを使うための簡単な方法です。

In all the Wicket examples, you have to put all files in the same package directory. This means putting the markup files and the java files next to one another. It is possible to alter this behavior, but that is beyond the scope of this example. The only exception is the oblibatory web.xml file which should reside in the WEB-INF/ directory of your web application root folder.
すべてのWicketサンプルは、すべてのファイルを同じパッケージディレクトリにおいてください。
つまり、マークアップ（HTML）ファイルとJavaファイルを隣合うようにおきます。
(HTMLの配置は)他にも方法はありますが、それを説明するのはこのサンプルの範囲外です。
例外として、web.xmlファイルはアプリケーションのルートフォルダ以下にあるWEB-INF/ディレクトリにおくべきだと義務づけられています。

In this example we assume you already have read and understood the other examples which give you information on the structure and nature of Wicket applications. Specifically read and understand the Hello, World example.
このサンプルでは読者は既に、Wicketアプリケーションの構造や性質について語られている他のサンプルを読んでおり、理解しているものと仮定します。
特に、HelloWorldサンプルについては読解しておいてください。

Creating a Fragmentフラグメントの作成
First things first, let's create a page that we can add our fragments to. We will add a Loop that will repeat markup and choose a different Fragment for each item in the loop.
一番初めに、フラグメントを追加するためのページを作りましょう。マークアップを繰り返すループを作ります。そして、ループのなかのそれぞれの項目で異なるフラグメントをえらびます。

Listing 1 the page markup fileリスト1 ページのマークアップファイル

<html>
<head></head>
<body>
<li wicket:id="list"><span wicket:id="panel"></span></li>

<wicket:fragment wicket:id="fragment1">panel 1</wicket:fragment>
<wicket:fragment wicket:id="fragment2">panel 2</wicket:fragment>
</body>
</html>

As you can see in this markup file, we already took care of adding the fragment markup to the page in the tags.
Each fragment can contain its own markup and components.
Those components need to be added to the Fragment instance in the Java file, just as you would do with a panel and web markup container.
このマークアップファイルを見では、すでにフラグメントマークアップを、タグの中のページに追加することを処理しました。
それぞれのフラグメントは、自分自身に、マークアップとコンポーネントを含むことができます。
それらのコンポーネントは、Javaファイルの中のFragmentインスタンスに加えられる必要があります。ちょうど、パネルとWebマークアップコンテナでやったように。

Listing 2 the page java fileリスト2 ページJavaファイル

package wicket.quickstart;

import wicket.markup.html.list.Loop;
import wicket.markup.html.panel.Fragment;

public class Index extends QuickStartPage {
    public Index() {
        Loop loop = new Loop("list", 5) {
            protected void populateItem(LoopItem item) {
                String fragmentId = "fragment" + (item.getIteration() % 2 + 1);
                item.add(new Fragment("panel", fragmentId));
            }
        };
        add(loop);
    }
}

The Loop will render 5 items, and the populateItem method will be called for each item.
In each item we construct a fragment identifier that corresponds to the identifier in the .
The Fragment constructor takes the identifier of the markup it needs to attach to, and the fragment identifier telling it where to find the specific markup in the file.
ループは5つの項目を描画します。そしてpopulateItemメソッドは、それぞれの項目によって呼び出されます。
それぞれの項目では、タグの識別子と一致するフラグメントの識別子を構築します。
フラグメントのコンストラクタは、接続するために必要なマークアップの識別子を取ります。そして、フラグメントの識別子は、ファイルの中の特定のマークアップを見つけた場所を教えてくれます。

Adding components to fragmentsフラグメントに対するコンポーネントの追加
In the previous example we just showed different markup for each fragment, but you can add components to the fragments as well. Let's add a label to fragment 1.
一つ前のサンプルでは、フラグメント毎に異なるマークアップを紹介しました。しかし、おまけにフラグメントにコンポーネントを追加できます。さぁ、ラベルをFragment1に追加しましょう。

Listing 3 adding a label to a fragmentリスト3 フラグメントにラベルを追加する

<html>
<head></head>
<body>
<ul>
<li wicket:id="list"><span wicket:id="panel"></span></li>
</ul>
<wicket:fragment wicket:id="fragment1">panel 1 <span wicket:id="label"></span></wicket:fragment>
<wicket:fragment wicket:id="fragment2">panel 2</wicket:fragment>
</body>
</html>

In order to add the component to the first fragment we'll introduce a subclass for fragment one to encapsulate the component.

コンポーネントを最初のフラグメントに追加して、Fragment1がコンポーネントをカプセル化するように、サブクラスを導入するつもりです。

Listing 4 introducing a fragment subclassリスト4 フラグメントサブクラスを導入する

package wicket.quickstart;

import wicket.markup.html.basic.Label;
import wicket.markup.html.list.Loop;
import wicket.markup.html.panel.Fragment;

public class Index extends QuickStartPage {
    public class Fragment1 extends Fragment {
        public Fragment1(String id, String markupId) {
            super(id, markupId);
            add(new Label("label", "Hello, World!"));
        }
    }

    public Index() {
        Loop loop = new Loop("list", 5) {
            protected void populateItem(LoopItem item) {
                int index = (item.getIteration() % 2 + 1);
                String fragmentId = "fragment" + index;
                if (index == 1) {
                    item.add(new Fragment1("panel", fragmentId));
                } else {
                    item.add(new Fragment("panel", fragmentId));
                }
            }
        };
        add(loop);
    }
}

The class Fragment1 adds the label to itself. In the loop's populateItem we alternate the fragments type between Fragment and Fragment1.
This means that in the final page on one line you'll see "panel 1 Hello, World!" and on the other line just "panel 2".
Fragment1クラスは、ラベルを自分自身に追加します。ループ中のpopulateItemメソッドでは、 FragmentとFragment1の間のフラグメントタイプを交替します。
これは、"panel 1 Hello, World!"と表示されたある線の上と、そしてちょうど"panel 2"というもう片方の線の上の、最終的なページのことです。

Summaryサマリー
Fragments make a quick way to add encapsulated components without having to resort to setting the visibility flag on a markup container.
For fragments we introduced a new Wicket tag: .
フラグメントは、マークアップコンテナ上で可視化フラグの設定の手段を使わずに、カプセル化されたコンポーネントを追加するためのてっとり早い方法です。
フラグメントのために、新しいWicketタグである「 . 」を紹介します。