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.
