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