Desenvolvendo aplicações RIA com PrimeFaces - Revista easy Java Magazine 24 - Parte 2

No artigo anterior, “Desenvolvendo aplicações RIA com PrimeFaces – Parte 1”, foram apresentadas as principais vantagens da utilização de bibliotecas de componentes de interface com recursos visuais ricos. Tais recursos permitem maior facilidade e produtividade na interação dos usuários com as aplicações web baseadas em JSF (JavaServer Faces). Dentro do conceito de Aplicações de Internet Rica (RIA, de Rich Internet Application), existem diversas bibliotecas de componentes para utilização com JSF, e dentre elas, a PrimeFaces é a que possui maior destaque.

O PrimeFaces, além de possuir uma gama de componentes maior que outras bibliotecas semelhantes, como RichFaces e ICEfaces, também incorpora recursos importantes do novo padrão HTML 5. Desta maneira, além de utilizar componentes com visual mais rico, também consegue ter melhor desempenho, principalmente devido ao uso de componentes leves baseados jQuery, que utiliza puramente o HTML5.

Também aprendemos no artigo anterior como configurar um ambiente de desenvolvimento integrado, que possibilita a programação de aplicações web de forma mais produtiva. Para isso, foi explicado detalhadamente como instalar um ambiente de programação e configurá-lo para utilizar o framework JSF 2.1 em conjunto com a biblioteca PrimeFaces.

Neste artigo, iremos focar no desenvolvimento de aplicações web utilizando a biblioteca PrimeFaces. Deste modo, será explicado como desenvolver uma aplicação para manipulação de registros em memória com a implementação de um CRUD (Create/Criar, Read/Ler, Update/Atualizar e Delete/Apagar). O intuito deste exemplo é explorar as funcionalidades e comportamentos dos principais componentes da biblioteca PrimeFaces.

CRUD com JSF e PrimeFaces

Depois do detalhado processo de configuração do ambiente de desenvolvimento apresentado no artigo anterior, podemos nos concentrar nas particularidades da utilização da biblioteca PrimeFaces.

A documentação e os exemplos fornecidos no site do framework são excelentes fontes de pesquisa. Todos os componentes são explicados com aplicações exemplo explorando todas as suas funcionalidades, que vão desde abrir uma janela pop-up até um sistema simples de proteção captcha para conter o acesso de robôs coletores de dados (bots). Para ter acesso a todos os componentes, deve-se acessar o mostruário na seção Links.

No mostruário de componentes há duas bibliotecas. A biblioteca padrão (compreendendo os estilos PrimeUI e Mock OS X) e a otimizada para os dispositivos móveis (PrimeMobile). A biblioteca para dispositivos móveis é baseada nos componentes do jQuery Mobile, que tem a vantagem do suporte para uma série de dispositivos móveis, como iPhone, iPad, Android, BlackBerry, Windows Phone, Palm, entre outros. Cada uma das bibliotecas possui seus próprios componentes com diferentes comportamentos, sendo uma focada em dispositivos móveis e outra voltada para desktops.

Para exemplificar o uso dos componentes do PrimeFaces, vamos criar uma pequena aplicação CRUD de registros em memória (array). Nesta aplicação deve haver uma tela para inclusão de novos registros, uma tela para leitura, edição ou remoção dos registros existentes e, por fim, uma lista de dados com os registros inseridos.

Com o objetivo de explorar características interessantes dos componentes da biblioteca e também a maneira como o usuário interage com eles, foi definido um cadastro para o registro de pessoas possuindo os seguintes atributos:

• Nome completo, tipo texto;

• Data de nascimento, tipo data;

• Gênero, tipo texto;

• Endereço, tipo texto;

• Bairro, tipo texto;

• Cidade, tipo texto;

• Estado, tipo texto;

• Grau de disponibilidade de viagem, tipo numérico;

• ID Pessoa, tipo numérico. Este campo será a chave única de cada pessoa para auxiliar nos processos de atualização e remoção.

A aplicação será dividida em duas camadas. A primeira é a camada de backend, responsável pelo acesso aos dados e pelo processamento das informações, e a segunda é a camada de frontend, que tem o objetivo de apresentar e coletar informações junto ao usuário, por meio de componentes específicos. Desta maneira, a camada de backend utilizará as classes que serão apresentadas a seguir, e a camada de frontend utilizará JSF e PrimeFaces, essencialmente.

Desenvolvimento da camada de backend

De acordo com o modelo de informações definido anteriormente a respeito dos atributos de dados do registro de pessoas e também das operações envolvidas (novos registros, leitura, edição e remoção), iremos modelar tais características em três classes que serão utilizadas para manipular os dados da aplicação: 1) a classe Pessoa, que contém os campos supracitados; 2) a classe Operacoes, que é responsável por todas as operações com os dados, como inclusão, leitura, edição e remoção; e 3) a ListaPessoas, que armazena a coleção dos dados em memória. O código destas classes é apresentado nas Listagens 1, 2 e 3.

Listagem 1. Código da classe Pessoa.

  import java.util.Date;
  import javax.faces.bean.ManagedBean;
   
  @ManagedBean
  public class Pessoa {
   
        private String nome;
        private Date dataNascimento;
        private String genero;
        private String endereco;
        private String bairro;
        private String cidade;
        private String estado;
        private String dispViagem;
        private int idPessoa=0;
        
        public Pessoa(){
              idPessoa++;
        }
        
        public int getIdPessoa() {
              return idPessoa;
        }
   
        public void setIdPessoa(int idPessoa) {
               this.idPessoa = idPessoa;
        }
   
        public String getBairro() {
              return bairro;
        }
   
        public void setBairro(String bairro) {
              this.bairro = bairro;
        }
   
        public String getNome() {
              return nome;
        }
   
        public void setNome(String nome) {
              this.nome = nome;
        }
   
        public Date getDataNascimento() {
              return dataNascimento;
        }
   
        public void setDataNascimento(Date dataNascimento) {
              this.dataNascimento = dataNascimento;
        }
   
        public String getGenero() {
              return genero;
        }
   
        public void setGenero(String genero) {
              this.genero = genero;
        }
   
        public String getEndereco() {
              return endereco;
        }
   
        public void setEndereco(String endereco) {
              this.endereco = endereco;
        }
   
        public String getCidade() {
              return cidade;
        }
   
        public void setCidade(String cidade) {
              this.cidade = cidade;
        }
   
        public String getEstado() {
              return estado;
        }
   
        public void setEstado(String estado) {
              this.estado = estado;
        }
   
        public String getDispViagem() {
              return dispViagem;
        }
   
        public void setDispViagem(String dispViagem) {
              this.dispViagem = dispViagem;
        }
   
  } ...