Rich Faces Modal panel

6 de outubro de 2009 8 respostas

kelvis 6 de outubro de 2009

PessoALL!! :lol:

Tenho uma lista de clientes cadastrados que montei numa DATATABLE do Rich e do lado de cada registro um COMMANDBUTTON com a função de abrir um MODAL PANEL carregando os dados daquele cliente para alteração, mas não tô conseguindo popular meus INPUT TEXT’s… O código tá ai…

XHTML

<a4j:form>
<a4j:region>
	<rich:dataTable id="tbclientes" value="#{actionClientes.listaClientes}"
		var="item" rows="10" style="width: 100%;"
		binding="#{actionClientes.table}">
		<f:facet name="header">
			<h:outputText value="Lista de Clientes" />
		</f:facet>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Nome" />
			</f:facet>
			<h:outputText value="#{item.nome}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Endereço" />
			</f:facet>
			<h:outputText value="#{item.endereco}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Bairro" />
			</f:facet>
			<h:outputText value="#{item.bairro}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Cidade" />
			</f:facet>
			<h:outputText value="#{item.cidade}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Uf" />
			</f:facet>
			<h:outputText value="#{item.uf}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Cep" />
			</f:facet>
			<h:outputText value="#{item.cep}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Tel Residência" />
			</f:facet>
			<h:outputText value="#{item.telefone}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Celular" />
			</f:facet>
			<h:outputText value="#{item.celular}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Contato" />
			</f:facet>
			<h:outputText value="#{item.contato}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="E-mail" />
			</f:facet>
			<h:outputText value="#{item.email}" />
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Alterar" />
			</f:facet>
			<a4j:commandButton image="imagens/alterar_cliente.png"
				alt="Alterar dados do cliente"
				action="#{actionClientes.recuperaCliente}"
				reRender="panelCliente"
				oncomplete="Richfaces.showModalPanel('panelCliente');">
				<f:setPropertyActionListener value="#{item}" target="#{actionClientes.clientes}"/>
				<f:param id="idAlterar" name="idAlterar" value="#{item.codCliente}" />
			</a4j:commandButton>
		</rich:column>
		<rich:column>
			<f:facet name="header">
				<h:outputText value="Excluir" />
			</f:facet>
			<h:commandButton image="imagens/delete.png"
				alt="Excluir cadastro do cliente"
				action="#{actionClientes.excluirCliente}">
				<f:param id="id" name="id" value="#{item.codCliente}" />
			</h:commandButton>
		</rich:column>
	</rich:dataTable>
	<rich:datascroller align="left" for="tbclientes" />
</a4j:region>
</a4j:form>
<h:messages showDetail="false" showSummary="true" layout="table"
	infoStyle="color:blue; font-family:verdana; font-size:11px;" />




<!-- Modal Panel para alteração dos dados do cliente -->

	<rich:modalPanel id="panelCliente" width="700" height="400">
		<f:facet name="header">
			<h:outputText value="Alteração Cadastral" />
		</f:facet>
		<f:facet name="controls">
			<h:graphicImage value="/imagens/close.png"
				onclick="Richfaces.hideModalPanel('panelCliente')" />
		</f:facet>
		<a4j:form id="formModal" ajaxSubmit="true" reRender="panelCliente">
		<h:panelGrid columns="4" id="alterar">
			<h:column>
				<h:outputText value="Nome:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.nome}" required="true"
					requiredMessage="Preencha o campo Nome" size="40" />
			</h:column>
			<h:column>
				<h:outputText value="Endereço:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.endereco}" size="40" />
			</h:column>
			<h:column>
				<h:outputText value="Bairro:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.bairro}" />
			</h:column>
			<h:column>
				<h:outputText value="Cidade:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.cidade}" />
			</h:column>
			<h:column>
				<h:outputText value="UF:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.uf}" maxlength="2"
					size="2" />
			</h:column>
			<h:column>
				<h:outputText value="CEP:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.cep}" />
			</h:column>
			<h:column>
				<h:outputText value="Telefone Residência:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.telefone}"
					required="true" requiredMessage="Preencha o campo telefone" />
			</h:column>
			<h:column>
				<h:outputText value="Telefone Celular:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.celular}" />
			</h:column>
			<h:column>
				<h:outputText value="Outro Contato:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.contato}" />
			</h:column>
			<h:column>
				<h:outputText value="E-mail:" />
			</h:column>
			<h:column>
				<h:inputText value="#{item.email}" size="50" />
			</h:column>
		</h:panelGrid>
		<a4j:commandButton value="Alterar" id="idAlterar"
			action="#{actionClientes.atualizarClientes}">
		</a4j:commandButton>
		<rich:componentControl for="alterarCliente" attachTo="alterar"
			operation="show" event="onclick" />
		</a4j:form>	
	</rich:modalPanel>
<!-- Fim do modal panel -->

E aqui está o método que me retorna o registro que selecionei pelo ID…

public Clientes recuperaCliente(){
		
	Clientes beanCliente = new Clientes();
	  try {
		beanCliente = (Clientes)((HttpServletRequest)FacesContext.getCurrentInstance().getExternalContext().getRequest()).getAttribute("item");
			
	} catch (Exception e) {
			e.printStackTrace();
			FacesContext.getCurrentInstance().addMessage("erro",
					new FacesMessage("Falha ao recuperar registro do cliente!"));
		}
		
		return beanCliente; //Me retorna o Bean Populado!!
	}

Quando executo a aplicação e clico na opção para alterar ele abre o modal nomalmente mas com os Inputs vázios!!

Qualquer ajuda agradeço!! =)

8 Respostas

alvarogomes 6 de out. de 2009

Ola kelvis, td bem??

de acordo com o codigo que voce mostrou o seu manage bean se chama “actionClientes” certo?

caso o seu manage bean seja de sessao, vou te dar a dica

muda o codigo do seu BackBean mais ou menos pra isso

public class ActionClientes {

   private Clientes cliente = new Clientes();
    
   public void setCliente(Clientes valor) {
         this.cliente = valor;
   }

   public Clientes getCliente() {
         return this.cliente;
   }


   public void recuperaCliente(){   
           
    Clientes beanCliente = new Clientes();   
      try {   
        beanCliente = (Clientes)((HttpServletRequest)FacesContext.getCurrentInstance().getExternalContext().getRequest()).getAttribute("item");   
               
    } catch (Exception e) {   
            e.printStackTrace();   
            FacesContext.getCurrentInstance().addMessage("erro",   
                    new FacesMessage("Falha ao recuperar registro do cliente!"));   
        }   
           
        this.cliente = beanCliente; //Me retorna o Bean Populado!!   
    }  

}

ai no jsp quando for referenciar os campos do modalPanel referencie assim

<rich:modalPanel id="panelCliente" width="700" height="400">   
        <f:facet name="header">   
            <h:outputText value="Alteração Cadastral" />   
        </f:facet>   
        <f:facet name="controls">   
            <h:graphicImage value="/imagens/close.png"   
                onclick="Richfaces.hideModalPanel('panelCliente')" />   
        </f:facet>   
        <a4j:form id="formModal" ajaxSubmit="true" reRender="panelCliente">   
        <h:panelGrid columns="4" id="alterar">   
            <h:column>   
                <h:outputText value="Nome:" />   
            </h:column>   
            <h:column>   
                <h:inputText value="#{actionClientes.cliente.nome}" required="true"   
                    requiredMessage="Preencha o campo Nome" size="40" />   
            </h:column>   

            ...

pois o problema é que voce esta referenciando o valor das caixas de texto do modalPanel para o objeto “item” sendo que o mesmo nao existe.
ele é na sua pagina somente a variavel que referencia a tupla dentro do DataTable.
Fazendo desta maneira voce estara referenciando um atributo do seu BackBean “actionClientes”.

espero que tenha explicado de forma simples.

qualquer coisa, estamos ae…
valeu

kelvis 7 de out. de 2009

Opa… Vou tentar aqui Brother… Ai posto o resultado!!

Obrigado!! =)

kelvis 7 de out. de 2009

Caracas brotheerrrrrr… Genial!! Resolveu que é uma beleza!!! Agora entendi… ficou assim:

Esse cara eu já tinha mas não tava usando…

private Clientes clientes = new Clientes();
	
	public Clientes getClientes() {
		return clientes;
	}

	public void setClientes(Clientes clientes) {
		this.clientes = clientes;
	}

depois adaptei o método de recuperar para:

public void recuperaCliente(){
		
		Clientes beanCliente = new Clientes();
		try {
			beanCliente = (Clientes)((HttpServletRequest)FacesContext.getCurrentInstance().getExternalContext().getRequest()).getAttribute("item");
			
		} catch (Exception e) {
			e.printStackTrace();
			FacesContext.getCurrentInstance().addMessage("erro",
					new FacesMessage("Falha ao recuperar registro do cliente!"));
		}
		
		this.clientes = beanCliente;
	}

meu command button permaneceu no mesmo esquema

<a4j:commandButton image="imagens/alterar_cliente.png"
				alt="Alterar dados do cliente"
				action="#{actionClientes.recuperaCliente}"
				reRender="panelCliente"
				oncomplete="Richfaces.showModalPanel('panelCliente');">
				<f:param id="idAlterar" name="idAlterar" value="#{item.codCliente}" />
			</a4j:commandButton>

e no modal ficou:

<a4j:form id="formModal" ajaxSubmit="true" reRender="panelCliente">
		<h:panelGrid columns="4" id="alterar">
			<h:column>
				<h:outputText value="Nome:" />
			</h:column>
			<h:column>
				<h:inputText value="#{actionClientes.clientes.nome}" required="true"
					requiredMessage="Preencha o campo Nome" size="40" />
			</h:column>

Funfou!!
Cara… Muito Obrigado!! Isso ai vai servir pra uma galera!! Abraçossss

alvarogomes 10 de out. de 2009

Na hora, valeu!

mairon 16 de jul. de 2012

fala ai galera!

esse tópico me ajudou antes e acho que pode me ajudar agora.

eu consegui popular o modalPanel numa boa, mas quando submeto a alteração ele não ta settando na ManagedBeanClienteFisico.clienteFisico.

o método que popula o bean:

public String callUpdate(){
		    	
       	this.clienteFisico = clienteFisicoDao.findByCod(
    			                  new Integer(FacesContext.getCurrentInstance().
    			                		  getExternalContext().getRequestParameterMap().get("codCliente")));
    	
				
		return null;
	}

meu modalPanel:

//  ta dentro de um include no modalPanel

<f:subview id="update-cliente-fisico">

		<a4j:form id="updateclientefisico" ajaxSubmit="true">

			<h:panelGrid border="0" columns="6">

				<h:outputLabel value="Codigo Cliente" />
				<h:inputText
					value="#{ManagedBeanClienteFisico.clienteFisico.codigo}"
					readonly="true" size="4" />
                                 
                                 ...

                                <h:outputLabel value="Senha:" />
				<h:inputSecret id="idsenha" value="#{ManagedBeanClienteFisico.clienteFisico.login.senha}"
					required="true"
					requiredMessage="Informe A Senha do Login Corretamente, entre 4 e 8 digitos">
					<f:validateLength minimum="4" maximum="8" />
				</h:inputSecret>

				<h:column></h:column>
				<h:column></h:column>

				<f:facet name="footer">
					<a4j:commandButton id="cadastroClienteFisico" value="Cadastrar"
						 action="#{ManagedBeanClienteFisico.update}" />

				</f:facet>

</f:subview>

mas na hora que submeto, gera erro por conta do objeto da null:

public String update() {
		// TODO Auto-generated method stub
		FacesContext fc = FacesContext.getCurrentInstance();
		String msg = "";	

    	System.out.println("@@@@@@@@ THIS: " + this.clienteFisico); // retorna null
    	System.out.println("@@@@@@@@ NO THIS: " + clienteFisico); // retorna null
		
		if(valida()){			
			
			try {								
				clienteFisicoDao.update(clienteFisico);
				msg = "Atualizado com sucesso";	
				tableList();
			} catch (Exception e) {
				// TODO: handle exception
				e.printStackTrace();
				msg = "ERRO";
				System.out.println(msg);
			}finally{				
				fc.addMessage("cadastrartipoanimal", new FacesMessage(msg));
				this.clienteFisico = new ClienteFisico();	
			}
		}		
		return null;
	}

se alguém puder ajudar eu agradeço. ABRAÇOS!

marlonmca 16 de jul. de 2012

Quando isso acontece comigo eu começo a fazer testes pra ver se alguma tag está dando conflito.
Por exemplo: eu troco o a:form por h:form ou removo o ajaxSubmit ou troco de botão.
Eu vou testando até que descubro. Não conheço nenhuma explicação técnica para isso.

Outra coisa que vc pode ver é o nome dado ao bean “ManagedBeanClienteFisico”. Não é comum usar a primeira palavra com a primeira letra maiúscula. Veja se isso está certo.

mairon 17 de jul. de 2012

marlonmca:
Quando isso acontece comigo eu começo a fazer testes pra ver se alguma tag está dando conflito.
Por exemplo: eu troco o a:form por h:form ou removo o ajaxSubmit ou troco de botão.
Eu vou testando até que descubro. Não conheço nenhuma explicação técnica para isso.

Outra coisa que vc pode ver é o nome dado ao bean “ManagedBeanClienteFisico”. Não é comum usar a primeira palavra com a primeira letra maiúscula. Veja se isso está certo.

pow cara, vou testar novamente. mas a respeito do nome não tem nada a ver, por que ta gravando e ta listando com esse nome, e como informei ta me jogando na view os dados do cliente, mas não to conseguindo é retornar pra Managed com os dados.

mairon 18 de jul. de 2012

[RESOLVIDO]

foi só colocar um keepAlive pra funcionar. muito bom!

meu modalPanel antes estava assim:

//  ta dentro de um include no modalPanel  
  
<f:subview id="update-cliente-fisico">  
  
        <a4j:form id="updateclientefisico" ajaxSubmit="true">  
  
            <h:panelGrid border="0" columns="6">  
  
                <h:outputLabel value="Codigo Cliente" />  
                <h:inputText  
                    value="#{ManagedBeanClienteFisico.clienteFisico.codigo}"  
                    readonly="true" size="4" />  
                                   
                                 ...  
  
                                <h:outputLabel value="Senha:" />  
                <h:inputSecret id="idsenha" value="#{ManagedBeanClienteFisico.clienteFisico.login.senha}"  
                    required="true"  
                    requiredMessage="Informe A Senha do Login Corretamente, entre 4 e 8 digitos">  
                    <f:validateLength minimum="4" maximum="8" />  
                </h:inputSecret>  
  
                <h:column></h:column>  
                <h:column></h:column>  
  
                <f:facet name="footer">  
                    <a4j:commandButton id="cadastroClienteFisico" value="Cadastrar"  
                         action="#{ManagedBeanClienteFisico.update}" />  
  
                </f:facet>  
  
</f:subview>

meu modalPanel agora ta assim:

//  ta dentro de um include no modalPanel  
  
<f:subview id="update-cliente-fisico">  
  
        <a4j:keepAlive beanName="ManagedBeanClienteFisico"/>

        <a4j:form id="updateclientefisico" ajaxSubmit="true">  
  
            <h:panelGrid border="0" columns="6">  
  
                <h:outputLabel value="Codigo Cliente" />  
                <h:inputText  
                    value="#{ManagedBeanClienteFisico.clienteFisico.codigo}"  
                    readonly="true" size="4" />  
                                   
                                 ...  
  
                                <h:outputLabel value="Senha:" />  
                <h:inputSecret id="idsenha" value="#{ManagedBeanClienteFisico.clienteFisico.login.senha}"  
                    required="true"  
                    requiredMessage="Informe A Senha do Login Corretamente, entre 4 e 8 digitos">  
                    <f:validateLength minimum="4" maximum="8" />  
                </h:inputSecret>  
  
                <h:column></h:column>  
                <h:column></h:column>  
  
                <f:facet name="footer">  
                    <a4j:commandButton id="cadastroClienteFisico" value="Cadastrar"  
                         action="#{ManagedBeanClienteFisico.update}" />  
  
                </f:facet>  
  
</f:subview>

Criado 6 de outubro de 2009

Ultima resposta 18 de jul. de 2012

Respostas 8

Participantes 4

8 Respostas

Topicos relacionados