Aquí un breve extracto del Capítulo 9 Lazy Loading de mi libro Data-Centric Applications with Vaadin 8.
Aunque hemos explicado la carga diferida usando el componente Grid, podemos utilizar el mismo método de servicio backend para implementar componentes UI personalizados que soporten carga diferida (en Inglés lazy loading). Por ejemplo, puedes usar un VerticalLayout para agregar conjuntos de, digamos, 10 componentes cada vez que el usuario hace clic en un botón cargar más en la parte inferior del layout. En este caso, necesitarías llevar un registro del desplazamiento actual y seguir incrementándolo hasta que el método de servicio devuelva menos de 10 elementos.
El siguiente es un componente UI simple que muestra cómo implementar este tipo de carga diferida infinita:
public class LazyLoadingVerticalLayout extends Composite {
private CssLayout content = new CssLayout();
private Button button = new Button("Cargar más...");
private int offset;
private int pageSize;
public LazyLoadingVerticalLayout(int pageSize) {
this.pageSize = pageSize;
button.setStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
VerticalLayout mainLayout = new VerticalLayout(content, button);
setCompositionRoot(mainLayout);
button.addClickListener(e -> loadMore());
loadMore();
}
public void loadMore() {
List<Call> calls = CallRepository.find(
offset, pageSize, "", new HashMap<>());
if (calls.size() < pageSize) {
button.setVisible(false);
}
calls.stream()
.map(call -> new Label(call.toString()))
.forEach(content::addComponent);
offset += pageSize;
}
}
Observa cómo el método loadMore sigue agregando componentes al layout hasta que no haya más resultados para agregar, momento en el cual el botón Cargar más… se oculta en la UI.
La siguiente captura de pantalla muestra este componente en acción:
Puedes aprender más sobre carga diferida y muchos otros temas relacionados con el desarrollo web usando Vaadin en mi libro Data-Centric Applications with Vaadin 8, disponible en amazon.com, packtpub.com, y muchas otras librerías en línea.