Ir al contenido

Carga diferida infinita

·280 palabras·2 mins
Vaadin
Alejandro Duarte
Autor
Alejandro Duarte
Alejandro Duarte es un Ingeniero de Software, escritor publicado y galardonado. Actualmente, trabaja para MariaDB plc como Ingeniero de Relaciones con Desarrolladores (Developer Relations Engineer). Comenzó su trayectoria en programación a los 13 años con BASIC en una rudimentaria pantalla negra, para lugo rápidamente transitar a C, C++ y Java durante sus años académicos en la Universidad Nacional de Colombia. Trasladándose primero al Reino Unido y luego a Finlandia, Alejandro profundizó su participación en la comunidad de código abierto. Es reconocido en los círculos de Java, acreditado con artículos y videos que acumulan millones de vistas, y presentaciones en eventos internacionales.

Nota: Traducido de la versión original en Inglés.

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:

Ejemplo de carga diferida infinita

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.

Relacionados

Hola Mundo en Vaadin 10+
·1243 palabras·6 mins
Vaadin
Nota: Traducido de la versión original en Inglés. Vaadin es un conjunto de herramientas para crear aplicaciones web dirigido tanto a desarrolladores frontend como backend.
¿Aplicaciones Centradas en Datos con Vaadin 10?
·261 palabras·2 mins
Vaadin Noticias
Nota: Traducido de la versión original en Inglés. Recientemente recibí algunas copias impresas de mi último libro sobre Vaadin.
¿Qué tiene de especial Vaadin Flow?
·372 palabras·2 mins
Vaadin
Nota: Traducido de la versión original en Inglés. Vaadin Flow es un framework web de código abierto y gratuito para desarrolladores de Java.