Olá desenvolvedores, neste tutorial iremos carregar os dados registrados na caixa de diálogo, dialog, e o exibiremos em uma tabela. O dialog, como já vimos é uma caixa de diálogo, no estilo modal, gerada em tempo de execução, quando o usuário interagir com o botão para exibi-la.

Em nosso projeto, essa caixa de diálogo está sendo utilizada para cadastrar e-mails para o usuário “selecionado”. E agora, além de cadastrar os e-mails, carregaremos os dados e o exibiremos em uma tabela no dialog. Definimos uma largura fixa para o dialog de 490px, e a altura será determinada pela quantidade de dados que serão exibidos.

IMPLEMENTANDO O CARREGAMENTO DE DADOS

Na página primefaces.xhtml, criaremos a tabela logo abaixo do p:panelGrid que implementa os dados do formulário, e claro, ainda no escopo da tag de componente do PrimeFaces, p:dialog.

Assim, insira a tag p:dataTable onde o atributo value apontará para o usuarioPessoaManagedBean do ManagedBean de onde obteremos a lista de e-mails para serem carregados. A estrutura do value segue a seguinte hierarquia, ManagedBean de controle, objeto e seu respectivo atributo. Adicione também uma variável e um id.

No botão p:commandButton, “Adicionar”, implementado no tutorial anterior, informe no atributo update o valor do id, assim, por meio do actionLisntener os valores serão atualizados sempre que o botão for clicado.

Dentro da tabela adicionaremos duas colunas, p:column, para o id e o e-mail respectivamente. Em cada uma das colunas insira um atributo headerText com o valor que você deseja que apareça para o usuário como sendo o cabeçalho da coluna.

No escopo de cada coluna implementaremos ainda um h:outputLabel onde o value aponta para o objeto e o atributo correspondente que deverá ser exibido na coluna.

EM POUCAS PALAVRAS

Neste tutorial implementamos o carregamento de dados no dialog, desse modo, poderemos implementar alguma ação sobre os registros listados, como por exemplo a opção de excluir um e-mail cadastrado.