Renderizar campos de acordo com o h:SelectOneRadio selecionado

Nesse post vou mostrar como você pode renderizar novos campos na tela de acordo com o botão Radio selecionado utilizando JSF e Seam.

Vamos criar o caso de um cliente que esta cancelando a assinatura de um serviço, e no formulário de cancelamento existe um radio com alguns motivos de cancelamento como preço, perdeu o interesse, conteúdo fraco, outro. Porem ao clicar em outro deve ser renderizado na tela um campo para ele inserir a justificativa, bem, vamos la.

Primeiro vamos criar um Enum para a justificativa.

public enum JustificativaEnum {
   PRECO, PERDEU_INTERESSE, CONTEUDO_FRACO, OUTRO;
}

Agora na nossa view é onde a magia acontece.


<a4j:region id="motivoRadio">
   <h:selectOneRadio id="cancelamento" value="#{cancelamento.motivoCancelamento}" required="true">
<s:convertEnum />
        <s:enumItem enumValue="PRECO" label="Sem preenchimento" />

        <s:enumItem enumValue="PERDEU_INTERESSE" label="Sem preenchimento" />

        <s:enumItem enumValue="OUTRO" label="Outro" />

<a4j:support event="onclick" reRender="jutificativaField" />

   </h:selectOneRadio>
</a4j:region>



<a4j:outputPanel id="jutificativaField">
<s:decorate rendered="#{cancelamento.motivoCancelamento == 'OUTRO' id="justificativa" template="/layout/edit.xhtml">

<ui:define name="label"> Justificativa </ui:define>
        <h:inputText id="justificativa" value="#{avisoTolerancia.ocorrenciaString}" />
</s:decorate>
</a4j:outputPanel>


Pronto, toda vez que for clicado em um radio é feito o reRender do <a4j:outputPanel> quando for clicado em  OUTRO a área para inserir a justificativa sera renderizada.