Adicionar campos dinâmicamente JSF

2 de dezembro de 2011 19 respostas

Guitar_Men 2 de dezembro de 2011

Bom dia pessoal,
tenho uma necessidade aqui, e não consegui atender ainda por falta de conhecimento. Eu tenho um h:inputText que recebe um valor numérico. Porém eu preciso que, ao sair desse campo (um lost focus por exemplo) sejam criados X inputText. Esse X é o valor fornecido no primeiro inputText.
Ex:
Digite o Valor: 3 (ao sair do campo, ou coisa parecida)
<h:inputText 1 >
<h:inputText 2 >
<h:inputText 3 >

Alguém ja fez algo parecido ???

19 Respostas

Alexandre_Saudate 2 de dez. de 2011

Explique um pouco melhor a regra. Se for muito complexo, você pode tentar criar um componente. Se for um pouco mais simples, você pode usar o a4j:repeat do Ajax4JSF e Richfaces.

[]'s

surfzera 2 de dez. de 2011

Dae, cara eu faço isso com javascript mais ou menos assim ve se ajuda.

totals++;
        tbl = document.getElementById("tbVariaveisCalculo");
        var novaLinha = tbl.insertRow(-1);
        
        novaLinha.id= "LINHA"+totals;
        var novaCelula;

        if(totals%2==0) cl = "#F5E9EC";
        else cl = "#FBF6F7";

        var str = document.getElementById("inputVariavelNome").value;
        str +="<input type=hidden id='variavels["+(totals-1)+"].deNomeVariavel'   name='variavels["+(totals-1)+"].deNomeVariavel' value='"+str+"'  />";
        //coluna nome
        novaCelula = novaLinha.insertCell(0);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor = cl;
        novaCelula.innerHTML = str;
    

        var str = document.getElementById("inputVariavelValor").value;
        str +="<input type=hidden id='variavels["+(totals-1)+"].vrReferencia'   name='variavels["+(totals-1)+"].vrReferencia' value='"+str+"'  />";
        //coluna valor
        novaCelula = novaLinha.insertCell(1);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor = cl;
        novaCelula.innerHTML = str;

Você deve fazer um loop antes pra escrever quantas linhas quiser… outra coisa nessa situacao eu fiz pra ser incluida valores em uma tabela, mais você pode usar o exemplo pra qualquer coisa.

leonardobhbr 2 de dez. de 2011

Guitar_Men:
Bom dia pessoal,
tenho uma necessidade aqui, e não consegui atender ainda por falta de conhecimento. Eu tenho um h:inputText que recebe um valor numérico. Porém eu preciso que, ao sair desse campo (um lost focus por exemplo) sejam criados X inputText. Esse X é o valor fornecido no primeiro inputText.
Ex:
Digite o Valor: 3 (ao sair do campo, ou coisa parecida)
<h:inputText 1 >
<h:inputText 2 >
<h:inputText 3 >

Alguém ja fez algo parecido ???

Bom dia amigo estou com o mesmo problema, a revista mundoJ 45 tem um artigo usando JSTL
http://www.mundoj.com.br/45conteudo.shtml

o meu caso preciso de algo mais complexo que seria a criação de CRUD’s dinamicamente essa solução não é viavel para mim.

Atté onde eu vi ou terei que criar via BackingBean binding ou Criar um UIComponent mesmo, se voce chegar em alguma conclusão posta ai

ibira 2 de dez. de 2011

Aqui na empresa em que trabalho, foi criado uma estrutura que faz os componentes em JSF dinamicamente.
Dependendo da necessidade (que acho que é o seu caso) é interessante, criamos os componentes como objetos mesmo (new HtmlInputtext() - da biblioteca do JSF) e adicionamos na árvore de componentes do JSF, dentro de um Panel por exemplo.

Já respondi outra pessoa aqui no forum com esse mesmo problema…

Guitar_Men 2 de dez. de 2011

Pessoal, eu avaliei todas as dicas e acabei indo pelo seguinte caminho:

<h:inputText value="#{meuBean.quantidade}" id="teste">
   <a4j:support event="onkeyup" reRender="divRecarregar"/>
</h:inputText>
   <div id="divRecarregar" >
      <c:forEach begin="0" end="#{meuBean.quantidade}" step="1">
         <h:inputText value=""/>
   </c:forEach>
</div>

Coloquei um breakpoint no meu bean e aparentemente o valor quantidade está sendo setado e chamado. Porém esse forach não esta iterando sobre o valor. Alguém tem alguma idéia do que possa ser ?

ibira 2 de dez. de 2011

Dessa forma provavelmente você não vai saber qual caixa de texto possui cada valor… Você vai precisar de id para o componente…

Alexandre_Saudate 2 de dez. de 2011

Guitar_Men:
Pessoal, eu avaliei todas as dicas e acabei indo pelo seguinte caminho:
<h:inputText value="#{meuBean.quantidade}" id="teste">
   <a4j:support event="onkeyup" reRender="divRecarregar"/>
</h:inputText>
   <div id="divRecarregar" >
      <c:forEach begin="0" end="#{meuBean.quantidade}" step="1">
         <h:inputText value=""/>
   </c:forEach>
</div>
Coloquei um breakpoint no meu bean e aparentemente o valor quantidade está sendo setado e chamado. Porém esse forach não esta iterando sobre o valor. Alguém tem alguma idéia do que possa ser ?

Se você usa o a4j, é mais vantagem usar a4j:repeat para isso.

[]'s

Guitar_Men 2 de dez. de 2011

asaudate:
Guitar_Men:
Pessoal, eu avaliei todas as dicas e acabei indo pelo seguinte caminho:
<h:inputText value="#{meuBean.quantidade}" id="teste">
   <a4j:support event="onkeyup" reRender="divRecarregar"/>
</h:inputText>
   <div id="divRecarregar" >
      <c:forEach begin="0" end="#{meuBean.quantidade}" step="1">
         <h:inputText value=""/>
   </c:forEach>
</div>
Coloquei um breakpoint no meu bean e aparentemente o valor quantidade está sendo setado e chamado. Porém esse forach não esta iterando sobre o valor. Alguém tem alguma idéia do que possa ser ?
Se você usa o a4j, é mais vantagem usar a4j:repeat para isso.

[]'s

Interessante, nunca trabalhei com isso, você teria algum exemplo para me passar ?

Alexandre_Saudate 2 de dez. de 2011

Guitar_Men:
asaudate:
Guitar_Men:
Pessoal, eu avaliei todas as dicas e acabei indo pelo seguinte caminho:
<h:inputText value="#{meuBean.quantidade}" id="teste">
   <a4j:support event="onkeyup" reRender="divRecarregar"/>
</h:inputText>
   <div id="divRecarregar" >
      <c:forEach begin="0" end="#{meuBean.quantidade}" step="1">
         <h:inputText value=""/>
   </c:forEach>
</div>
Coloquei um breakpoint no meu bean e aparentemente o valor quantidade está sendo setado e chamado. Porém esse forach não esta iterando sobre o valor. Alguém tem alguma idéia do que possa ser ?
Se você usa o a4j, é mais vantagem usar a4j:repeat para isso.

[]'s
Interessante, nunca trabalhei com isso, você teria algum exemplo para me passar ?

http://livedemo.exadel.com/richfaces-demo/richfaces/repeat.jsf?tab=usage&cid=763258

Guitar_Men 2 de dez. de 2011

asaudate:
Guitar_Men:
asaudate:
Guitar_Men:
Pessoal, eu avaliei todas as dicas e acabei indo pelo seguinte caminho:
<h:inputText value="#{meuBean.quantidade}" id="teste">
   <a4j:support event="onkeyup" reRender="divRecarregar"/>
</h:inputText>
   <div id="divRecarregar" >
      <c:forEach begin="0" end="#{meuBean.quantidade}" step="1">
         <h:inputText value=""/>
   </c:forEach>
</div>
Coloquei um breakpoint no meu bean e aparentemente o valor quantidade está sendo setado e chamado. Porém esse forach não esta iterando sobre o valor. Alguém tem alguma idéia do que possa ser ?
Se você usa o a4j, é mais vantagem usar a4j:repeat para isso.

[]'s
Interessante, nunca trabalhei com isso, você teria algum exemplo para me passar ?
http://livedemo.exadel.com/richfaces-demo/richfaces/repeat.jsf?tab=usage&cid=763258

Mesmo com o a4j:repeat não consegui. Pelos breakpoints que eu coloquei o valor esta sendo atribuido ao bean, porém na hora do repeat fazer a iteração o bean esta vaziu… Teria alguma outra forma de fazer ?? Até poderia ser um botão + do lado do meu input que quando eu clicasse ele adicionaria um campo de texto a mais…

Alexandre_Saudate 2 de dez. de 2011

Está dentro de um outputPanel?

Guitar_Men 2 de dez. de 2011

Esta dentro de um PanelGroup que tem outros campos…

Alexandre_Saudate 2 de dez. de 2011

Humn… não sei te dizer com certeza se influencia, mas tente colocar tudo (inclusive o panel group) dentro de um outputPanel.

[]'s

Guitar_Men 2 de dez. de 2011

Nada feito… Aquela segunda opção que eu dei de colocar um botão que ao ser clicado cria um novo componente é mas fácil de ser implementada ?

Alexandre_Saudate 2 de dez. de 2011

Teoricamente, sim. Eu fiz, uma vez, uma tela inteira (bem complexa, por sinal) baseado nisso, num botão enviando um evento e recarregando via Ajax. Pode ser que seja mais fácil, sim.

[]'s

Guitar_Men 2 de dez. de 2011

Teoricamente, sim. Eu fiz, uma vez, uma tela inteira (bem complexa, por sinal) baseado nisso, num botão enviando um evento e recarregando via Ajax. Pode ser que seja mais fácil, sim.

[]'s

Humm, pode me passar algum material sobre isso ??

Alexandre_Saudate 2 de dez. de 2011

Teoricamente, sim. Eu fiz, uma vez, uma tela inteira (bem complexa, por sinal) baseado nisso, num botão enviando um evento e recarregando via Ajax. Pode ser que seja mais fácil, sim.

[]'s

Humm, pode me passar algum material sobre isso ??

Não tenho mais… mas lembro que fiz tudo com richfaces e ajax4jsf, usando a:repeat e a:commandbutton (ou commandlink, não lembro).

Dá uma olhada no livedemo (aquele link que te passei), que a documentação que tem lá sobre os componentes é bem completa, deve ajudar bem.

[]'s

Guitar_Men 17 de jan. de 2012

Pessoal,
Consegui criar a rotina mas ainda estou com um problema. Tenho um h:inputText com um a4j:support no onkeyup que da um reRender numa área específica do meu form e chama uma action:

public void criarCampos() {
    	for(int i = 0; i < this.getNumero(); i++){
    		if (getValoresDinamicos() == null){
    			setValoresDinamicos(new ArrayList<String>());
    		}
    		getValoresDinamicos().add(new String());
    	}
    }

Basicamente eu faço um for e crio um array de strings com a quantidade de campos informada em getNumero(). E no JSF eu tenho o código:

<ui:repeat value="#{meuBean.valoresDinamicos}" var="tmp">
        <h:inputText value="#{tmp}"/>
    </ui:repeat>

para criar os campos “dinâmicamente”. Tudo funciona as mil maravilhas, mas quando dou o submit do form, esses valores não são setados…
Alguém consegue me dar uma “luz” ??

raf4ever 17 de jan. de 2012

Fiz um exemplozinho aqui rápido,ve se ajuda: Tela:

&lt;h:form&gt;
	  Quantidade:&lt;h:inputText value="#{testeController.quantidade}"/&gt;
	  &lt;h:commandButton value="Adicionar" actionListener="#{testeController.adicionar}"/&gt;
	    
	    &lt;a4j:outputPanel ajaxRendered="true"&gt;
	     &lt;rich:dataTable var="row" value="#{testeController.objetos}"&gt;
	           &lt;rich:columnGroup&gt;
	           &lt;rich:column&gt;
	             &lt;h:outputText value="#{row.nome}"/&gt;
	           &lt;/rich:column&gt;
	           &lt;/rich:columnGroup&gt;
	     
	     &lt;/rich:dataTable&gt;
	     &lt;/a4j:outputPanel&gt;
	  &lt;/h:form&gt;
	&lt;/ui:define&gt;

Controller:

public class TesteController {
	
	public List&lt;Objeto&gt; objetos;
	public Integer quantidade;
		
	public Integer getQuantidade() {
		return quantidade;
	}

	public void setQuantidade(Integer quantidade) {
		this.quantidade = quantidade;
	}

	public TesteController(){
		objetos = new ArrayList&lt;Objeto&gt;();
		Objeto obj = new Objeto("rafael");
		objetos.add(obj);
	}

	public List&lt;Objeto&gt; getObjetos() {
		return objetos;
	}

	public void setObjetos(List&lt;Objeto&gt; objetos) {
		this.objetos = objetos;
	}

	public void adicionar(ActionEvent evt ){
		for(int i=0;i&lt;quantidade;i++){
			Objeto obj = new Objeto();
			obj.setNome("");
			objetos.add(obj);
		}
	}

Criado 2 de dezembro de 2011

Ultima resposta 17 de jan. de 2012

Respostas 19

Participantes 6

19 Respostas

Topicos relacionados