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

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?

Noch keine Stimmen abgegeben
Noch keine Kommentare
  • 19 Apr. 2019

    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.

    Noch keine Stimmen abgegeben
    Noch keine Kommentare