Todo programador sempre passa perrengue para fazer listas de dados e mexer com paginação, e sempre procuramos alguns componentes prontos para facilitar a nossa vida, “mas quem disse que a vida é fácil” hehe. Sempre é difícil achar alguma coisa boa ou pelo menos que tenha documentação decente. No caso da flexigrid não foi muito diferente. Ela é boa porem não tem quase nada de documentação.
Portanto hoje iremos desenvolver uma listagem de dados utilizando um componente JavaScript chamado Flexigrid.
Vamos utilizar o VRaptor.
Se você não conhece o VRaptor de uma olhada nesse post do Washington Botelho.
Antes de iniciar a bagaça vamos saber quais as vantagens de se utilizar o Flexigrid.
- Funciona com JQuery;
- Paginação de dados sob demanda;
- Campo de pesquisa para filtrar os registros da grid;
- Ordenação dos dados;
- Aceita dados via JSON ou XML;
- E tudo isso via Ajax.
Vale alertar que este artigo é voltado para uma aplicação real. Poderemos portanto utilizar alguns conceitos mais avançados. Em outras palavras, assumimos que você já possui conhecimento básico em VRaptor, assim como JPA e Json.
Bom, então vamos por a mão na massa!
Este exemplo será construído a partir do blank project do VRaptor 3.
Primeiro devemos colocar os arquivos do Flexigrid no nosso projeto. Eu particularmente gosto de separar os códigos JS das classes CSS e das imagens. Portanto coloquei os arquivos do flexigrid em pastas diferentes.
- WebContent
- css
- js
- img
A biblioteca Flexigrid requer a inclusão dos seguintes arquivos (1) js do JQuery; (2) js do flexigrid; e (3) CSS do Flexigrid.
<script type="text/javascript" src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script> <link type="text/css" rel="stylesheet" href="<c:url value='/css/flexigrid.css'/>" /> <script type="text/javascript" src="<c:url value='/js/flexigrid.js'/>"></script>
Para fazer a Flexigrid funcionar é bem simples. Vamos criar uma table com o id “list” e usar o seletor do JQuery com o método da Flexigrid.
<script type="text/javascript"> $(document).ready(function() { $("#list").flexigrid ({ url: '<c:url value="/listar" />', dataType: 'json', method: 'GET', colModel: [ {display: 'Nome', name: 'nome', width: 400, sortable: true}, {display: 'E-mail', name: 'email', width: 230}, {display: 'Empresa', name: 'empresa', width: 80, sortable: true} ], searchitems: [ {display: 'Nome', name: 'nome', isdefault: true} ], usepager: true }); }); </script>
Agora vamos modificar o IndexController que vem no blank project do VRaptor, adicionando o método que vai suprir a Flexigrid com os dados a serem listados e serializados em JSON.
@Resource public class IndexController { private final Result result; public IndexController(Result result) { this.result = result; } @Path("/") public void index() { result.include("variable", "VRaptor!"); } @Path("/listar") public void listar() { FlexiGrid flex = new FlexiGrid(); flex.setPage(1); flex.setTotal(2); Row rows[] = new Row[2]; rows[0] = new Row(1, new String[] {"Makoto", "makoto@makoto.blog.br", "Giran"}); rows[1] = new Row(1, new String[] {"João", "joao@qualquercoisa.com", "Teste"}); flex.setRows(rows); result.use(Results.json()).withoutRoot().from(flex).include("rows").serialize(); } }
Reparem que eu utilizei uma classe chamada “FlexiGrid” e uma chamada “Row”, essas classes eu criei para facilitar o trabalho, pois seria muito trampo criar uma String no formato JSON toda hora; sendo que o VRaptor já incorpora nele a biblioteca XStream dentro dele para serializar classes java em XML ou JSON.
Dai eu crie as classes FlexiGrid e Row que são exatamente iguais a estrutura que o Flexigrid esta esperando.
public class FlexiGrid { private int total; private int page; private Row[] rows; public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } public int getPage() { return page; } public void setPage(int page) { this.page = page; } public Row[] getRows() { return rows; } public void setRows(Row[] rows) { this.rows = rows; } }
public class Row { private long id; private String[] cell; public Row(long id, String[] cell) { this.cell = cell; this.id = id; } public String[] getCell() { return cell; } public void setCell(String[] cell) { this.cell = cell; } public long getId() { return id; } public void setId(long id) { this.id = id; } }
Sendo assim o VRaptor vai me retornar o JSON
abaixo:
{ "total": 2, "page": 1, "rows": [ { "id": 1, "cell": [ "Makoto", "makoto.vix@gmail.com", "Giran" ] }, { "id": 1, "cell": [ "João", "joao@qualquercoisa.com", "Teste" ] } ] }
Bom, é isso aí pessoal! Assim chega ao fim este post; segue abaixo o link com o projeto
funcionando no github.