Para cada opção renderizar um componente diferente [RESOLVIDO]

Front-end
#1

Olá pessoal, preciso de ajuda…

Estou desenvolvendo uma página JSF e preciso que os componentes sejam variáveis de acordo com as opções que o camarada escolher. Ouvi dizer que a única opção seria por Ajax e como não sei absolutamente NADA de Ajax, peço alguém que me de uma explicação…

Segue o código da tela:

<fieldset><legend>Ações</legend>
			<div class="linhaTipoE"> 

			<span class="label tamanho50">
			
			<h:selectOneMenu id="campo" value="#{MeuBean.campo}"> 
				<f:selectItem itemLabel="Nome" itemValue="1" />
				<f:selectItem itemLabel="Descrição" itemValue="2" />
				<f:selectItem itemLabel="Ativo" itemValue="3" />
				<f:selectItem itemLabel="Classificador" itemValue="4" />
	
	     		</h:selectOneMenu>
			 <h:selectOneMenu id="tipoComponente" value="#{MeuBean.operador}" >
			    <f:selectItem itemLabel="Igual a" itemValue="1" />
			    <f:selectItem itemLabel="Maior que" itemValue="2" />
			    <f:selectItem itemLabel="Maior ou igual a" itemValue="3" />
			    <f:selectItem itemLabel="Menor que" itemValue="4" />
			    <f:selectItem itemLabel="Menor ou igual a" itemValue="5" />
			    <f:selectItem itemLabel="Diferente de" itemValue="6" />
			    <f:selectItem itemLabel="Contém" itemValue="7" />
			    <f:selectItem itemLabel="Inicia com" itemValue="8" />
			    <f:selectItem itemLabel="Termina com" itemValue="9" />
			</h:selectOneMenu>
			<h:inputText
				 maxlength="250" value="#{MeuBean.valor}"/></span> 
			
			<h:commandButton id="botaoPesquisa" styleClass="botaoPrincipal" value="Pesquisar" action="#{MeuBean.Pesquisar}" />
			<h:commandButton id="botaoInserir" styleClass="botaoPrincipal" value="Inserir Novo"
				action="#{MeuBean.Incluir}">
			</h:commandButton>

Se eu escolher opção para o id=campo - Nome ou Descrição: renderizo um inputText…
Se eu escolher opção Ativo - renderizo um Select One Menu com duas opções(Sim/Não)…
Se eu escolher opção Classificador - renderizo um Select One Menu com duas opções(Incidente/Requisição)…
Sei que tem as tags a4j mas e dei uma olhada nuns códigos mas não soube adequar…
Alguém me ajuda?

#2

Tirei isso de um artigo da dev média. Acho que da um pontapé inicial. Se vc estiver usando o richfaces na tua aplicação é bem simples usar o ajax.

AJAX Requests

Existem diferentes formas para fazer que suas paginas enviem AJAX requests. Para isso, você pode usar as seguintes tags: <a4j:commandButton>, <a4j:commandLink>, <a4j:poll> e <a4j:support>.

Essas tags escondem do programador o JavaScript que é necessário para enviar AJAX requests, o que facilita muito o desenvolvimento de aplicações que utilizam essa tecnologia. Elas também permitem que você escolha quais componentes de sua pagina que serão ?modificados? após o AJAX response (você pode listar os IDs desses componentes através do atributo ?reRender?).

<a4j:commandButton> e <a4j:commandLink>: essas tags são usadas para enviar AJAX request através do evento ?onclick?.

<a4j:poll>: usada para enviar AJAX request em um determinado tempo.

<a4j:support>: permite que qualquer componente JSF faça AJAX request através de um determinado evento JavaScript: ?onkeyup?, ?onmouseover?, etc.

Exemplos:

[code]
<%@ taglib uri=“http://richfaces.org/a4j” prefix=“a4j”%>

<h:inputText value="#{pessoa.nome}">

    &lt;a4j:support event="onkeyup" reRender="texto"/&gt;

</h:inputText>

<h:outputText id=“texto” value="#{pessoa.nome}"/>

<h:form id=?form?>

    &lt;h:inputText value="#{pessoa.nome}"/&gt;

    &lt;h:inputText value="#{pessoa.rg}"/&gt;

    &lt;h:inputText value="#{pessoa.cpf}"/&gt;

    &lt;a4j:commandButton reRender="form" action="#{pessoa.atualizar}" value="Atualizar" oncomplete = ?alert(?Dados atualizados?)?/&gt;

</h:form>[/code]

#3

pessoal, tentei implementar de acordo com o que li e entendi. Vejam:

			<fieldset><legend>Ações</legend>
			<div class="linhaTipoE"> 

			<span class="label tamanho50">
			<h:selectOneMenu id="campo" value="#{MeuBean.campo}">
				<f:selectItem itemLabel="Nome" itemValue="1" />
				 <a4j:support event="onclick" reRender="texto"/>   
			
				<f:selectItem itemLabel="Descrição" itemValue="2" />
                                                                 <a4j:support event="onclick" reRender="texto"/> 

				<f:selectItem itemLabel="Ativo" itemValue="3" />
				 <a4j:support event="onclick" reRender="selectAtivo"/> 
				
				<f:selectItem itemLabel="Classificador"
					itemValue="4" />
                <a4j:support event="onclick" reRender="selectClassificador"/> 

			</h:selectOneMenu>
			 <h:selectOneMenu id="tipoComponente" value="#{MeuBean.operador}" >
			    <f:selectItem itemLabel="Igual a" itemValue="1" />
			    <f:selectItem itemLabel="Maior que" itemValue="2" />
			    <f:selectItem itemLabel="Maior ou igual a" itemValue="3" />
			    <f:selectItem itemLabel="Menor que" itemValue="4" />
			    <f:selectItem itemLabel="Menor ou igual a" itemValue="5" />
			    <f:selectItem itemLabel="Diferente de" itemValue="6" />
			    <f:selectItem itemLabel="Contém" itemValue="7" />
			    <f:selectItem itemLabel="Inicia com" itemValue="8" />
			    <f:selectItem itemLabel="Termina com" itemValue="9" />
			</h:selectOneMenu>
			<h:inputText id="texto"
				 maxlength="250" value="#{MeuBean.valor}"/></span> 
		   
		   <h:selectOneMenu id="selectAtivo" >
		     <f:selectItem itemLabel="Sim" itemValue="1" />
		     <f:selectItem  itemLabel="Não" itemValue="0" />
	       </h:selectOneMenu>
            
           <h:selectOneMenu id="selectClassificador" >
		    <f:selectItem itemLabel="Incidente" itemValue="2" />
		    <f:selectItem  itemLabel="Serviço" itemValue="1" />
		   </h:selectOneMenu>

Eu achei que de acordo com a opção selecionada ao clicar eu renderizaria um campo identificado pelo id, mas não funcionou…Tá renderizado tudo…É essa a sintaxe mesmo? Falta alguma propriedade? :frowning: :roll:

#4

pessoal, então…ninguém?

#5

Pessoal, já resolvi…vou postar a solução pra se algum dia alguém precisar:

 <span class="label tamanho50">
			
              <h:selectOneMenu id="campo" value="#{meuBean.campo}" >
              <f:selectItem itemLabel="Nome" itemValue="1" />
              <f:selectItem itemLabel="Descrição" itemValue="2" />
              <f:selectItem itemLabel="Ativo" itemValue="3" />
              <f:selectItem itemLabel="Classificador" itemValue="4" />
            
              <a4j:support event="onchange" ajaxSingle="true"  reRender="panel" 
                 	 action="#{meuBean.eventoPesquisa}" /> 
	</h:selectOneMenu>
		
	<a4j:outputPanel id="panel"  ajaxRendered="#{meuBean.eventoPesquisa}" layout="none" rendered="true" >
		
	<h:selectOneMenu id="operadores" value="#{meuBean.operador}" rendered="#{meuBean.exibirMenuOperadores}" >
	  <f:selectItems value="#{meuBean.comboOperadores}"/>
	</h:selectOneMenu>
			
	<h:inputText id="texto" rendered="#{meuBean.exibirSelectTexto}"
	              maxlength="250" value="#{meuBean.valor}" /> 
	        
	<h:selectOneMenu id="selectAtivo" rendered="#{meuBean.exibirSelectAtivo}" 
	   	value="#{meuBean.valor}" >
	<f:selectItems value="#{meuBean.comboAtivo}"  />
	</h:selectOneMenu>
         
         
           <h:selectOneMenu id="selectClassificador" rendered="#{meuBean.exibirSelectClassificador}"
                      value="#{meuBean.valor}">
               <f:selectItems value="#{meuBean.comboClassificador}" />  
           </h:selectOneMenu>
          </a4j:outputPanel>
  </span>

Falow!!!

#6