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.