Este post faz parte de uma série que demonstra o uso de Primefaces, Spring, JPA, JSF para criar uma aplicação que atualiza as DataTables dos clientes automaticamente. Confira os outros posts da série aqui: Primefaces
A configuração do Primefaces em um projeto é bem simples, são apenas três etapas:
Pronto. Um exemplo de uma página que usa Primefaces é a página de login que já foi mostrada aqui: Configurando o Spring (II).
Em seguida, vamos demonstrar o uso de p:dataTable em uma página, lembrando que é preciso:
Depois de inserir alguns dados na tabela pessoa, podemos criar uma nova página chamada de autores.xhtml, conforme o código abaixo:
Bem, esta página já produz resultados, como mostra a figura acima. Para acessá-la enquanto não temos um menu, execute a aplicação e mude o endereço no navegador de index.xhtml para autores.xhtml. No próximo post, vamos mostrar como implementar o CRUD, antes de mostrar a atualização automática nos clientes.
- Bibliotecas: basta acrescentar o arquivo .jar no projeto (no momento, estou usando esse: primefaces-3.6-20130315.085445-6.jar) e baixar um arquivo .jar de tema de sua escolha, deste site: http://repository.primefaces.org/org/primefaces/themes/ (no momento, estou usando o redmond 1.0.10), acrescentando esse arquivo no projeto, também.
- Configuração do arquivo web.xml:
<!-- Primefaces --> <context-param> <param-name>com.sun.faces.writeStateAtFormEnd</param-name> <param-value>false</param-value> </context-param> <context-param> <param-name>com.sun.faces.allowTextChildren</param-name> <param-value>true</param-value> </context-param> <context-param> <param-name>primefaces.THEME</param-name> <param-value>redmond</param-value> </context-param> <context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value> </context-param> <context-param> <description>The default for this parameter is false. Fixes IE xhtml content-type restriction.</description> <param-name>com.sun.faces.preferXHTML</param-name> <param-value>false</param-value> </context-param> <!-- Fim Primefaces -->
Uma atenção para a linha 12, que indica qual o nome do tema que será usado.
- Configuração nas páginas xhtml: todas as páginas que vão usar componentes do Primefaces deverão ter uma declaração de namespace como destacado abaixo:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
Pronto. Um exemplo de uma página que usa Primefaces é a página de login que já foi mostrada aqui: Configurando o Spring (II).
Em seguida, vamos demonstrar o uso de p:dataTable em uma página, lembrando que é preciso:
- Criar as entidades Pessoa e Autor, como foi mostrado aqui: Criando entidades de bancos de dados.
- Criar um managed bean chamado controlador, como foi mostrado aqui: A camada de visão - o managed bean do JSF. No controlador, vamos criar um atributo autores dessa maneira:
private List<Autor> autores = new ArrayList<Autor>();
public List<Autor> getAutores() { if (autores.isEmpty()) { autores = facadeBD.listar(Autor.class); } return autores; } public void setAutores(List<Autor> autores) { this.autores = autores; }
Depois de inserir alguns dados na tabela pessoa, podemos criar uma nova página chamada de autores.xhtml, conforme o código abaixo:
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Livraria</title> </h:head> <h:body> <h:form prependId="false" id="frmPrincipal"> <p:outputPanel id="pnlTabela"> <p:dataTable id="Tabela" widgetVar="wTabela" rowIndexVar="rowNumber" rows="10" paginator="true" value="#{controlador.autores}" var="registro"> <f:facet name="header"> <h:outputText value="Autores"/> </f:facet> <p:column headerText="Nome"> #{registro.nome} </p:column> <p:column headerText="Sobrenome"> #{registro.sobrenome} </p:column> </p:dataTable> </p:outputPanel> </h:form> </h:body> </html>Apesar de ser um código bem pequeno, há muitas coisas importantes acontecendo aqui:
- Primeiro, é bom observar que a lista de autores é carregada do banco de dados apenas uma vez pelo controlador, somente na primeira vez que o getAutores() é executado.
- O formulário tem o atributo prependId="false". Isto evita que os ids dos componentes carreguem o sufixo dos componentes-pais, o que em alguns casos vai facilitar para escrever o código.
- Dentro do formulário há um outputPanel que envolve a tabela (linha 12). Ele vai ser utilizado para a atualização automática da página.
- Os dados da tabela vêm do controlador, pelo atributo autores (linha 18). Cada elemento da lista autores é referenciado na tabela pelo identificador registro (linha 19).
- A tabela possui um id e um widgetVar (linhas 13 e 14). Ambos são usados quando vamos executar métodos javaScript relativos ao componente dataTable do Primefaces (widgetVar) ou quando vamos atualizar (Tabela). O importante é que o nome usado não pode ser igual para os dois atributos - eu costumo colocar um "w" como prefixo no widgetVar.
- Os atributos rowIndexVar e rows (linhas 14 e 15) sempre devem ser definidos. Há situações em que eles são exigidos (apesar de serem opcionais...).
- Há muitas outras propriedades que podem ser (e mais adiante serão) configuradas, mas não vamos discutir isso aqui - a documentação do Primefaces e o showcase deles já demonstra todas elas - vamos citar conforme forem aparecendo.
Bem, esta página já produz resultados, como mostra a figura acima. Para acessá-la enquanto não temos um menu, execute a aplicação e mude o endereço no navegador de index.xhtml para autores.xhtml. No próximo post, vamos mostrar como implementar o CRUD, antes de mostrar a atualização automática nos clientes.
Nenhum comentário:
Postar um comentário