Wicket- und Listenwahltransfers

Stellen Sie sich folgendes Szenario vor: Wir möchten zwei Auswahlfelder haben und Optionen von einem zum anderen und wieder zurück hinzufügen. Derzeit ist dies in Wicket nicht ohne weiteres möglich, obwohl es eine Menge Erweiterungen gibt. Dieser Blog beschreibt eine einfache Möglichkeit, eine Komponente zu erstellen, die genau das tut!

Für die Erstellung eines Auswahlfeldes stehen mehrere Optionen zur Verfügung. Sie können ein ListChoice-Objekt für die Auswahl einer einzelnen Option oder ein ListMultipleChoice-Objekt für die Auswahl mehrerer Optionen verwenden.Wie fangen wir an?Nun, zunächst müssen wir zwei ListMultipleChoice-Objekte erstellen. Geben wir ihnen die folgenden Namen: Originale und Ziele Wie Sie unten sehen können, ist das gar nicht so schwer.

  // Die ausgewählten Optionen in der Auswahlliste.
  private Liste selectedOriginals;
  private Liste selectedDestinations;
ListMultipleChoice Originale = new ListMultipleChoice("Originale",
  new PropertyModel(this, "selectedOriginals"), new LoadableDetachableModel() {
  @Override
  protected Object load() {
  return Arrays.asList(new String[] {"eins", "zwei", "drei", "vier", "fünf", "sechs"});
  }
  });
ListMultipleChoice destinations = new ListMultipleChoice("destinations",
  new PropertyModel(this, "selectedDestinations"), new LoadableDetachableModel() {
  @Override
  protected Object load() {
  return new ArrayList();
  }
  });

und den passenden HTML-Teil:

Als nächstes benötigen wir zwei Schaltflächen, eine zum Hinzufügen und eine zum Entfernen von Optionen aus einem Auswahlfeld.

AjaxButton add = new AjaxButton("add") {
  @Override
  protected void onSubmit(AjaxRequestTarget target, Form form) {
  aktualisieren(Ziel,ausgewählteOriginale, Originale, Ziele);
  }
  };
AjaxButton remove = new AjaxButton("remove") {
  @Override
  protected void onSubmit(AjaxRequestTarget target, Form form) {
  update(ziel, ausgewählteZiele, Ziele, Originale);
  }
  };
 
/**
  * Aktualisiert die Auswahlfelder.
  * @param target Das {@link AjaxRequestTarget}.
  */
  private void update(AjaxRequestTarget target, List selections, ListMultipleChoice from, ListMultipleChoice to) {
  for (String destination : selections) {
  List choices = getChoices(from);
  if (!to.getChoices().contains(destination)) {
  to.getChoices().add(Ziel);
  choices.remove(Ziel);
  from.setChoices(choices);
  }
  }
  target.addComponent(to);
  target.addComponent(from);
  }

und den passenden HTML-Teil:

Wie Sie sehen können, verwende ich eine AjaxButton, was im Grunde das ist, was Sie für dieses Beispiel wollen. Wir wollen nicht die ganze Seite neu laden. Das war's. Als Nächstes wollen wir eine Komponente erstellen, die all dies tut, damit wir sie wiederverwenden können. Nach einer Analyse habe ich herausgefunden, dass wir nur eine Methode benötigen, die alle Optionen abruft. Ich habe sie getOriginalChoices() genannt; Wenn Sie sich das beigefügte Beispielprojekt ansehen, können Sie sehen, dass es jetzt sehr einfach ist, es zu verwenden. Um die Komponente zu verwenden, müssen Sie Folgendes tun:

  ListMultipleChoiceTransfer listMultipleChoiceTransfer = new ListMultipleChoiceTransfer("test"){
  @Override
  public List getOriginalChoices() {
  return Arrays.asList(new String[] {"eins", "zwei", "drei", "vier", "fünf", "sechs"});
  }
  };

und die passende html

ListMultipleChoiceTransfer wird hier platziert

Ich habe das Beispielprojekt hier angehängt, damit Sie sich den Code selbst ansehen können.