Olá desenvolvedores, neste tutorial criaremos o Dialog que é uma caixa de diálogo gerada em tempo de execução, e que também pode ser compreendida como um modal. Este modal será exibido para usuário assim que ele clicar no botão para cadastrar os e-mails.

IMPLEMENTANDO O DIALOG

Atente-se para o fato de que o dialog deverá ficar sempre dentro de um formulário. Assim, logo abaixo o fechamento da tag p:dataTable, mas ainda no contexto do h:form implementaremos a caixa de diálogo com a tag de componente do PrimeFaces p:dialog. Esta tag trará os atributos de cabeçalho (header), um id e uma variável com o mesmo valor, o posicionamento do modal que deverá ser centralizado. Definiremos ainda a largura dele. E como a caixa de diálogo é um modal, o atributo de mesmo nome deverá ser true.

BOTÃO DE E-MAIL

O botão para abrir a caixa de diálogo ficará dentro da tabela que exibe os registros cadastrados. Então, dentro do componente p:dataTable ao lado do botão “Excluir”, iremos inserir uma nova coluna, p:column, para o botão de cadastro de e-mails. A coluna terá apenas um cabeçalho (header).

<p:column headerText=”Emails”>...</p:column>

No escopo da tag p:column criaremos o botão do tipo p:commandLink. Quando o botão for clicado ele deverá abrir o dialog atualizado, isto é, com os e-mails cadastrados para o usuário correspondente. Lembrando que cada linha da tabela representa um usuário cadastrado na base de dados.

Desse modo o p:commandLink receberá o atributo update que irá buscar por meio dos respectivos identificadores únicos o modal dentro do formulário e atualizá-lo.  E ainda o evento oncomplete cujo valor é a função PF() do PrimeFaces que irá procurar pela variável widgetVar para processar o modal e exibi-lo.

Deveremos fazer com que no momento em que o usuário clicar no botão de “E-mail”, o usuário em questão seja identificado e adicionado dentro do objeto usuarioPessoa, no ManagedBean, UsuarioPessoaManagedBean.

Assim, a tag responsável por ficar escutando se uma ação no componente irá ocorrer, e então definir uma propriedade bean com o valor determinado é a f:setPropertyActionListener. O valor será o objeto da linha, isto é, o user, este objeto será adicionado a variável usuarioPessoa por meio do target.

E ainda dentro do p:commandLink colocaremos a tag p:graphicImage para adicionarmos uma imagem ao botão. Defina para a imagem as dimensões de largura e altura e o caminho dela no projeto.

TESTANDO A APLICAÇÃO

Tendo feito todas as implementações agora é só testar a aplicação iniciando o servidor. Na imagem abaixo você poderá ver como está a tabela após termos adicionado mais uma coluna.

EM POUCAS PALAVRAS

Neste tutorial implementamos o botão para abrir o modal e suas devidas particularidades. Criamos ainda, o dialog do tipo modal para que além de exibir os e-mails cadastrados, seja possível o cadastro de outros novos.