Antes de darmos inicio a esse artigo, é importante saber o que é o Primefaces. Para quem veio do jQuery, fica fácil de entender, pois o Primefaces é nada mais do que um “container” para o jQuery, ou seja, ele encapsula todo o poder e recurso que o jQuery nos oferece, mas que antes tínhamos que por a mão na massa e programar o recurso desejado através de um javascript mais apresentável.
Com o primefaces tudo se resumo a tags inseridas na página xhtml, ou seja, o que você precisava antes para criar um dialog no jQuery através de código massante, você usa o fornecido pelo primefaces e tudo está resolvido.
Não queremos de forma alguma desmerecer o uso do jQuery, que por sinal é uma poderosa e indispensável ferramenta, e ainda se faz necessária quando não há recursos suficientes no Primefaces, queremos apenas mostrar o quão fácil tornou-se criar componentes com Primefaces, abstraindo totalmente os códigos massantes em javascript. E como nós sempre destacamos aqui, quanto mais ferramentas possíveis para ajudar o profissional a focar na criação das regras de negócio, melhor.
Configurando Primefaces
Neste artigo iremos utilizar o Maven para gerenciar nossas dependências, então iremos colocar o primefaces no arquivo pom.xml, assim como mostrado na listagem 1.
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
<http://maven.apache.org/maven-v4_0_0.xsd>">
<modelVersion>4.0.0</modelVersion>
<groupId>br.com.meuprojeto</groupId>
<artifactId>MeuProjeto</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>MeuProjeto App</name>
<url>http://maven.apache.org</url>
<properties>
<org.springframework.version>3.0.6.RELEASE
</org.springframework.version>
</properties>
<dependencies>
<dependency>
<groupId>org.primefaces.extensions</groupId>
<artifactId>primefaces-extensions</artifactId>
<version>0.7.1</version>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>3.5</version>
</dependency>
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>afterwork</artifactId>
<version>1.0.9</version>
</dependency>
</dependencies>
<repositories>
<repository>
<id>prime-repo</id>
<name>PrimeFaces Maven Repository</name>
<url>http://repository.primefaces.org</url>
<layout>default</layout>
</repository>
</repositories>
<build>
<finalName>MeuProjeto</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-pmd-plugin</artifactId>
<version>2.5</version>
<configuration>
<targetJdk>1.6</targetJdk>
</configuration>
</plugin>
</plugins>
</build>
</project>O que você pode perceber acima é que colocamos o repositório apontando para repository.primefaces.org e colocamos também as dependências necessárias, em nosso caso colocamos o primefaces padrão e o primefaces-extension (para nos dar alguns componentes extras), além disso ainda colocamos um tema padrão chamado de “afterwork”.
A configuração, como você pode ter notado, não tem nenhum mistério, o Maven já baixa automaticamente as dependências necessárias e coloca no seu projeto, agora iremos ver como utilizar o primefaces em nossa página xhtml.
Utilizando Primefaces e Primefaces-extension
Para utilizar o primefaces vamos exemplificar em uma página de listagem de funcionários de uma empresa. Essa página irá mostrar todos os funcionários através de um componente chamado presente no primefaces.
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe=”http://primefaces.org/ui/extensions”>
<h:head>
</h:head>
<h:body>
<ui:composition template="/templates/template.xhtml">
<ui:define name="content">
<h:form id="formFuncionarios">
<p:growl autoUpdate="true" id="messages" />
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton icon="ui-icon-plus" value="Novo"
id="commandButtonCadastrar"
oncomplete="varDialogManterFuncionario.show()"
actionListener="#{funcionarioMB.novo}"
update=":formManterFuncionario:dialogManterFuncionario" />
<p:commandButton disabled="#{funcionarioMB.funcionario == null}"
id="commandButtonAlterar" value="Alterar" icon="ui-icon-pencil"
oncomplete="varDialogManterFuncionario.show()"
update=":formManterFuncionario:dialogManterFuncionario" />
<p:commandButton disabled="#{funcionarioMB.funcionario == null}"
id="commandButtonRemover" value="Remover" icon="ui-icon-trash"
onclick="varConfirmRemover.show()" />
<p:confirmDialog id="confirmRemover" message="Deseja Remover ?"
showEffect="fade" hideEffect="fade" header="Remover"
severity="alert" widgetVar="varConfirmRemover">
<p:commandButton value="Sim"
oncomplete="varConfirmRemover.hide()"
actionListener="#{funcionarioMB.deletar}"
update=":formFuncionarios:dataTableFuncionarios" />
<p:commandButton value="Não" onclick="varConfirmRemover.hide()"
type="button" />
</p:confirmDialog>
</p:toolbarGroup>
</p:toolbar>
<p:dataTable rowKey="#{funcionario.id}" var="funcionario"
value="#{funcionarioMB.funcionarios}" paginator="true"
emptyMessage="Não foi encontrado nenhum registro" rows="10"
id="dataTableFuncionarios" selection="#{funcionarioMB.funcionario}"
selectionMode="single" rowIndexVar="rowIndex"
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'first-row' : 'second-row'}"
paginatorTemplate="Página {CurrentPageReport} {FirstPageLink}
{PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}
Registros por Página {RowsPerPageDropdown}"
rowsPerPageTemplate="10,15,30">
<p:ajax event="rowSelect"
update=":formFuncionarios:commandButtonAlterar,
:formFuncionarios:commandButtonRemover" />
<p:ajax event="rowUnselect"
update=":formFuncionarios:commandButtonAlterar,
:formFuncionarios:commandButtonRemover" />
<f:facet name="header">Lista de Funcionários</f:facet>
<p:column headerText="Nome"
sortBy="#{funcionario.pessoaFisica.nome}"
filterBy="#{funcionario.pessoaFisica.nome}" id="nome"
filterMatchMode="contains">
<h:outputText value="#{funcionario.pessoaFisica.nome}" />
</p:column>
<p:column headerText="Função" sortBy="#{funcionario.funcao}"
filterBy="#{funcionario.funcao}" id="funcao"
filterMatchMode="contains">
<h:outputText value="#{funcionario.funcao}" />
</p:column>
<p:column headerText="Salário" sortBy="#{funcionario.salario}"
filterBy="#{funcionario.salario}" id="salario"
filterMatchMode="contains">
<h:outputText value="R$ #{funcionario.salario}" />
</p:column>
<p:column headerText="Data Admissão"
sortBy="#{funcionario.dataAdmissao}"
filterBy="#{funcionario.dataAdmissao}" id="dataAdmissao"
filterMatchMode="contains">
<h:outputText value="#{funcionario.dataAdmissao}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</p:column>
<p:column headerText="Situação"
sortBy="#{funcionario.pessoaFisica.situacao.descricao}"
filterBy="#{funcionario.pessoaFisica.situacao.descricao}"
filterOptions="#{funcionarioMB.situacoesPessoaAsItem}"
filterMatchMode="exact" id="situacao">
<h:outputText
value="#{funcionario.pessoaFisica.situacao.descricao}" />
</p:column>
<p:column headerText="Estado Civil"
sortBy="#{funcionario.pessoaFisica.estadoCivil.descricao}"
filterBy="#{funcionario.pessoaFisica.estadoCivil.descricao}"
filterOptions="#{funcionarioMB.estadosCivisAsSelectItem}"
filterMatchMode="exact" id="estadoCivil">
<h:outputText
value="#{funcionario.pessoaFisica.estadoCivil.descricao}" />
</p:column>
</p:dataTable>
</h:form>
<ui:include
src="/tabelas/funcionario/dialog_manter_funcionario.xhtml" />
</ui:define>
</ui:composition>
</h:body>
</html>O nosso foco aqui não é mostrar a ligação do JSF com ManagedBean e dentre outros recursos, mas sim mostrar o uso do Primefaces. Logo nas primeiras linhas temos o trecho:
xmlns:p="http://primefaces.org/ui"
xmlns:pe=”http://primefaces.org/ui/extensions”Esse trecho de código é o que faz funcionar o primefaces e o primefaces-extension em sua essência. Em todas as áreas na páginas utilizamos sempre a tag “<p:...” seguido do nome componente, ou seja, <p:datatable="">, <p:column>, <p:confirmdialog> e assim por diante. Essa letra “p” foi uma opção nossa, mas você poderia mudar para qualquer outra letra que desejasse, mas essa é a mais utilizada normalmente. Por outro lado, temos também a letra “pe” que faz referência ao <em>primefaces.org/ui/extensions, que é o local onde encontraremos as extensões do primefaces.
Extensões essas tais como: que é um componente próprio para inserção de valores numéricos, tal componente você não encontra de forma nativa no primefaces padrão (referenciado pela letra 'p') em nosso exemplo.
Conclusão
O primefaces é uma poderoso recurso, que é indispensável no desenvolvimento de aplicações que utilizam JSF, isso porque ele torna toda complexidade no desenvolvimento de componente e botões transparente ao desenvolvedor.
