Java Primefaces: configurando Extensões

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Neste artigo iremos aprender as configurações padrões do primefaces e suas 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 <p:dialog /> 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.

Listagem 1: Configurando primefaces no pom.xml

<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 <p:dataTable /> presente no primefaces.

Listagem 2: Listando funcionários de uma empresa com o 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 do 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 primefaces.org/ui/extensions, que é o local onde encontraremos as extensões do primefaces.

Extensões essas tais como: <pe:inputNumber > 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.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?