Olá desenvolvedores, neste tutorial da série de tutoriais sobre o Primefaces, iremos aprender a carregar e listar os dados carregados com o dataTable. No tutorial anterior implementamos os botões “Salvar” e “Novo” chamando seus respectivos métodos.

E por estarmos utilizando uma estrutura de um projeto JSF – JavaServer Faces já pronta, não foi preciso alterar nenhum detalhe do ManagedBean. Assim, se você ainda não viu nossos tutorias sobre JSF, pode começar por aqui.

DATATABLE

Os dados serão listados logo após a implementação dos botões “Salvar” e “Novo”. Aqui também utilizaremos a tag <br> para promover uma quebra de linha. O componente dataTable do PrimeFaces é chamado, como sempre por meio do prefixo “p”, p:dataTable cujo valor invoca uma lista da base de dados, este componente deverá conter também uma variável que recebe um objeto.

<p:dataTable value=“#{usuarioPessoaManagedBean.list}” var=“user”> </p:dataTable>

Dentro do p:dataTable implementaremos as colunas, p:column, que agora terão como atributo um elemento de cabeçalho, headerText. Cada coluna implementa um componente de saída de dados, p:outputText, que por meio de atributo value chama o objeto user e o atributo correspondente que deverá ser exibido na tabela.

Proceda da mesma forma para a implementação dos campos que deseja que sejam exibidos, nome, sobrenome, idade e login.

EM POUCAS PALAVRAS

Para que a tabela que acabamos de implementar fique ainda mais completa falta adicionar os botões de “Editar” para colocar o objeto em edição, e “Excluir”. Mas veja como a tabela se adapta a tela, quando acionarmos os botões, não será preciso fazer nenhuma implementação para deixa-la responsiva, o PrimeFaces se encarrega dessa tarefa.

Observe, comparativamente apenas com o formulário já é possível observar a diferença com uma tabela do JSF – JavaServer Faces. E nesta implementação, estamos utilizando o dataTable básico, mas explorando a documentação você verá que existe muitas outras opções, inclusive para implementações mais sofisticadas e/ou complexas.