Wicket - Aktualisieren von ListViews mit einem AjaxLink

Stellen Sie sich folgendes Szenario vor: Wir möchten einige Daten in Form einer Tabelle anzeigen und diese aktualisieren, wenn wir auf einen Link oder eine Schaltfläche klicken. Wir möchten die Seite nicht komplett aktualisieren, sondern dies auf Ajax-Basis tun. Außerdem möchten wir die CSS für jede Zelle ändern. In Wicket können Sie eine ListView verwenden, die über eine Liste von Objekten iteriert und diese wie eine Tabelle anzeigt. Dieser Blog beschreibt, wie Sie ListView-Daten aktualisieren und die CSS für jede Zelle ändern können.

Wie fangen wir also an? Nun, zunächst müssen wir eine ListView erstellen. Nennen wir sie Ansicht.Aber vorher brauchen wir eine Liste der Objekte, die wir anzeigen wollen. Also erstellen wir sie. Ich verwende eine Liste von TestObjects. Wie Sie unten sehen können, ist das nicht sehr schwer.

private ListView Ansicht;
private Liste Objekte;
objects = Arrays.asList(new TestObject[] {
  new TestObject("one", true),
  new TestObject("zwei", false),
  new TestObject("drei", true)});
view = new ListView("view", objects) {
  @Override
  protected void populateItem(ListItem item) {
  Label label = new Label("label", new PropertyModel(item.getModel(), "name"));
  label.setOutputMarkupId(true);
  item.add(label);
  }
};

Als nächstes erstellen wir einen IndicatingAjaxFallbackLink, der im Grunde ein AjaxLink ist, der einen Indikator anzeigt.

private IndicatingAjaxFallbackLink link;
link = new IndicatingAjaxFallbackLink("link") {
  @Override
  public void onClick(AjaxRequestTarget target) {
  objects = Arrays.asList(new TestObject[] {
  new TestObject("vier", false),
  new TestObject("fünf", true),
  new TestObject("six", false)});
  view.setList(objects);
  target.addChildren(view, Label.class);
  }
};

Das ist alles. Jetzt fügen wir eine neue Liste von Objekten zur ListView hinzu. Um sicherzustellen, dass die ListView aktualisiert wird, fügen wir

target.addChildren(view, Label.class);

anstelle von

target.addComponent(view);

. Da eine ListView ein Repeater ist, können wir sie nicht aktualisieren, aber wir können Komponenten in einer ListView aktualisieren. Jetzt können wir also eine ListView aktualisieren, aber wie ändern wir das CSS für jedes Feld? Wir fügen einen AttributeModifier hinzu. In der oben gezeigten populateItem-Methode fügen wir einfach Folgendes hinzu

label.add(new AttributeModifier("class", true, new PropertyModel(item.getModel(), "odd") {
  @Override
  public Object getObject() {
  return ((Boolean) super.getObject()) ? "ungerade" : "gerade"; 
  }
}));

Die Methode getObject wird überschrieben, weil die Methode getOdd() des TestObjects einen booleschen Wert zurückgibt. Anstatt also true oder false zurückzugeben, gibt sie jetzt "ungerade" oder "gerade" zurück, die CSS-Klassenstile sind. Das war's. Ich habe das Beispielprojekt hier angehängt, damit Sie sich den Code selbst ansehen können.