Wicket Palette Beispiel

Die Wicket-Erweiterung enthält eine spezielle Komponente „Palette“, die zwei Auswahlfelder rendert und es dem Benutzer ermöglicht, Elemente von einem Auswahlfeld in ein anderes zu verschieben.

Abbildung: Palettenkomponente

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

Palettensignatur

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

id - Komponenten-ID
Modell Modell - repräsentiert eine Sammlung von Benutzerauswahlen
choicesModel Model - repräsentiert eine Sammlung aller verfügbaren Auswahlmöglichkeiten
choiceRenderer - Rendern zum Rendern von Auswahlmöglichkeiten. Hierfür müssen eindeutige IDs für die Objekte verwendet werden, nicht für den Index
rows - Anzahl der Auswahlmöglichkeiten, die auf dem Bildschirm ohne Bildlauf angezeigt werden sollen
allowOrder - Ermöglicht dem Benutzer, die Auswahl nach oben und unten zu verschieben

Note
Ziemlich schwer zu verstehen, oder? Lesen Sie das folgende vollständige Wicket-Paletten-Beispiel.

1. Wicket Extension

Um "Palette" zu verwenden, benötigen Sie das Glas "wicket-extensions".

Datei: pom.xml



    

        
            org.apache.wicket
            wicket-extensions
            1.4.17

2. Modell für Palette

Erstellen Sie eine Modellklasse, um die Auswahlmöglichkeiten im Auswahlfeld darzustellen.

package com.example.user;

import java.io.Serializable;

public class Hosting implements Serializable {

    String id;
    String name;

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

}

3. Paletten-Beispiel

Beispiel, um das obige Hosting-Modell in die Palettenkomponente einzufügen und mitChoiceRenderer zu entscheiden, was angezeigt werden soll. Es sollte selbsterklärend sein.

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.
Um in diesem Fall standardmäßig "VPS" auszuwählen, fügen Sie dies zur Variablen "selected" hinzu:

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

4. HTML-Seite

Vollständiger HTML-Quellcode.






    Wicket palette example

    
    
        
            Select your hosting types

5. Demo

Start und Besuch -http://localhost:8080/WicketExamples/

Wählen Sie einige Elemente aus und verschieben Sie sie. Klicken Sie anschließend auf die Schaltfläche zum Anzeigen.

wicket palette

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

Laden Sie es herunter -Wicket-Palette-Example.zip (8 KB)

TOC

Wicket Palette Beispiel