DataTables com VRaptor

*******
Atualização: Nova postagem com suporte a versão 1.10.x do DataTables e uso do VRaptor 4 já disponível!
*******

Partindo do princípio que tenhamos o conhecimento prévio do comportamento do VRaptor 3 (maiores detalhes aqui), vou demonstrar como podemos usar o DataTables de maneira simples. Ele é um fantástico plug-in que permite a visualização de dados (server-side e/ou client-side) e a sua manipulação com algumas linhas de código, e o melhor, tudo sem muito esforço e com um enorme suporte pela comunidade e no fórum do plug-in. Sugiro, a princípio, para quem não conhece muito ainda, a leitura desses dois artigos:
Vou resumir bem a ideia, o ideal é que seja executado o laboratório e que esse artigo sirva para tirar dúvidas gerais do processo. Bom, para facilitar a vida no VRaptor, eu criei duas classes abstratas, uma para as entidades que desejamos que seus dados sejam usados pelo plug-in e outra para os Controllers que herdarão os serviços prontos, eles permitirão que os dados sejam entregues a View. Caso uma classe herde a primeira cujo nome é DataTables, ela terá que sobre escrever dois métodos (o toListString não é necessário, já é tratado de maneira genérica):
  • toListString(): Seu propósito é retornar um lista que contenha uma lista de Strings de um determinado objeto. Pensando nessa estrutura de dados, é como se existisse um nó com diversos troncos, e cada tronco tem um nó no final com seus galhos (atributos). Vejam a figura abaixo, ela retrata o exemplo do laboratório para a classe User. Com essa estrutura poderemos manter no padrão esperado pelo DataTables para o campo aaData (detalhes e exemplos aqui) quando o método Results.json() do VRaptor serializá-lo.
  • getAttributes(): O nó que tem no final de cada tronco precisa ser preenchido com atributos e, como cada classe pode ter mais ou menos atributos, esse método deve ser sobre escrito para tratar cada propriedade de uma determinada classe. É por meio dela também que determinamos a sequência dos dados que serão mostrados na tabela, veremos posteriormente no laboratório.
  • getColumnNameById(): Ao se criar uma tabela no banco de dados, ela pode ter, por exemplo, 2 colunas, a primeira Id e a outra Name. Portanto, nesse sentido, o ID seria o 0 e o Name o 1. O DataTable permite que seja feita a ordenação das colunas e ele nomeia a primeira coluna da esquerda com o índice 0, a segunda como 1 e a última como N. Então, quando clicarmos em uma coluna, um evento chamará o método responsável por ordenar por aquela determinada coluna, se clicarmos na segunda, o índice 1 será enviado e, para pesquisar no banco de dados, é necessário saber o nome do atributo que está nessa coluna, é aí que esse método entra em ação.
Estrutura de dados List<List<String>> para o campo aaData
Agora caso um Controller herde a segunda classe abstrata cujo nome é CommonController, ele terá que sobre escrever o seguinte método:
  • paginate(): Teremos um script em jQuery que terá um gatilho que será ativado toda vez que uma página for aberta e tiver um componente HTML com um determinado Id (#meuForm, por exemplo), ao ser ativado, ele chamará uma URL pelo método HTTP POST solicitando os dados para serem mostrados nesse componente. O método paginate() retornará uma estrutura de dados no formato JSON suportado pelo DataTables com seus campos obrigatórios (sEcho, iTotalRecords, iTotalDisplayRecords, aaData, etc.). Dentro desse método usaremos um outro do CommonController chamado getParametersDataTable() cuja necessidade é traduzir o que o plug-in DataTables enviou da View em objetos manipuláveis pelo Java. O debug para entender é essencial.
Classe DataTables:


Classe CommonController:


Supondo que na página tenhamos um formulário com o id "usersDataTable", o nosso arquivo javascript deverá ter, por exemplo, a seguinte configuração:

Execução:


JSON retornado:


Pesquisa pelo nome "Malc":


O laboratório pode ser obtido no github aqui. Coloquei internacionalização básica e manipulei a última coluna para duas ações (alterar e excluir) como itens extras para exemplificar como é fácil trabalhar com o DataTables. Informações adicionais:
  • apache-maven-3.1.1
  • apache-tomcat-7.0.53
  • jdk1.7.0_45
  • MySQL do XAMPP 1.8.1
Referências:
*******
Atualização: Nova postagem com suporte a versão 1.10.x do DataTables e uso do VRaptor 4 já disponível!
*******

Aqlbras! Ao som de Come Together, Beatles.

Comentários

Postar um comentário