Wicket: Paginando listagens em 3 passos

Um dos pontos que mais se apanha para implementar quando do desenvolvimento de aplicações Web, é a paginação de lista de dados. Lembro-me dos tempos de Struts, onde a grande dúvida era usar ou não usar a antiga Display Tag. Infelizmente, trabalhando com frameworks action-based e código view em JSP/Taglib, implementar paginação é uma das tarefas mais chatas para a interface Web, pois exige uma cacetada de configuração na página e principalmente: suja todo o HTML e pronto, lá se foi o protótio do cliente e o designer não pode mais editar com um preview em mãos.

Algumas pessoas comentaram no primeiro post sobre Wicket pedindo que eu desse maiores detalhes de como funciona ou como se utiliza. Pensei bastante e achei melhor primeiro apresentar como o desenvolvedor utiliza o framework, antes de se preocupar em como o mesmo funciona "por trás das cortinas".

Para começar a enteder a paginação, primeiramente é importante entendermos o funcionamento do componente básico de repetição: ListView. Vejam o exemplo a seguir:

Pessoas.html

<table>
  <tr>
    <td>nome</td>
    <td>idade</td>
  </tr>
  <tr wicket:id="lista">
    <td><span wicket:id="nome">foo</span></td>
    <td><span wicket:id="idade">12</span></td>
  </tr>
</table>

Pessoas.java

public class Pessoas extends WebPage {
  public Pessoas() {
    List listaPessoas; /* obtem de algum lugar (Spring talvez) */
    add(new ListView("lista", listaPessoas) {
      protected void populateItem(ListItem item) {
        Pessoa p = (Pessoa) item.getModelObject();
        item.add(new Label("nome", p.getNome());
        item.add(new Label("idade", p.getIdade());
    }
  });
}
}

Entendendo o funcionamento do ListView:

• O bind foi feito com a tag <tr>, então para cada iteração na List, o ListView vai processar um ListItem para aquela tag.
  
• O framework possui hierarquia de componentes, então vejam que o Label é adicionado no ListItem e não na ListView. Isto porque no HTML, temos e nome e idade dentro da lista.
• Para cada objeto na lista, o framework coloca ele como ModelObject do ListItem. (farei um post futuramente sobre Models, explicando seu funcionamento e os diversos tipos).

O interessante aqui é enteder o básico do funcionamento da ListView, que pode ser aplicado a praticamente qualquer tag html que se deseja iterar e repetir.

Agora, vamos adicionar paginação nesta ListView. Para isto, precisamos executar alguns passos:

1. Editar o HTML e acrescentar a barra de navegação.
   
2. Converter a ListView para uma PageableListView.
3. Adicionar em Java o componente PagingNavigator, realizando binding entre ele e a barra de navegação.

Passo 1
Utilizaremos aqui uma barra de navegação default do Wicket, sem customização. Deve-se adicionar na tabela a seguinte TR:

<tr>
  <td colspan="2">
    <span wicket:id="navegacao">aqui vai a barra de navegacao</span>
  </td>
</tr>

Passo 2
Alterar a instanciação de uma ListView para uma PageableListView. Feito isto, é preciso informar no construtor, quantos itens serão apresentados por página:

PageableListView listView = null;
add(listView = new PageableListView("lista", listaPessoas, 2) { ...

Passo 3
Agora, falta apenas colocar o componente de navegação na classe Java:

     add(new PagingNavigator("navegacao", listView));

Pronto! Só reparem que no construtor de PagingNavigator, é preciso passar a referência para o PageableListView que será paginado por ele.

O que aprendemos?
Que utilizando Wicket, não sujamos nosso código HTML, nem mesmo para fazer paginação! É possível manter o HTML limpo para que os designers possam trabalhar sem problemas, e também, que nós programadores tenhamos apenas um ponto para modificar, como neste exemplo onde alteramos de uma simples listagem para uma listagem paginada, o controle dinâmico das telas: a classe Java! Pois em Wicket não existe configuração em XML. Este é todo o código necessário para que esta paginação funcione.

Confiram mais exemplos aqui:
Wicket Repeater Views

Até a próxima!

[]'s!
miojo