JSF: Renderizando componentes seletivamente com <a4j:support> (SOLUCIONADO)

2 de maio de 2008 7 respostas

Rodrigo_Manhaes 2 de maio de 2008

Bom dia!

Tenho o seguinte problema: há um combo para a seleção do país de origem de uma pessoa. Caso o país de origem seja o Brasil (default), há um combo com os estados para que se selecione a naturalidade. Caso não seja o Brasil, este combo deve desaparecer e, em seu lugar, aparecer um campo para o ano de chegada da pessoa ao Brasil e a sua naturalidade (como input).

As tecnologias utilizadas são JSF/Facelets. Implementei isto com ajax4jsf do seguinte modo:

<p>
    <label jsfc="h:outputLabel" for="paisOrigem">Pa&#x00ED;s de Origem</label>
    <h:selectOneMenu id="paisOrigem" immediate="true"
        value="#{pessoa.pessoa.paisOrigem}" binding="#{pessoa.paisOrigemSelect}">
        <f:selectItems value="#{pato.paisItens}" id="paisOrigemItens"/>
        <a4j:support event="onchange" reRender="naturalidadeBrasileiro,infosEstrangeiro" 
            action="#{pessoa.paisOrigemOnChange}"/>
    </h:selectOneMenu>
</p>

<h:panelGroup rendered="#{not pessoa.pessoa.estrangeiro}" id="naturalidadeBrasileiro"
    layout="block">
    <p>
        <label jsfc="h:outputLabel" for="naturalidade">Naturalidade</label>
        <select jsfc="h:selectOneMenu" id="naturalidade" value="#{pessoa.pessoa.naturalidade}">
            <option jsfc="f:selectItems" value="#{pato.estadosItem}" />
        </select>
    </p>
</h:panelGroup>

<h:panelGroup rendered="#{pessoa.pessoa.estrangeiro}" id="infosEstrangeiro"
    layout="block">
    <p>
        <label jsfc="h:outputLabel" for="anoChegada">Ano Chegada</label>
        <input jsfc="h:inputText" type="text" id="anoChegada" maxlength="4" size="4"
            value="#{pessoa.pessoa.anoChegada}" />
    </p>
                    
    <p>
        <label jsfc="h:outputLabel" for="naturalidadeEstrangeiro">Naturalidade</label>
        <input jsfc="h:inputText" type="text" id="naturalidadeEstrangeiro" 
            maxlength="80" size="40" value="#{pessoa.pessoa.naturalidadeEstrangeiro}" />
    </p>

</h:panelGroup>

O método paisOrigemOnChange() roda a contento no sevidor e altera o resultado do metodo isEstrangeiro(), consultado nos atributos rendered dos dois .

Minha dúvida é: tem algo de errado no que eu fiz? Deixei de fazer algo? Não consegui achar nenhum exemplo disto na web e, lendo a documentação oficial, achei que fosse funcionar.

7 Respostas

jukkinha 2 de mai. de 2008

tenta colocar um panelGroup (ou outro componente) como pai dos panels que você está tentando carregar via ajax e reRerenderizar esse panelGroup

nao funciona colocando direto nos panels pq eles não sendo renderizados não vão estar acessíveis no código html da tela

Rodrigo_Manhaes 3 de mai. de 2008

Funcionou perfeitamente, muito obrigado!!

shyricosai 3 de mai. de 2008

Rodrigo

Estou tendo o mesmo problema em uma aplicacao aqui.
Você poderia postar o código com a alteracão que você fez para funcionar?
Desde já agradeco.

Rodrigo_Manhaes 5 de mai. de 2008

Aí vai

<p>
    <label jsfc="h:outputLabel" for="paisOrigem">Pa&#x00ED;s de Origem</label>
    <h:selectOneMenu id="paisOrigem" immediate="true"
        value="#{pessoa.pessoa.paisOrigem}" binding="#{pessoa.paisOrigemSelect}">
        <f:selectItems value="#{pato.paisItens}" id="paisOrigemItens"/>
        <a4j:support event="onchange" reRender="infosNacionalidade" 
            action="#{pessoa.paisOrigemOnChange}" id="ajaxPaisOrigem"/>
    </h:selectOneMenu>
</p>
                
<h:panelGroup id="infosNacionalidade">

    <h:panelGroup rendered="#{not pessoa.pessoa.estrangeiro}" id="naturalidadeBrasileiro"
        layout="block">
        <p>
	    <label jsfc="h:outputLabel" for="naturalidade">Naturalidade</label>
	    <select jsfc="h:selectOneMenu" id="naturalidade" value="#{pessoa.pessoa.naturalidade}">
	        <option jsfc="f:selectItems" value="#{pato.estadosItem}" />
	    </select>
	</p>	
    </h:panelGroup>
	
    <h:panelGroup rendered="#{pessoa.pessoa.estrangeiro}" id="infosEstrangeiro"
        layout="block">
        <p>
	    <label jsfc="h:outputLabel" for="anoChegada">Ano Chegada</label>
	    <input jsfc="h:inputText" type="text" id="anoChegada" maxlength="4" size="4"
	        value="#{pessoa.pessoa.anoChegada}" />
	</p>
	                    
	<p>
	    <label jsfc="h:outputLabel" for="naturalidadeEstrangeiro">Naturalidade</label>
	    <input jsfc="h:inputText" type="text" id="naturalidadeEstrangeiro" 
	        maxlength="80" size="40" value="#{pessoa.pessoa.naturalidadeEstrangeiro}" />
	</p>	
    </h:panelGroup>
	                
</h:panelGroup>

No managed bean:

private UISelectOne paisOrigemSelect;
    
public String paisOrigemOnChange()
{
    Pais paisOrigem = (Pais) paisOrigemSelect.getValue();
    this.pessoa.setPaisOrigem(paisOrigem);
    return null;
}

shyricosai 5 de mai. de 2008

Vlw, Obrigado

tarcisio.angelo 17 de jul. de 2009

Olá caros amigos, sou novo com jsf, e estou querendo simplesmente renderizar componentes.

Segue o código, se alguem poder me ajudar!

quero apena mostrar o pessoa fisica e juridica.

&lt;rich:panel&gt;
						&lt;h:panelGrid id="teste" columns="1"&gt;
							&lt;ui:define name="label"&gt;Tipo Pessoa&lt;/ui:define&gt;
                            &lt;h:selectOneRadio value="#{richFacesBean.formaPagamento}"&gt;
                                &lt;f:selectItem  itemValue="1" itemLabel="Pessoa Fisica" /&gt;
                                &lt;f:selectItem itemValue="2" itemLabel="Pessoa Juridica" /&gt;
                                &lt;a4j:support ajaxSingle="true" event="onclick" reRender="painel1,painel2"/&gt;
                            &lt;/h:selectOneRadio&gt;
                        &lt;/h:panelGrid&gt;
			
                        &lt;h:panelGrid id="painel1" rendered="#{richFacesBean.formaPagamento eq 1}"&gt;
                            Pessoa Fisica
						&lt;/h:panelGrid&gt;


						&lt;h:panelGrid id="painel2" rendered="#{richFacesBean.formaPagamento eq 2}"&gt;
                            Pessoa Juridica
                        &lt;/h:panelGrid&gt;
            &lt;/rich:panel&gt;

Monica_Bolsas_da_Roc 1 de mar. de 2010

Bom dia pessoal,

Sou iniciante no JSF e estou desenvolvendo um protótipo onde preciso renderizar dois painéis dentro de uma única janela modal., O primeiro painel contém o form de consulta de CPF e o segundo traz o retorno desta consulta. Adequei o meu código a solução aqui postada sobre ter um “painel pai” e reRenderizá-lo, e ter uma variável booleana no manageBean para tratar a visibilidade dos painéis. A idéia é: quando clicar no botão de consulta o painel de consulta deveria ser omitido e o de retorno de dados exibido. Só que quando clico no botão de consulta do primeiro painel, nada acontece. Pelo console verifico que o método booleano isVisivel() está sendo chamado quando chamo a página. Mas após isso, ao acionar o botão de consulta, observo que nada aparece no console. Alguém pode me ajudar ??? Segue abaixo o código da página e o do manageBean. Lembro que trata-se apenas de protótipo.

Desde já agradeço a ajuda dos feras.

Abçs.
Mônica.

Página consultar_cpf.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:a4j="http://richfaces.org/a4j"    
	xmlns:rich="http://richfaces.org/rich"
	xmlns:serpro="http://www.demoiselle.gov.br">	

	
    <rich:modalPanel id="panelConsultaCPF" styleClass="modalForms modalFormsAbas" width="1000" height="400">
        <f:facet name="header">
            <h:panelGroup>
                <h:outputText value="Consultar CPF"></h:outputText>
            </h:panelGroup>
        </f:facet>
		<f:facet name="controls">
			<a4j:commandButton styleClass="closeModal" onclick="Richfaces.hideModalPanel('panelConsultaCPF')" />
		</f:facet>
 			
  		<!-- PAINEL CONTAINER -->
		<f:view>
		<a4j:form>

  		<a4j:outputPanel id="container"> 		
  		
  			<!-- PAINEL ENTRADA CPF -->
	  			
	  			<a4j:outputPanel id="visivel" rendered="#{cpfMB.visivel}" layout = "block">
						<fieldset class="line">
							<legend class="legend">Informe CPF</legend>
								<div class="line lineForm">
									<div class="unit size1of1 unitGroup noBorder">
										<div class="unit unitData">
											<h:inputText value="#{cpfMB.numero}" styleClass="medium" />
										</div>
									</div>
									<span class="line containerButtons">
										<a4j:commandButton actionListener="#{cpfMB.consultarCPF}" value="Consultar"
                                         styleClass="button" reRender="container"/>
									</span>
								</div>
						</fieldset>
				</a4j:outputPanel>

  			<!-- FIM PAINEL ENTRADA CPF -->

			
  			<!-- PAINEL RETORNO DADOS CPF -->	
	  			<a4j:outputPanel id="invisivel" rendered="#{!cpfMB.visivel}" layout = "block">
					<div class="line containerButtons">						
					    <a4j:commandButton actionListener="#{cpfMB.consultarCPF}" value="Nova Consulta"
                             styleClass="buttonPage" reRender="container"/>								
						<a4j:commandButton styleClass="buttonPage" action="#" value="Fechar [X]"
                             onclick="javascript:self.close()"/>
					</div>
				</a4j:outputPanel>
  			<!-- FIM PAINEL RETORNO DADOS CPF -->
  		
  		</a4j:outputPanel>	

		</a4j:form>
		</f:view>
  		<!-- FIM PAINEL CONTAINER -->
  				
	</rich:modalPanel>

</html>

Código do ManageBean

import javax.faces.event.ActionEvent;

public class CPFMB {
	
        ...
	private boolean visivel = true;

	public void consultarCPF(ActionEvent e){

		this.setVisivel(false);
	}
	
        ...

	public void setVisivel(boolean visivel) {
		
		System.out.println("setVisivel");
		this.visivel = visivel;
	}

	public boolean isVisivel() {
		System.out.println("isVisivel");
		return visivel;
	}
}

Criado 2 de maio de 2008

Ultima resposta 1 de mar. de 2010

Respostas 7

Participantes 5

7 Respostas

Topicos relacionados