Wicket Paletteの例

改札パレットの例

Wicket拡張機能には、2つの選択ボックスをレンダリングし、ユーザーが1つの選択ボックスから別の選択ボックスにアイテムを移動できるようにする特別な「Palette」コンポーネントが付属しています。

図：パレットコンポーネント

wicket palette

//Java
import org.apache.wicket.extensions.markup.html.form.palette.Palette;

final Palette palette = new Palette("palette",
    new ListModel(selected),
    new CollectionModel(listHosting),
    renderer, 10, true);


//HTML

パレット署名

Palette(String id,
    IModel> model,
    IModel> choicesModel,
    IChoiceRenderer choiceRenderer,
    int rows, boolean allowOrder)

id –コンポーネントID
モデルモデル-ユーザーの選択のコレクションを表します
choicesModelモデル-利用可能なすべての選択肢のコレクションを表します
choiceRenderer –選択肢のレンダリングに使用されるレンダリング。これは、インデックスではなく、オブジェクトに一意のIDを使用する必要があります
rows –スクロールなしで画面に表示される選択肢の数
allowOrder –ユーザーが選択を上下に移動できるようにします

Note
理解するのはかなり難しいですよね？気にしないで、次の完全なWicketパレットの例を読んでください。

1. 改札拡張

「Palette」を使用するには、「wicket-extensions」jarが必要です。

ファイル：pom.xml



    

        
            org.apache.wicket
            wicket-extensions
            1.4.17

2. パレットのモデル

選択ボックスの選択肢を表すモデルクラスを作成します。

package com.example.user;

import java.io.Serializable;

public class Hosting implements Serializable {

    String id;
    String name;

    //getter, setter, constructor and toString() methods

}

3. パレットの例

上記のホスティングモデルをパレットコンポーネントに配置し、ChoiceRendererを使用して何を表示するかを決定する例。それは自明であるべきです。

package com.example.user;

import java.util.ArrayList;
import java.util.List;
import org.apache.wicket.PageParameters;
import org.apache.wicket.extensions.markup.html.form.palette.Palette;
import org.apache.wicket.markup.html.form.ChoiceRenderer;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.IChoiceRenderer;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.model.util.CollectionModel;
import org.apache.wicket.model.util.ListModel;

public class PalettePage extends WebPage {

    private static final List listHosting;
    static
    {
        listHosting = new ArrayList();
        listHosting.add(new Hosting("1", "Shared"));
        listHosting.add(new Hosting("2", "VPS"));
        listHosting.add(new Hosting("3", "Dedicated"));
    }

    private List selected = new ArrayList();


    public PalettePage(final PageParameters parameters) {

        add(new FeedbackPanel("feedback"));

        Form form = new Form("form") {
            @Override
            protected void onSubmit() {

                info("Selected language : " + selected);

            }
        };

        add(form);

        //make VPS selected by default
        //selected.add(new Hosting("2", "VPS"));

        IChoiceRenderer renderer = new ChoiceRenderer("name","id");

        final Palette palette = new Palette("palette",
                new ListModel(selected),
                new CollectionModel(listHosting),
                renderer, 10, true);

        form.add(palette);

    }
}

How to make certain value selected by default.
この場合、デフォルトで「VPS」を選択するには、これを「selected」変数に追加します。

 selected.add(new Hosting("2", "VPS"));

4. HTMLページ

完全なHTMLソースコード。






    Wicket palette example

    
    
        
            Select your hosting types

5. Demo

開始して訪問–http://localhost:8080/WicketExamples/

いくつかのアイテムを選択して移動し、表示ボタンをクリックします。

wicket palette

P.S The sort up and sort down buttons are applied to selected item (right select box) only.

ダウンロード–Wicket-Palette-Example.zip（8KB）

TOC