Artigos Java Java Primefaces: configurando Extensões

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>
Listagem 1. Configurando primefaces no pom.xml

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>
Listagem 2. Listando funcionários de uma empresa com o Primefaces

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.