[Resolvido] Dúvida em como utilizar p:dialog (Primefaces 3.4)

9 de setembro de 2012 14 respostas

Zenity 9 de setembro de 2012

Olá a todos!

Fiz uma página na qual exibe os valores de uma tabela em uma datable. Até ai tudo ok.
Então adicionei dois botões, um para alterar e outro para excluir o registro.

Pensei então, no momento em que o usuário clicar no botão de alteração aparecer uma dialog modal, com os campos preenchidos.
Até ai não tive muito problema, fiz a dialog etc. Contudo ao tentar trazer o resultado do campo selecionado o inputtext fica vazio.

listar.xhtml

<?xml version="1.0" encoding="ISO-8859-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:p="http://primefaces.org/ui">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Relação de Formas de Pagamento</title>
</h:head>
<h:body>
	<p:fieldset legend="Formas de Pagamento">
		<h:form>
			<p:dataTable var="formaPgto"
				value="#{FormaPagamentoBean.formaPagamentoFacade.listAll()}">
				<p:column headerText="Descrição">
					<h:outputText value="#{formaPgto.descricao}" />
				</p:column>
				<p:column headerText="Ações">
					<p:commandButton onclick="dlgFormaPgto.show();" id="btnAlterar"
						icon="ui-icon-disk" />
					<p:commandButton
						actionListener="#{FormaPagamentoBean.deleteFormaPagamento()}"
						id="btnExcluir" icon="ui-icon-trash" />
				</p:column>
			</p:dataTable>
		</h:form>
	</p:fieldset>

	<p:dialog id="modalDialog" header="Cadastro de Forma de Pagamento"
		widgetVar="dlgFormaPgto" modal="true" height="100" minimizable="false"
		resizable="false" dynamic="false">
		<h:form>
			<h:inputText value="#{FormaPagamentoBean.formaPagamento.descricao}" />
		</h:form>
	</p:dialog>
</h:body>
</html>

Alguém saberia me dizer o que estou fazendo de errado?
E aproveitando, tenho outras duas dúvidas também.

1 - No caso do dialog, eu não posso fazer uma tela de cadastro em modal também e utilizar ela no momento em que vou fazer a alteração? Porque ter que ficar escrevendo a dialog sempre no final da page é meio estranho.

2 - Qual a propriedade para não permitir que a dialog seja movimentada?

14 Respostas

Hebert_Coelho 9 de set. de 2012

Você precisa passar o valor no click do botão.

Aqui mostra como fazer: Aplicação Web Completa Tomcat JSF Primefaces JPA Hibernate.

Zenity 9 de set. de 2012

Ahhh maravilha.
Esqueci de olhar seu projeto antes de postar aqui (Desculpe )

Lá já ta tudo respondido, só não tem a questão de deixar o dialog fixo na tela, mas esse eu já achei aqui.
É a propriedade draggable só deixar ela false

Valeu novamente pela atenção amigo!!

Zenity 9 de set. de 2012

Amigo, infelizmente ainda não consegui obter sucesso.
Mesmo analisando os códigos do seu projeto.

Fiz as seguintes páginas agora

Listar.xhtml

<?xml version="1.0" encoding="ISO-8859-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:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Relação de Formas de Pagamento</title>
</h:head>
<h:body>
	<p:fieldset legend="Formas de Pagamento">
		<p:dataTable id="FormaPagamentoTable"
			value="#{FormaPagamentoBean.allFormaPagamento}" var="formaPgto"
			emptyMessage="Nenhum registro encontrado!">
			<p:column headerText="Descrição">
				<h:outputText value="#{formaPgto.descricao}" />
			</p:column>

			<p:column headerText="Ações">
				<p:commandButton id="btnAlterar" value="Alterar"
					icon="ui-icon-pencil" onclick="alterarFormaPgto.show();"
					update=":alterarFormaPgtoForm">
					<f:setPropertyActionListener
						target="#{FormaPagamentoBean.formaPagamento}"
						value="#{formaPagamento}" />
				</p:commandButton>
			</p:column>

		</p:dataTable>
	</p:fieldset>

	<ui:include src="/formaPgto/dialogs/alterarFormaPgto.xhtml" />
</h:body>
</html>

alterarFormaPgto.xhtml

<!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">
<h:body>
	<p:dialog widgetVar="alterarFormaPgto"
		id="alterarFormaPgtoDialogId" height="150" width="500" modal="true"
		closable="true" draggable="false" resizable="false">
		<h:form id="alterarFormaPgtoForm" prependId="false">
			<h:panelGrid columns="2">
				<h:outputText value="* Descrição: " />
				<h:inputText value="#{FormaPagamentoBean.formaPagamento.descricao}" required="true" label="Descrição: " >
				</h:inputText>

				<p:commandButton value="Alterar" icon="ui-icon-plus"
					action="#{FormaPagamentoBean.updateFormaPagamento()}" />
				<p:commandButton value="Cancelar" icon="ui-icon-cancel" actionListener="#{FormaPagamentoBean.resetFormaPagamento()}"
					onclick="alterarFormaPgto.hide();" type="button" />
			</h:panelGrid>
		</h:form>
	</p:dialog>
</h:body>
</html>

Quando clico no botão alterar ele abre normalmente a dialog, contudo o campo descrição está em branco.
Nenhum erro é retornado no console. Simplesmente não trás a informação.

Sabe o que pode ser??
Agradeço desde já pela ajuda!!

matheus.goes 9 de set. de 2012

Boa noite Zenity, para resolver o seu problema é necessário criar um atributo no seu bean que receberá o objeto da linha selecionada, além disso, é preciso inicializar este atributo, pois sem isso não funcionará e você provavelmente verá alguns “NullPointerException” no console (experiência própria, rsrsrs). Por fim, ao invés de chamar o dialog no onclick do botão, chame no oncomplete e adicione o atributo update no mesmo botão atualizando o form inteiro ou apenas o modal. Segue um pequeno exemplo:

Bean

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

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import br.com.exemplo.model.FormaPagamento;

@ManagedBean
@SessionScoped
public class FormaPagamentoBean {
	private List<FormaPagamento> listaFormasPagamento;
	private FormaPagamento formaPagamentoSelecionada;

	public FormaPagamentoBean() {
		this.carregaListaFormasPagamento();
		this.formaPagamentoSelecionada = new FormaPagamento();
	}

	private void carregaListaFormasPagamento() {
		this.listaFormasPagamento = new ArrayList<FormaPagamento>();
		for (int i = 0; i < 5; i++) {
			this.listaFormasPagamento.add(new FormaPagamento("Forma " + i));
		}
	}

	public void deleteFormaPagamento() {
		// Implementação
	}

	public List<FormaPagamento> getListaFormasPagamento() {
		return listaFormasPagamento;
	}

	public void setListaFormasPagamento(
			List<FormaPagamento> listaFormasPagamento) {
		this.listaFormasPagamento = listaFormasPagamento;
	}

	public FormaPagamento getFormaPagamentoSelecionada() {
		return formaPagamentoSelecionada;
	}

	public void setFormaPagamentoSelecionada(
			FormaPagamento formaPagamentoSelecionada) {
		this.formaPagamentoSelecionada = formaPagamentoSelecionada;
	}

}

.xhtml

<?xml version="1.0" encoding="ISO-8859-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: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">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Formas de Pagamento</title>
</h:head>
<h:body>
	<h:panelGrid style="margin: 0 auto;">
		<h:form id="form">
			<p:dataTable value="#{formaPagamentoBean.listaFormasPagamento}"
				var="formaPagamento">
				<p:column headerText="Descrição">
					<h:outputText value="#{formaPagamento.descricao}" />
				</p:column>
				<p:column headerText="Ações">
					<p:commandButton id="btnAlterar" icon="ui-icon-disk" alt="Alterar"
						update=":form:modalDialog" oncomplete="dlgFormaPgto.show()"> <!-- Aqui está a alteração -->
						<f:setPropertyActionListener
							target="#{formaPagamentoBean.formaPagamentoSelecionada}"
							value="#{formaPagamento}" />
					</p:commandButton>
					<p:commandButton
						actionListener="#{formaPagamentoBean.deleteFormaPagamento}"
						id="btnExcluir" icon="ui-icon-trash" />
				</p:column>
			</p:dataTable>

			<p:dialog id="modalDialog" header="Cadastro de Forma de Pagamento"
				widgetVar="dlgFormaPgto" modal="true" height="100"
				minimizable="false" resizable="false" dynamic="false"
				draggable="false">
				<h:inputText
					value="#{formaPagamentoBean.formaPagamentoSelecionada.descricao}" />
			</p:dialog>
		</h:form>
	</h:panelGrid>
</h:body>
</html>

Zenity 9 de set. de 2012

Então, mas meu bean já ta assim.
Saca só

FormaPagamentoBean.java

package br.com.unip.menudroidweb.bean;

import java.io.Serializable;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import br.com.unip.menudroidweb.facade.FormaPagamentoFacade;
import br.com.unip.menudroidweb.model.FormaPagamento;

@ViewScoped
@ManagedBean (name = "FormaPagamentoBean")
public class FormaPagamentoBean extends AbstractBean implements Serializable {
	private static final long serialVersionUID = 7509177036726643287L;
	
	private FormaPagamento formaPgto;
	private List<FormaPagamento> formaPgtoLista;
	private FormaPagamentoFacade formaPgtoFacade;

	public FormaPagamentoFacade getFormaPagamentoFacade() {
		if (formaPgtoFacade == null) {
			formaPgtoFacade = new FormaPagamentoFacade();
		}

		return formaPgtoFacade;
	}

	public FormaPagamento getFormaPagamento() {
		if (formaPgto == null) {
			formaPgto = new FormaPagamento();
		}

		return formaPgto;
	}

	public void setFormaPagamento(FormaPagamento formaPgto) {
		this.formaPgto = formaPgto;
	}

	public void createFormaPagamento() {
		try {
			getFormaPagamentoFacade().createFormaPagamento(formaPgto);
			closeDialog();
			displayInfoMessageToUser("Registro criado com sucesso!");
			loadFormaPagamento();
			resetFormaPagamento();
		} catch (Exception e) {
			keepDialogOpen();
			displayErrorMessageToUser("Ocorreu um erro na transação! Tente novamente.");
			e.printStackTrace();
		}
	}
	
	public void updateFormaPagamento() {
		try {
			getFormaPagamentoFacade().updateFormaPagamento(formaPgto);
			closeDialog();
			displayInfoMessageToUser("Registro alterado com sucesso!");
			loadFormaPagamento();
			resetFormaPagamento();
		} catch (Exception e) {
			keepDialogOpen();
			displayErrorMessageToUser("Ocorreu um erro na transação! Tente novamente.");
			e.printStackTrace();
		}
	}
	
	public void deleteFormaPagamento() {
		try {
			getFormaPagamentoFacade().deleteFormaPagamento(formaPgto);
			closeDialog();
			displayInfoMessageToUser("Registro excluído com sucesso!");
			loadFormaPagamento();
			resetFormaPagamento();
		} catch (Exception e) {
			keepDialogOpen();
			displayErrorMessageToUser("Ocorreu um erro na transação! Tente novamente.");
			e.printStackTrace();
		}
	}

	public List<FormaPagamento> getAllFormaPagamento() {
		if (formaPgtoLista == null) {
			loadFormaPagamento();
		}

		return formaPgtoLista;
	}

	private void loadFormaPagamento() {
		formaPgtoLista = getFormaPagamentoFacade().listAll();
	}

	public void resetFormaPagamento() {
		formaPgto = new FormaPagamento();
	}
}

A unica diferença é que meu método chama setFormaPagamento.

matheus.goes 9 de set. de 2012

Como eu disse antes, inicialize o atributo “formaPgto” no construtor do bean:

public FormaPagamentoBean() {
		this.formaPgto = new FormaPagamento();
}

Outra coisa importante, é manter os métodos getters e setters conforme os padrões, tente modificá-los para tornar o desenvolvimento e o entendimento do seu código mais fácil:

public FormaPagamento getFormaPgto() {
		return formaPgto;
}

public void setFormaPgto(FormaPagamento formaPgto) {
		this.formaPgto = formaPgto;
}

public List<FormaPagamento> getFormaPgtoLista() {
		return formaPgtoLista;
}

public void setFormaPgtoLista(List<FormaPagamento> formaPgtoLista) {
		this.formaPgtoLista = formaPgtoLista;
}

Algumas dicas importantes quando se trabalha com jsf… os nomes dos beans geralmente começam com letra minúscula, se você tem um atributo chamado formaPgto, gere os métodos get e set de acordo com o padrão de nomenclatura, pois como você deve saber, o jsf recupera ou atribui valor a um atributo no bean através desses métodos. Fica a dica. Flws

Zenity 9 de set. de 2012

Oooo amigo, agora ficou mais claro. Vou tentar aqui
Obrigado!

Como estou iniciando, ainda existe algumas coisas que estão meio difíceis. Valeu pela atenção em ajudar!!

Vou tentar aqui, qualquer coisa falo aqui hahaha

Zenity 9 de set. de 2012

Amigo, estou tentando aqui, mas tem uma coisa que fiquei com dúvida.

Por exemplo, você falou para eu inicializar o formaPgto da seguinte maneira:

public FormaPagamentoBean() {  
        this.formaPgto = new FormaPagamento();  
}

Mas no caso, o lazy que eu fiz não resolveria esse problema?

public FormaPagamento getFormaPagamento() {
		if (formaPgto == null) {
			formaPgto = new FormaPagamento();
		}

		return formaPgto;
	}

De qualquer forma, adicionei o construtor, e tentei iniciar novamente a página, e mesmo assim o problema persistiu.
Estou revisando tudo aqui, mas se souber algo mais que eu possa tentar.

Agradeço desde já pela ajuda!!

Zenity 9 de set. de 2012

Beleza amigo, refiz toda codificação do Front End e começou a funcionar.
Contudo surgiu um novo problema :roll: :lol:

Quando eu adiciono/alterou ou excluo um registro, o Dialog não fecha sozinho.
Estou usando a seguinte codificação no button do dialog que realiza o evento

<p:commandButton value="Excluir" icon="ui-icon-plus" action="#{FormaPagamentoBean.deleteFormaPagamento()}" update=":formaPgtoForm:formaPgtoTable" oncomplete="closeDialogIfSucess(xhr, status, args, deletarFormaPgto, 'deletarFormaPgtologId')" />

matheus.goes 10 de set. de 2012

Amigo, como seria o funcionamento desta tela? Em qual momento o dialog tem que aparecer? Eu não entendi direito a exibição do dialog na exclusão. Em relação a pergunta anterior, também funcionaria, porém tome cuidado com o nome do get;

public FormaPagamento getFormaPgto() {  
    if (formaPgto == null) {  
        formaPgto = new FormaPagamento();  
    }  
  
    return formaPgto;  
}

Zenity 10 de set. de 2012

Então, vai funcionar da seguinte forma.
Quando o camarada clicar no botão

<p:commandButton icon="ui-icon-pencil" update=":alterarFormaPgtoForm" onclick="alterarFormaPgto.show();"> <f:setPropertyActionListener target="#{FormaPagamentoBean.formaPagamento}" value="#{formaPgto}" /> </p:commandButton>

Será exibida uma dialog com o valor do registro da datatable preenchida. Nessa dialog tem dois botões “Alterar” e “Cancelar”
Quando clica em cancelar, eu limpo o objeto selecionado, quando ele clica em alterar, eu chamo o método update e “TEORICAMENTE” deveria fechar a dialog.
Contudo não está fazendo isso.

Ele até atualiza o registro, mas não fecha a dialog.
O código do meu botão “Alterar” da dialog está da seguinte maneira:

<p:commandButton value="Alterar" icon="ui-icon-plus" action="#{FormaPagamentoBean.updateFormaPagamento()}" update=":formaPgtoForm:formaPgtoTable" oncomplete="closeDialogIfSucess(xhr, status, args, incluirFormaPgto, 'alterarFormaPgtoDialogId')" />

Zenity 10 de set. de 2012

Outra coisa que percebi, o foco não cai no objeto da dialog.
Procurei um pouco no google e descobri que o p:focus serve para definir o foco em um determinado objeto.

Então adicionei a seguinte codificação em meu dialog.

<h:inputText id="txtdescricao" value="#{FormaPagamentoBean.formaPagamento.descricao}" required="true" label="Descrição: "> <p:focus for="txtdescricao" /> </h:inputText>

Mas mesmo assim não obtive sucesso.
Saberia me dizer o que eu estou fazendo de errado??

matheus.goes 11 de set. de 2012

Entendi… para fechar o dialog, você pode usar o seguinte código no oncomplete:

<p:commandButton value="Alterar" icon="ui-icon-plus"  
    action="#{FormaPagamentoBean.updateFormaPagamento()}"  
    update=":formaPgtoForm:formaPgtoTable"  
    oncomplete="dlgFormaPgto.hide()" />

Zenity 12 de set. de 2012

Valeu amigo, era isso mesmo!
Resolveu meu problema, agora está tudo funcionando certinho!!!

Obrigado!

Criado 9 de setembro de 2012

Ultima resposta 12 de set. de 2012

Respostas 14

Participantes 3

14 Respostas

Topicos relacionados