Scroll Infinito

Scroll Infinito é uma técnica de paginação que consiste em não mostrar a quantidade de resultados para os usuários, sendo característico carregar novo conjunto de dados quando necessário (algum evento ou ação do usuário, por exemplo), partindo do pressuposto que, em alguns cenários, a quantidade e a navegação entre páginas não são informações relevantes para o usuário.

API de Scroll Infinito

Para ter este tipo de comportamento, basta incluir em sua página uma instância do PagelessScrollPanel, ele cuidará de toda a lógica de paginação do lado do Wicket, mas precisa que você forneça algumas coisas:

  • A quantidade de itens renderizados por página
  • Um PagelessScrollDataProvider que forneça informações sobre o conteúdo das páginas de dados
  • Um PagelessScrollPanelFactory que saiba como criar o markup de cada item exibido na lista

Veja a imagem abaixo:

../../_images/Scoll-infinito-api.png

Implementando devidamente o Data Provider e o Panel Factory você terá um painel com scroll, que por default reconhece que o usuário chegou ao final e carrega a próxima página, sem a necessidade de intervenção do usuário. Veja a página de exemplo que está no Jmine Tec chamada SampleMemoryPagelessScrolledPage

O conceito de página

Os dados são carregados em grupo de N elementos, onde N e o tamanho da página, fornecido na criação do DataProvider. Isto é feito criando N paineis de entidade e adicionando-o de uma vez ao container principal.

Personalizando a estrutura

A primeira implementação da api tinha um markup fixo, mas, para permitir que cada usuário defina como o painel deve ser exibido usamos fragmentos do wicket. Você pode entendê-lo como um tipo de painel especial que não precisa, obrigatoriamente, ter um .html de mesmo nome para funcionar. Você precisa criar o markup para cada painel criado usando a tag <wicket:fragment />, veja um exemplo:

<ul wicket:id="eventsPopupContainer"></ul>
<wicket:fragment wicket:id="eventScrollFragment">
        <li wicket:id="scrollItem"></li>
        <li wicket:id="scrollNext" ><span class="btn btn-primary">Arraste... </span></li>
</wicket:fragment>

Evitando paginação por scroll

Por default, novas páginas são carregadas por scroll, ou seja, quando o usuário chega no final do que está sendo exibido, uma nova página será carregada automaticamente. É possível evitar este comportamento simplesmente adicionando a classe manual-scroll ao container principal:

<ul wicket:id="eventsPopupContainer" class="manual-scroll"></ul>
<wicket:fragment wicket:id="eventScrollFragment">
        <li wicket:id="scrollItem"></li>
        <li wicket:id="scrollNext" ><span class="btn btn-primary">Arraste... </span></li>
</wicket:fragment>

Carregando dados da Base

Provavelmente você tentará carregar coisas diretamente da base, utilizando a estrutura de DAOs que o Jmine oferece. Neste cenário, você pode utilizar como factory o DatabasePagelessScrollFactory, que cuida da paginação em banco por você, só sendo necessário passar a query de pesquisa pela interface SearchCommandHandler.

A hierarquia de parâmetros fica parecida com a imagem abaixo:

../../_images/Scoll-infinito-database.png

Veja um exemplo de uso diretamente no Tec, na página DatabasePagelessScrollPage.