[JSF] Alteração de componentes de acordo com valor de outro com AJAX + h:selectOneRadio + reRender

22 01 2010

Essa semana passei uma manha inteira tentado fazer que um componente se modificasse de acordo com o valor de outro componente em JSF.

Ex:

radio button [Pessoa física || pessoa jurídica]

Se pessoa física selecionado então
	trocar label e input para RG
Se não
	se pessoa jurídica selecionado então
		trocar label e input para PJ

Solução:

O pulo do gato está na criação de um painel superior, no caso do exemplo abaixo, o painel:  painelDeTipos

<a4j:region id="slotTypePortPanelGroup">
<h:selectOneRadio value="#{pessoa.tipo}" immediate="true">
<f:selectItem itemLabel="Físca" itemValue="fisica" />
<f:selectItem itemLabel="Júridica" itemValue="juridica" />
<a4j:support event="onchange" reRender="painelDeTipos"
action="#{pessoa.tipoDePessoaChanged}" />
</h:selectOneRadio>

Acima é declarado o radion com as opções, sendo que na mudança é chamado o método pessoa.tipoDePessoaChanged e renderizado o painel

<h:panelGroup id="painelDeTipos">

<h:panelGroup rendered="#{pessoa.isTipoPJ}" id="pessoaPJGroup">
<h:outputLabel value="PJ:" />
<h:inputText id="pjInput" value="#{pessoa.pj}" />
</h:panelGroup>

<h:panelGroup rendered="#{not pessoa.isTipoPJ}" id="pessoaFSGroup">
<h:outputLabel value="RG:" />
<h:inputText id="rgInput" value="#{pessoa.rg}" />
</h:panelGroup>

</h:panelGroup>
</a4j:region>

Acima é declarado o painel que contem os dois tipos de entrada de acordo com a opção selecionada no radion button. com as opções, sendo que na mudança.

   public String tipoDePessoaChanged() {
        if (tipo.equals("juridica")) {
            setTipoPJ("true");
        } else {
            setTipoPJ("false");
        }
        return "";
    }

Acima segue a declaração do método dentro do bean pessoa, o atributo tipo é String mesmo.

Anúncios

Ações

Information

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: