Wicket: AJAXiando a Paginação

No penúltimo post, mostrei como implementar paginação de listas com o framework Wicket. Agora, visando maior produtividade e usabilidade na interface, apresento-lhes o que é preciso para implementar a mesma paginação ajaxiada.

O processo é o mesmo, já que o framework é component-based. As alterações no HTML são mínimas e mesmo em Java, o que será preciso modificar é qual componente instanciar para tratar a ListView. Mas por se tratar de uma implementação Ajax, algumas considerações e explicações devem ser feitas antes.

• Ao implementar algo em Ajax, as vezes é preciso de uma área (div) para ser atualizada pelas requisições assíncronas com novo código HTML produzido dinâmicamente no servidor.
  
• No caso da ListView, é importante que a tabela fique dentro de uma área como esta.
• Em Wicket, é possível referenciar uma área qualquer div através do componente WebMarkupContainer.

Uma das enormes vantagens de utilizar o framework Wicket, é poder desenvolver diversas funcionalidades sem escrever uma linha de Javascript qualquer. Seu suporte a Ajax está muito estável para funcionalidades básicas, e ainda existe o projeto Wicket Extensions que provê muitos outros componentes 100% plugáveis a qualquer aplicação Wicket. Cada componente expõe no HTML de alguma forma, o Javascript necessário para que o mesmo funcione, como os de Ajax por exemplo. Em outro post, mostrarei como implementar componentes reutilizáveis (e aí sim, teremos que escrever Javascript se for o caso).

Seguindo o assunto do post, vamos ao que interessa: ajaxiar uma paginação. Abaixo, está o código da tela utilizada na explicação anterior:

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>
<tr>
 <td colspan="2">
  <span wicket:id="navegacao">Aqui vai a barra de navegacao</span>
 </td>
</tr>
</table>

A única alteração que devemos fazer, é colocar esta tabela dentro de uma área atualizável por requisição Ajax: um div. Ou seja, ficará assim:

<div wicket:id="ajaxTable">
<table>
 <tr>
  ...
 </tr>
</table>
</div>

Feito isto, é preciso que o componente ajaxTable seja reconhecido pelo Wicket na classe Pessoas. E é agora que utilizaremos a classe WebMarkupContainer:

Pessoas.java

public class Pessoas extends WebPage {
public Pessoas() {
  List listaPessoas; /* obtem de algum lugar (Spring talvez) */
  PageableListView view = new PageableListView("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());
    }
  };
 
  WebMarkupContainer ajaxTable = new WebMarkupContainer("ajaxTable");
  ajaxTable.setOutputMarkupId(true); // obrigatorio pq nao tem o
                                     // atributo id com mesmo
                                     // nome no html
  add(ajaxTable);

  // O componente PageableListView está dentro do 

  // entao deve ser adicionado ao WebMarkupContainer, não à página.
  ajaxTable.add(view);

  // O componente-chave para paginação-ajax, está aqui:
  ajaxTable.add(new AjaxPagingNavigator("navegacao", view));
}
}

Pronto! Paginação ajax habilitada com sucesso! :)
Desta forma, ao navegar na lista somente a tabela com os dados será atualizada, através de requisições Ajax. Esta funcionalidade é muito útil quando se tem telas pesadas com diversos componentes, e não queremos atualizar a página inteira, ou quando simplesmente queremos dizer que a aplicação é Web 2.0 compliant.

Explicando um pouco o que foi feito:

• Não foi preciso alterar qualquer trecho de código na table html, mas é necessário que a mesma esteja numa área atualizável div.
• Não existe um AjaxPageableListView. O mesmo que utilizamos no primeiro exemplo foi utilizado aqui.
• Como existe um div para ser atualizado assíncronamente, este precisa ser referenciado por um WebMarkupContainer, que conterá o novo código HTML após a requisição Ajax e substituirá o código anterior.
  
• Qualquer componente que esteja dentro do div, deve ser adicionado no MarkupContainer, respeitando a árvore de componentes.
• Configurei a propriedade
  

  outputMarkupId

  porque no HTML, nao coloquei o atributo id manualmente. Este método faz apenas isto. Utiliza o nome do componente para o atributo id.
• Tanto a ListView como o Navigator, são adicionados no MarkupContainer.
• Para a paginação efetivamente funcionar, deve-se utilizar o componente
  

  AjaxPagingNavigator

• Pronto!
  

Até a próxima!