JBerries
Ich würde gerne "Infinite Scrolling" in Wicket implementieren aber keine zusätzliche Library einsetzen.
Wenn ich die regulären Repeater verwende (zB. ListView
), dann finde ich keine Möglichkeit neue Elemente hinzuzufügen
ohne die komplette Liste mit dem Container-Elementen neu zu rendern.
Was wäre hier die einfachste Lösung in Wicket mit Ajax?
Hier vielleicht eine unkonventionelle Lösung:
Für eine gegebene ListView
mit einem ListItem
(am besten abgeleitet von Panel in einer separaten Klasse) können wir mit einem regulären AjaxLink
neue Items hinzufügen (und dann zu einem "Infinite-Scrolling" ausbauen).
Dazu rendern wir die nachgeladenen Items mit der ComponentRenderer.renderComponent
Methode (das ist das Unkonventionelle) und fügen so das generierte Html an das Ende der ListView mit einem JavaScript (jQuery) Aufruf.
Insgesamt sieht der Code in etwa so aus:
// die reguläre ListView
add(new ListView<FooBar>("foobars", new FooBarLDM()) {
protected void populateItem(ListItem<FooBar> item) {
item.add(new FooBarPanel("foobar", item.getModel()));
}
});
// AjaxButton zum hinzufügen neuer Items
add(new AjaxLink<Void>("loadMoreButton") {
public void onClick(AjaxRequestTarget target) {
List<FooBar> items = getNewItems();
String rendered = ComponentRenderer.renderComponent(new FooBarList("test", items));
String html = StringEscapeUtils.escapeEcmaScript((String) rendered);
target.appendJavaScript(String.format("$('.foobar-container').append('%s');", html));
}
});
Wobei hier der Selektor ".foobar-container" ein div-Element ist, der die ListView beinhaltet und
die Methode getNewItems
liefert die nachgeladenen Elemente.
StringEscapeUtils
gehört zu Apache Commons Lang.
Die FooBarList
ist eine zusätzliche Klasse, die einfach die ListView mit "FooBar"-Elementen anzeigt (diese kann man auch anstatt der regulären ListView "foobars" verwenden und so Code-Duplizierung vermeiden). Diese Klasse ist notwendig damit die Elemente der Liste separat gerendert werden können.
Dieses Beispiel kann man dann mit einem "Scrollspy" zu dem "Infinite-Scrolling" ausbauen.