Wie implementiere ich "Infinite-Scrolling" in Apache-Wicket?

2019 Apr 19 (10:23)

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?

matthias 2019 Apr 19 (23:24)

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.

0 0 0
Noch keine Stimmen abgegeben
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Genauere Informationen finden Sie in unserer Datenschutzerklärung sowie im Impressum.