Data Binding: Manipulando DataTable no ManagedBean em JSF

Um ponto muito importante em qualquer projeto � a tabula��o de dados, independente da linguagem a qual estamos trabalhando. Quando trata-se de JSF (Java Server Faces) o primeiro componente que vem � mente, para tabula��o de dados, � o DataTable. Este poderoso componente fornece recursos muito poderosos para que o desenvolvedor consiga trabalhar em conjunto com o ManagedBean de forma pr�tica, r�pida e f�cil.

Neste artigo veremos como implementar v�rias funcionalidades ao dataTable do JSF, funcionalidades estas que j� s�o padr�es em frameworks como o Primefaces mas em nosso caso vamos construir nossa pr�pria l�gica usando o binding do JSF.

JSF e o DataTable

Possivelmente o DataTable � um dos componentes mais completos do JSF, com um mundo de possibilidades, para us�-lo na sua p�gina xHTML voc� deve ter a tag abaixo:


xmlns:h="http://java.sun.com/jsf/html"

Com o link acima referenciando a letra 'h', n�s podemos chamar o h:dataTable dentro da nossa p�gina, um exemplo completo de declara��o dessas tags � mostrado na Listagem 1.


<!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">
<h:head />
<h:body>
</h:body>
</html>

Listagem 1. Exemplo completo de header do XHTML

Se voc� est� come�ando agora com JSF e n�o tem as bibliotecas necess�rias para us�-lo no seu projeto, voc� pode adicionar as linhas da Listagem 2 no seu pom.xml, caso esteja usando Maven.


<dependency>
   <groupId>com.sun.faces</groupId>
   <artifactId>jsf-api</artifactId>
   <version>2.2.9</version>
</dependency>

<dependency>
   <groupId>com.sun.faces</groupId>
   <artifactId>jsf-impl</artifactId>
   <version>2.2.9</version>
</dependency>

Listagem 2. Adicionando JSF ao pom.xml

Estamos usando a vers�o 2.2.9 do JSF que traz v�rias novidades como o uso de atributos customizados nos componentes, muito �til para uso de frameworks como Bootstrap.

Dada as configura��es acima n�s estamos prontos para usar o DataTable em nossa p�gina XHTML, por�m precisamos definir um ManagedBean que ir� manipular este componente. Isso significa que os eventos disparados no nosso dataTable ser�o enviados ao nosso ManagedBean, que nada mais � do que uma classe Java, onde faremos os tratamentos necess�rios. Observe a Listagem 3.


import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.component.html.HtmlDataTable;
 
@ManagedBean(name = "manipuladorDataTableMB")
@ViewScoped
public class ManipuladorDataTableMB{
 
    private static final long serialVersionUID = 1L;
        
    private HtmlDataTable dataTable;
 
       public HtmlDataTable getDataTable() {
             return dataTable;
       }
 
       public void setDataTable(HtmlDataTable dataTable) {
             this.dataTable = dataTable;
       }            
 
}

Listagem 3. ManagedBean para manipular nosso DataTable

Nosso ManagedBean � muito simples, vejamos:

Ele possui duas anota��es @ManagedBean com o nome dele que ser� referenciado no XHTML, ent�o chamaremos ele atrav�s do alias manipuladorDataTableMB no nosso XHTML. A outra anota��o, @ViewScoped, diz respeito ao escopo do nosso ManagedBean na sess�o do Browser, e este escopo significa que o nosso ManagedBean guardar� os dados da requisi��o enquanto o usu�rio n�o mudar de visualiza��o/view.
O mais importante aqui � nossa vari�vel 'dataTable' do tipo HtmlDataTable. Com ela n�s faremos o binding do componente DataTable do XHTML para o 'dataTable' do nosso ManagedBean.
� importante entender que com o conceito de 'Data Binding' � o princ�pio fundamental do que faremos neste artigo. Esta t�cnica possibilita a conex�o entre a interface da aplica��o e a l�gica de neg�cio, e isso n�o se refere apenas a WEB. Quando temos um componente A, dada uma determinada tela do sistema, sendo controlando de uma classe onde tem uma regra de neg�cio B, chamamos isso de Data Binding.

N�o podemos come�ar a trabalhar com o DataTable sem antes possuir os dados que ser�o manipulados, mas para n�o nos estendermos muito n�s iremos criar os dados estaticamente na nossa classe ManipuladorDataTableMB, referenciando um Bean chamado Noticia. Observe a Listagem 4.


public class Noticia {
   
   private int id;
   private String titulo;
   private String texto;
   
   public Noticia(int id, String titulo, String texto){
         this.id = id;
         this.titulo = titulo;
         this.texto = texto;
   }
   
   public int getId() {
         return id;
   }
   public void setId(int id) {
         this.id = id;
   }
   public String getTitulo() {
         return titulo;
   }
   public void setTitulo(String titulo) {
         this.titulo = titulo;
   }
   public String getTexto() {
         return texto;
   }
   public void setTexto(String texto) {
         this.texto = texto;
   }
}

Listagem 4. Bean Noticia

E com o Bean definido n�s adicionamos um inicializador no ManipuladorDataTableMB, como mostra a Listagem 5.


private List<Noticia> noticias;
  
  public ManipuladorDataTableMB(){
     noticias = new ArrayList<Noticia>();
     noticias.add(new Noticia(1,"Noticia 001", "Texto 001"));
     noticias.add(new Noticia(2,"Noticia 002", "Texto 002"));
     noticias.add(new Noticia(3,"Noticia 003", "Texto 003"));           
     noticias.add(new Noticia(4,"Noticia 004", "Texto 004"));
     noticias.add(new Noticia(5,"Noticia 005", "Texto 005"));
  }

     public List<Noticia> getNoticias() {
           return noticias;
     }

     public void setNoticias(List<Noticia> noticias) {
           this.noticias = noticias;
}

Listagem 5. Inicializando o Bean Noticia como uma Lista

Criamos um construtor para nosso ManipuladorDataTableMB, e nele inicializamos a vari�vel noticias que � declarada logo em baixo de 'private HtmlDataTable dataTable'.

Agora precisamos realizar o binding do nosso componente dataTable com o nosso ManagedBean, como mostra a Listagem 6.


<!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">

<h:head />
<h:body>
     <h:dataTable binding="#{manipuladorDataTableMB.dataTable}"
           value="#{manipuladorDataTableMB.noticias}" var="noticia">
           <h:column>
                  <f:facet name="header">ID</f:facet>
           #{noticia.id}
       </h:column>

           <h:column>
                  <f:facet name="header">Titulo</f:facet>
           #{noticia.titulo}
       </h:column>

           <h:column>
                  <f:facet name="header">Texto</f:facet>
           #{noticia.texto}
       </h:column>
     </h:dataTable>
</h:body>
</html>
Resultado:
ID
Titulo
Texto
1
Noticia 001
Texto 001
2
Noticia 002
Texto 002
3
Noticia 003'
Texto 003
4
Noticia 004
Texto 004
5
Noticia 005
Texto 005

Listagem 6. Fazendo binding do XHTML para o ManagedBean

Vamos entender o que foi feito acima de forma sucinta, pois nosso objetivo � mostrar o binding e n�o todas as funcionalidades do dataTable. Criamos no ManagedBean uma lista de objetos Noticia, e agora estamos populando nosso dataTable usando o atributo �value� onde passamos esta lista, usamos o atributo �var� para mapear um alias que poder� ser usado dentro da coluna, o #{noticia.titulo} faz refer�ncia a cada linha do registro que est� sendo iterado no dataTable. O mais importante aqui � notar o uso do atributo �binding�, que faz refer�ncia a classe HtmlDataTable que criamos anteriormente no nosso ManagedBean.

De posse deste conhecimento j� podemos come�ar a fazer alguns procedimentos com este componente, vejamos como saber a linha atual que est� selecionada na Listagem 7.


//XHTML

<h:column>
<h:commandLink value="Selecionar"
 action="#{manipuladorDataTableMB.selecionarLinha()}" />
</h:column>

//ManagedBean
public void selecionarLinha(){
   Noticia noticiaSelecionada = (Noticia) dataTable.getRowData();
   System.out.println("Noticia Selecionada  = "+noticiaSelecionada.getId() + "|" + noticiaSelecionada.getTitulo());
}

Listagem 7. Checando linha selecionada

E n�o esque�a de colocar as tags � e � ao redor do dataTable, caso contr�rio voc� n�o conseguir� produzir o resultado esperado.

Quando o usu�rio clicar no link �Selecionar�, o m�todo selecionarLinha() ser� chamado e o componente dataTable do ManagedBean j� tem a linha selecionada e podemos recupera-la atrav�s do m�todo getRowData().

Podemos tamb�m contar a quantidade de linhas contidas no dataTable, como mostra a Listagem 8.


public void selecionarLinha(){
   int count = dataTable.getRowCount();
   System.out.println("quantidade de registros = "+count);
}

Listagem 8. Contando n�mero de registros

Tudo isso � feito sempre que o usu�rio clicar no link que criamos anteriormente.

Vejamos agora como fica nosso ManagedBean finalizado com o Binding e os m�todos necess�rios para manipula-lo (Listagem 9).


package br.com.cardoso.mb;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.component.html.HtmlDataTable;

@ManagedBean(name = "manipuladorDataTableMB")
@ViewScoped
public class ManipuladorDataTableMB{

private static final long serialVersionUID = 1L;
    
private HtmlDataTable dataTable;
private List<Noticia> noticias;

public ManipuladorDataTableMB(){
     noticias = new ArrayList<Noticia>();
     noticias.add(new Noticia(1,"Noticia 001", "Texto 001"));
     noticias.add(new Noticia(2,"Noticia 002", "Texto 002"));
     noticias.add(new Noticia(3,"Noticia 003'", "Texto 003"));         
     noticias.add(new Noticia(4,"Noticia 004", "Texto 004"));
     noticias.add(new Noticia(5,"Noticia 005", "Texto 005"));
}

public void selecionarLinha(){
     Noticia noticiaSelecionada = (Noticia) dataTable.getRowData();
     System.out.println("Noticia Selecionada  = "+noticiaSelecionada.getId() 
     + "|"+ noticiaSelecionada.getTitulo());
}

     public HtmlDataTable getDataTable() {
               return dataTable;
     }

     public void setDataTable(HtmlDataTable dataTable) {
               this.dataTable = dataTable;
     }

     public List<Noticia> getNoticias() {
               return noticias;
     }

     public void setNoticias(List<Noticia> noticias) {
               this.noticias = noticias;
     }            
}

Listagem 9. ManagedBean completo

Nosso managedBean � muito simples mas se resumo a tudo que precisamos para entender como fazer um binding do DataTable. Lembrando que o binding n�o est� limitado apenas ao DataTable mas tamb�m pode ser utilizado em outros componentes.

Vejamos agora um processo de sele��o um pouco mais complexo, a sele��o de v�rios itens ao mesmo tempo. Podemos colocar um checkbox em cada coluna de forma que o usu�rio possa selecionar quantas achar necess�rio e depois realizar algum processamento.

Primeiro alteramos nosso bean inicial adicionando uma nova coluna chamada 'selected', como mostra a Listagem 10.


package br.com.cardoso.mb;

public class Noticia {
   
   private int id;
   private String titulo;
   private String texto;
   private boolean selected;
   
   public Noticia(int id, String titulo, String texto){
         this.id = id;
         this.titulo = titulo;
         this.texto = texto;
         this.selected = false;  
   }
   
   public int getId() {
         return id;
   }
   public void setId(int id) {
         this.id = id;
   }
   public String getTitulo() {
         return titulo;
   }
   public void setTitulo(String titulo) {
         this.titulo = titulo;
   }
   public String getTexto() {
         return texto;
   }
   public void setTexto(String texto) {
         this.texto = texto;
   }

   public boolean isSelected() {
         return selected;
   }

   public void setSelected(boolean selected) {
         this.selected = selected;
   }

}

Listagem 10. Bean com coluna selected

Temos agora um novo atributo chamado selected que possui seu valor padr�o igual a false quando o objeto � instanciado. Preparamos agora nosso ManagedBean para receber a sele��o de v�rios objetos e realizar alguma a��o. Observe a Listagem 11.


public void mostrarLinhasSeleciondas(){      
   for(Noticia n : noticias){
         if (n.isSelected()){
                System.out.println("Noticia selecionada (ID | Titulo) 
                = "+n.getId() + "|"+ n.getTitulo());
                n.setSelected(false);
         }
   }
}

Listagem 11. Preparando o managedBean para sele��o m�ltipla

Adicionamos um m�todo que ir� percorrer nosso ArrayList �noticias� e checamos se aquele registro foi selecionado ou n�o, caso seja selecionado ent�o mostramos o valor da not�cia. Em nosso XHTML fazemos da mesma forma que mostrada na Listagem 12.


<!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">

<h:head />
<h:body>
   <h:form>
    <h:dataTable binding="#{manipuladorDataTableMB.dataTable}"
      value="#{manipuladorDataTableMB.noticias}" var="noticia">
      <h:column>
             <f:facet name="header">ID</f:facet>
    #{noticia.id}
    </h:column>

      <h:column>
             <f:facet name="header">Titulo</f:facet>
    #{noticia.titulo}
    </h:column>

      <h:column>
             <f:facet name="header">Texto</f:facet>
    #{noticia.texto}
    </h:column>

      <h:column>
             <h:commandLink value="Selecionar"
                    action="#{manipuladorDataTableMB.selecionarLinha()}" />
      </h:column>
      
      <h:column>
       <h:selectBooleanCheckbox value="#{noticia.selected}" />
      </h:column>
    </h:dataTable>

    <h:commandButton action="#{manipuladorDataTableMB.mostrarLinhasSeleciondas()}" 
value="Processar Selecionados" />
   </h:form>
</h:body>
</html>

Listagem 12. Sele��o m�ltipla no XHTML

Agora nosso XHTML al�m de possuir o link 'selecionar' padr�o, possui tamb�m um checkbox para cada registro, onde podemos selecionar o mesmo e depois clicar no bot�o 'Processar Selecionados', assim os valores selecionados ser�o enviados ao ManagedBean e podemos percorre-lo.

Depois de selecionar uma quantidade qualquer de registros e clicarmos no bot�o de Processar, a p�gina deve ser recarregada e os valores voltam ao seu estado inicial, sem sele��o.

Vamos adicionar mais complexidade ao nosso projeto adicionando um campo para que o usu�rio possa editar o valor selecionado, como mostra a Listagem 13.


<!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">

<h:head />
<h:body>
   <h:form>
         <h:dataTable binding="#{manipuladorDataTableMB.dataTable}"
                value="#{manipuladorDataTableMB.noticias}" var="noticia">
                <h:column>
                       <f:facet name="header">ID</f:facet>
         #{noticia.id}
     </h:column>

                <h:column>
                       <f:facet name="header">Titulo</f:facet>
                       <h:inputText value="#{noticia.titulo}" />
     </h:column>

                <h:column>
                       <f:facet name="header">Texto</f:facet>
         <h:inputText value="#{noticia.texto}" />
     </h:column>
     
       <h:column>
            <h:commandLink value="Salvar"
                  action="#{manipuladorDataTableMB.salvar()}" />
            </h:column>

            <h:column>
            <h:commandLink value="Selecionar"
                  action="#{manipuladorDataTableMB.selecionarLinha()}" />
            </h:column>

            <h:column>
            <h:selectBooleanCheckbox value="#{noticia.selected}" />
            </h:column>
         </h:dataTable>
         
         <h:commandButton action="#{manipuladorDataTableMB
         .mostrarLinhasSeleciondas()}" value="Processar Selecionados" />
   </h:form>
</h:body>
</html>

Listagem 13. Editando valor selecionado

Acima mudamos a simples impress�o dos valores Titulo e Texto da not�cia em quest�o e estamos agora colocando um h:inputText para que o usu�rio possa alterar o t�tulo e o texto da not�cia sem que precise ir para uma outra tela. Esta pr�tica � muito comum quando trata-se de registros b�sicos que s�o prim�rios para o cadastro de outros, exemplo: categoria de produtos, tipos de clientes e etc.

Quando o usu�rio muda o t�tulo da not�cia nada acontece no managedBean, pois o valor s� � processador no 'submit' do form que � realizado atrav�s do bot�o 'Salvar'que chama a action 'salvar()' do nosso ManagedBean. Apenas nesta etapa � que o ciclo de vida do JSF entra em a��o e o processamento realmente come�a.

Em nosso ManagedBean adicionamos o m�todo salvar que na verdade apenas mostra os novos valores, como mostra a Listagem 14.


public void salvar(){
   Noticia noticiaSelecionada = (Noticia) dataTable.getRowData();
   System.out.println("Titulo novo = "+noticiaSelecionada.getTitulo());
   System.out.println("Texto novo = "+noticiaSelecionada.getTexto());
}

Listagem 14. M�todo salvar() do ManagedBean

Quando capturamos a not�cia selecionada atrav�s do getRowData(), n�s j� temos os valores da not�cia alterada, a partir da aqui voc� pode fazer valida��es e salvar no banco de dados, mas para efeitos did�ticos estamos apenas mostrando no console os novos valores para certificar-se que eles est�o vindo corretamente.

A quantidade de funcionalidades que voc� pode implementar com o binding de um dataTable s�o imensas, voc� literalmente pode criar um componente t�o poderoso quanto os oferecidos por componentes terceirizados como PrimeFaces, Icefaces e etc., tudo depende da sua expertise, pois obviamente fun��es complexas exigem mais estudo, mais conhecimento e mais paci�ncia.

Neste artigo criamos apenas a op��o de sele��o e edi��o, mas a sele��o � o ponto de partida para a maioria das fun��es que voc� imagina desenvolver, por exemplo, ordena��o, pesquisa, pagina��o e etc. A vantagem de utilizar o dataTable do JSF � o n�vel de customiza��o que voc� pode fazer com este componente, pois quando voc� usa componentes como o dataTable do PrimeFaces voc� tem v�rias caracter�sticas que s�o adicionadas pelo pr�prio PrimeFaces e que podem ser indesejadas, como por exemplo o estilo do componente, o que pode trazer incompatibilidade com outros frameworks com o Bootstrap.

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