Makoto Hashimoto

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.

Projeto vraptor-flexigrid