JSF Composite: Criando componentes para Primefaces

Atualmente produtividade � algo que se fala muito e estar� sempre em alta. Cada vez mais as ferramentas tendem a facilitar a vida do desenvolvedor, deixando que o mesmo preocupe-se com que � realmente importante: as regras de neg�cio.

H� tempos atr�s para fazer uma tabula��o de dados com pagina��o e pesquisa era praticamente um �sub-projeto� devido ao n�vel de complexidade e trabalho exigido para tal tarefa. Foram bons tempos e aprendemos muito, mas hoje, felizmente, temos diversos frameworks que nos auxiliam na constru��o de requisitos n�o funcionais como, por exemplo, o Bootstrap, Primefaces, JSF, IceFaces, RichFaces, Zend Framework e etc.

Neste artigo vamos demonstrar fun��es muito interessantes do JSF em conjunto com o Primefaces: a cria��o de componentes customizados atrav�s do Composite.

Composite com Primefaces

O Primefaces � um framework que possui um aglomerado de componentes que adicionam maior funcionalidade aos componentes padr�es do JSF. Por exemplo, no JSF temos o DataTable e no Primefaces tamb�m, por�m o dataTable possui um maior n�mero de funcionalidades que proporcionam facilidade e agilidade na constru��o de uma tabula��o completa com pesquisa, pagina��o, ordena��o, sele��o e etc.

Este foi desenvolvido pela empresa PrimeTek e teve seu in�cio na vers�o 0.8.1 em 23/02/2009, e hoje j� est� na vers�o 5.1 e possui muitos componentes que, com certeza, trazem uma grande produtividade para quem os usa.

Para adicionar o Primefaces com o tema do Bootstrap ao seu projeto, caso esteja usando Maven, basta colocar as seguintes linhas da Listagem 1 no seu pom.xml.


<dependency>
   <groupId>org.primefaces.extensions</groupId>
   <artifactId>primefaces-extensions</artifactId>
   <version>3.0.0</version>
</dependency>

<dependency>
   <groupId>org.primefaces</groupId>
   <artifactId>primefaces</artifactId>
   <version>5.1</version>
</dependency>

<dependency>
   <groupId>org.primefaces.themes</groupId>
   <artifactId>bootstrap</artifactId>
   <version>1.0.9</version>
</dependency>

<!-- dentro de <repositories> -->
<repository>
   <id>prime-repo</id>
   <name>PrimeFaces Maven Repository</name>
   <url>http://repository.primefaces.org</url>
   <layout>default</layout>
</repository>

Listagem 1. pom.xml para Primefaces

� necess�rio adicionar o reposit�rio do Primefaces ao pom.xml para que seja poss�vel o Maven fazer o download dos jars necess�rios.

O Primefaces-extensions � uma biblioteca com mais componentes que o Primefaces padr�o n�o possui, dando um maior n�vel de complexidade (funcionalmente falando) ao Primefaces. Estamos usando a �ltima vers�o do Primefaces e optamos por colocar o tema 'bootstrap', mas voc� pode alter�-lo ou at� desabilit�-lo usando a palavra-chave 'none', que esta far� com que o Primefaces renderize seus componentes sem nenhum estilo.

Vejamos agora o objetivo principal do nosso artigo, mas para isso vamos entender um pouco sobre o dataTable do Primefaces.

Muita das vezes voc� se deparar� com o preenchimento de atributos em componentes de forma padr�o, como mostra a Listagem 2.


<!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">
 
<h:head>
 
</h:head>
<h:body>
       <p:dataTable rowKey="#{cliente.id}" var="cliente"
         value="#{clienteMB.beans}" paginator="true"
         emptyMessage="N�o foi encontrado nenhum registro" rows="10"
         id="dataTableClientes" selection="#{clienteMB.bean}"
         selectionMode="single" sortBy="#{cliente.pessoa.nome}">
 
       <p:ajax event="rowSelect"
         update="@form" />
       <p:ajax event="rowUnselect"
         update="@form" />
       <p:column headerText="COD" sortBy="#{cliente.id}" width="10">
             <h:outputText
                    value="#{cliente.id}" />
       </p:column>
                                        
       <p:column headerText="Nome" sortBy="#{cliente.pessoa.nome}">
             <h:outputText
             value="#{cliente.nome}" />
       </p:column>
 
       <p:column headerText="CPF/CNPJ" width="50"
              sortBy="#{cliente.pessoaFisica != null ? cliente.pessoaFisica.cpf : 
              cliente.pessoaJuridica.cnpj}">
              <h:outputText
              value="#{cliente.pessoaFisica != null ? cliente.pessoaFisica.cpf : 
              cliente.pessoaJuridica.cnpj}" />
       </p:column>
 
       <p:column headerText="Situa��o" width="100"
              sortBy="#{cliente.pessoa.situacao.descricao}">
              <h:outputText value="#{cliente.pessoa.situacao.descricao}" />
       </p:column>
</p:dataTable>
</h:body>
</html>

Listagem 2. DataTable no Primefaces

O DataTable possui alguns atributos que voc� perceber� que s�o preenchidos quase sempre da mesma forma, vejamos:

Em um projeto onde ser� padronizada a pagina��o da tabela: quase sempre o atributo 'paginator' ser� true;
No mesmo projeto a mensagem padr�o que ser� mostrada quando n�o houver registro ser� �N�o foi encontrado nenhum registro".

Perceba que no nosso exemplo estes dois atributos ter�o sempre o mesmo valor para todas as tabelas do nosso projeto. Pode parecer simples para apenas esses dois atributos, mas se forem quatro ou sete? Como podemos evitar o risco de preencher um dataTable fora do padr�o? Como garantir a reusabilidade de componentes? Surge ent�o o componente composite do JSF.

O composite nos d� o �poder� de criar um componente com base em outros componentes e isso � muito �til em diversos casos e n�o apenas quando desejamos parar de repetir atributos. Criando o componente AB com o composite, esse pode conter diversos outros dentro. Imagine a seguinte situa��o: podemos criar um componente chamado crudComponent que cont�m em seu contexto um dataTable, um bot�o de cadastro, um bot�o de altera��o e um bot�o de remo��o. Ao usar nosso crudComponent na p�gina XHTML ele j� saber� criar tudo isso sem precisar fazer mais nada, e caso desej�ssemos mudar o nome do bot�o de cadastro de �Novo� para �Cadastrar�, todas as p�ginas que usem o crudComponent tamb�m ser�o atualizadas.

O primeiro passo para criar um composite � saber que o mesmo � definido em uma p�gina XHTML, com a seguinte estrutura presente na Listagem 3.


<!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:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui"
       xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface></composite:interface>
<composite:implementation></composite:implementation>
</html>

Listagem 3. Estrutura composite

A �nica diferen�a que podemos destacar de uma p�gina XHTML comum com JSF e Primefaces � a adi��o da linha �xmlns:composite�. Assim, podemos chamar a tag �� dentro do nosso XHTML, igualmente fazemos com a tag �p� do Primefaces e todas as outras tags definidas no header do nosso HTML.

Assim como um m�todo que possui uma assinatura, argumentos e corpo, o composite tamb�m possui a mesma estrutura:

composite:interface: Usado para definir os atributos/argumentos que poder�o ser utilizados na sua implementa��o. Por exemplo, digamos que queremos usar um atributo chamado 'idade' com valor igual a 10, e este atributo idade poder� ser usado na implementa��o do composite, assim como usamos um argumento no corpo de um m�todo.
composite:implementation: Se o interface serve para definir os atributos, o implementation serve para criar a l�gica necess�ria para trabalhar estes atributos.


<!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:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui"
       xmlns:composite="http://java.sun.com/jsf/composite">
 
<composite:interface>
       <composite:attribute name="idDataTable" default="dataTableListagem"
             shortDescription="ID do DataTable. Usado para 
             referencia em outras partes do c�digo" />
       <composite:attribute name="managedBeanName" 
       type="br.com.meuprojeto.mb.BasicCrudMBImpl" required="true"
             shortDescription="Nome do managedBean do componente" />
</composite:interface>
 
<composite:implementation>
       <p:dataTable rowKey="#{bean.id}" var="bean"
             value="#{cc.attrs.managedBeanName.beans}" paginator="true"
             emptyMessage="N�o foi encontrado nenhum registro" rows="10"
             id="#{cc.attrs.idDataTable}"
             selection="#{cc.attrs.managedBeanName.bean}" selectionMode="single">
 
             <p:ajax event="rowSelect" update="@form" />
             <p:ajax event="rowUnselect" update="@form" />
 
             <composite:insertChildren />
 
       </p:dataTable>
</composite:implementation>
 
</html>

Listagem 4. O primeiro composite com datatable

O objetivo do nosso composite da Listagem 4 � criar uma dataTable customizado, com tudo que precisamos, sem precisar ficar reescrevendo c�digo toda vez. Vamos por partes:

O composite:attribute serve para passar o atributo com seus devidos valores ao composite desejado. Em nosso caso temos dois atributos: idDataTable e managedBeanName. O primeiro atributo servir� para colocar o id no nosso datatable, assim o identificamos como �nico na p�gina. Al�m disso, este atributo possui o 'default', que representa qual ser� o valor padr�o caso este n�o seja definido e o shortDescription ajudar� a identificar qual o objetivo deste atributo, funcionando como um javadoc.No segundo atributo j� temos o required='true' e isto significa que ele � obrigat�rio, por isso n�o precisamos do 'default', pois o 'type' identifica qual ser� o tipo do atributo, ou seja, neste caso obrigatoriamente ele deve ser do tipo 'br.com.meuprojeto.mb.BasicCrudMBImpl'.J� d� para ter uma ideia da quantidade de informa��es que podemos passar para o composite, das mais variadas formas para serem utilizadas na implementa��o.
No composite:implementation fazemos uso dos atributos definidos no composite:interface. O que temos aqui � o uso do componente dataTable do Primefaces na sua forma normal, por�m com alguns valores definidos atrav�s dos atributos. Por exemplo: no campo 'id' devemos definir qual ser� o identificador do nosso componente na p�gina. Para isso fazemos uso do atributo 'idDataTable' da seguinte forma:
```
jcc.attrs.idDataTable
```
Lembre-se que nosso managedBeanName deve ser do tipo BasicCrudMBImpl e a classe tem um m�todo chamado getBeans(). S� assim podemos fazer uso do 'cc.attrs.managedBeanName.beans', que automaticamente ser� chamado o getBeans() da classe.

Como vamos permitir que seja colocado um n�mero indeterminado de �p:column� dentro do nosso dataTable customizado? A resposta � simples, pois utilizando o composite:insertChildren, pois, logo ap�s as defini��es do p:ajax n�s colocamos o insertChildren, permitindo que seja colocado n�o s� o p:column, mas qualquer outro conte�do necess�rio. Isto abre um leque enorme de possibilidade.

Nosso componente est� criado, por�m precisamos aprender a utiliz�-lo em nossa p�gina. O primeiro passo � salvar a p�gina XHTML onde definimos o nosso componente, que ter� o nome do componente. Por exemplo: appDataTable.xhml = nome do componente 'appDataTable'.

O JSF faz refer�ncia a um diret�rio escolhido por voc�, onde todos os composites est�o. Podemos chamar este diret�rio de 'application' e obrigatoriamente devemos coloc�-lo dentro de webapp/resources. Ent�o, se for criar 10 componentes, estes devem estar dentro de 'webapp/resources/application'.

Ap�s a cria��o do diret�rio e da p�gina XHTML n�s definimos uma nova URL no cabe�alho do nosso XHTML onde queremos usar o composite, como mostra a Listagem 5.


<!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:app="http://java.sun.com/jsf/composite/application">

Listagem 5. Usando composite

Veja na �ltima linha a defini��o do 'xmlns:app="http://java.sun.com/jsf/composite/application"', onde application � o nome do diret�rio e 'app' � a tag de refer�ncia que usaremos dentro da p�gina.


<app:appDataTable managedBeanName="#{clienteMB}">
  <p:column headerText="COD" sortBy="#{cliente.id}" width="10">
       <h:outputText
       value="#{cliente.id}" />
  </p:column>
  <p:column headerText="Nome" sortBy="#{cliente.pessoa.nome}">
       <h:outputText
        value="#{cliente.pessoa.nome}" />
  </p:column>
  <p:column headerText="CPF/CNPJ" width="50"
       sortBy="#{cliente.pessoaFisica != null ? cliente.pessoaFisica.cpf : 
       cliente.pessoaJuridica.cnpj}">
       <h:outputText
             value="#{cliente.pessoaFisica != null ? cliente.pessoaFisica.cpf : 
             cliente.pessoaJuridica.cnpj}" />
  </p:column>
  <p:column headerText="Situa��o" width="100"
    sortBy="#{cliente.pessoa.situacao.descricao}">
       <h:outputText value="#{cliente.pessoa.situacao.descricao}" />
  </p:column>                             
</app:appDataTable>

Listagem 6. DataTable composite

Para utilizar nosso componente, basta chamar �� e o �nico atributo obrigat�rio � o managedBeanName, como j� hav�amos definido.

Se voc� comparar a Listagem 2 com a Listagem 6, ver� a diferen�a de detalhes em ambas, pois a Listagem 6 abstrai todos os detalhes que j� deveriam ser padr�es para nossa aplica��o, tornando tudo mais simples e produtivo.

Vejamos outro exemplo de cria��o de um composite para mostrar um dialog do Primefaces, de forma padronizada para todo projeto. Observe a Listagem 7.


<!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:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui"
     xmlns:composite="http://java.sun.com/jsf/composite">

<composite:interface>
     <composite:attribute name="titulo"
           shortDescription="T�tulo do dialog" />
           <composite:attribute name="rodape"
           shortDescription="Rodap� do dialog" />
     <composite:attribute name="id"
           shortDescription="ID do componente" />
</composite:interface>

<composite:implementation>

     <p:dialog id="#{cc.attrs.id}" header="#{cc.attrs.titulo}" maximizable="true"
           footer="#{cc.attrs.rodape}" widgetVar="var#{cc.attrs.id}" modal="true"
           showEffect="fade" hideEffect="fade" closeOnEscape="true">
           <composite:insertChildren />      
     </p:dialog>  
</composite:implementation>

</html>

Listagem 7. Criando composite para o dialog do Primefaces.org

Seguindo a mesma linha de racioc�nio das listagens anteriores, o nosso composite da Listagem 7 possui os atributos: titulo, rodape e id. Nenhum deles � obrigat�rio.

Na implementa��o n�s chamamos o componente dialog (p:dialog) com os par�metros padronizados e usando o composite:insertChildren para permitir a inser��o de qualquer tipo de conte�do dentro do dialog.

Vejamos como se da seu uso na Listagem 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: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"
     xmlns:application="http://java.sun.com/jsf/composite/application">

<h:head>

</h:head>
<h:body>
  <ui:composition>
    <application:simpleDialog id="dialogTeste"
           titulo="Teste de Dialog">
           <div>Meu conteudo aqui</div>
    </application:simpleDialog>
  </ui:composition>


</h:body>
</html>

Listagem 8. Usando o composite do dialog

� importante salientar que o uso do composite n�o se aplica apenas ao Primefaces, mas para qualquer outra necessidade, usamos o Primefaces apenas para demonstrar o caso real de uso.

Neste artigo utilizamos o composite para tornar o conceito de reusabilidade e aumento de produtividade poss�vel em projetos com JSF. Para projetos complexos e com diversos componentes espalhados por diversos m�dulos o uso do composite pode ser uma grande ferramenta visto que as altera��o s�o todas centralizadas. Imagine, por exemplo, que em seu projeto h� aproximadamente 50 dataTables espalhados dentre diversos formul�rios e foi requisitado a voc� remover a �sele��o� de todos os dataTables temporariamente por alguns dias e depois habilitar novamente. Normalmente voc� teria que ir p�gina em p�gina e remover o selectionMode do Primefaces datatabel e isso com certeza seria um trabalho �rduo, isso porque estamos falando apenas de 50 dataTables mas h� projetos com muito mais que isso. Com um simples composite voc� consegue centralizar os dataTables e mudar o selectionMode direto no composite, isso � reusabilidade e produtividade ao mesmo tempo.

Veja que falamos muito de dataTAble por se tratar de algo muito comum em quase todos os projetos, dos mais simples aos mais complexos, mas mostramos tamb�m o uso do composite com um dialog para demonstrar que sua utilidade vai al�m.

Tecnologias:

Confira outros conte�dos:

Introdu��o ao JDBC

Novidades do Java

Teste unit�rio com JUnit

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Ronaldo Em 2015

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso