Adicionar campos dinâmicamente JSF

Guitar_Men · Dezembro 2, 2011, 7:01am

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 ???

Alexandre_Saudate · Dezembro 2, 2011, 7:09am

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 · Dezembro 2, 2011, 7:11am

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 · Dezembro 2, 2011, 7:15am

[quote=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 ???
[/quote]

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 · Dezembro 2, 2011, 8:18am

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 · Dezembro 2, 2011, 8:37am

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 · Dezembro 2, 2011, 9:02am

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 · Dezembro 2, 2011, 9:09am

[quote=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 ?[/quote]

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

[]'s

Guitar_Men · Dezembro 2, 2011, 9:29am

[quote=asaudate][quote=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 ?[/quote]

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

[]'s[/quote]

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

Alexandre_Saudate · Dezembro 2, 2011, 9:39am

[quote=Guitar_Men][quote=asaudate][quote=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 ?[/quote]

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

[]'s[/quote]

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

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

Guitar_Men · Dezembro 2, 2011, 11:44am

[quote=asaudate][quote=Guitar_Men][quote=asaudate][quote=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 ?[/quote]

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

[]'s[/quote]

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

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

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 · Dezembro 2, 2011, 11:48am

Está dentro de um outputPanel?

Guitar_Men · Dezembro 2, 2011, 11:49am

Esta dentro de um PanelGroup que tem outros campos…

Alexandre_Saudate · Dezembro 2, 2011, 11:52am

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 · Dezembro 2, 2011, 11:56am

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 · Dezembro 2, 2011, 11:59am

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 · Dezembro 2, 2011, 12:12pm

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[/quote]

Humm, pode me passar algum material sobre isso ??

Alexandre_Saudate · Dezembro 2, 2011, 12:22pm

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[/quote]

Humm, pode me passar algum material sobre isso ??[/quote]

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 · Janeiro 17, 2012, 2:36pm

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 · Janeiro 17, 2012, 3:18pm

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:

[code]
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);
	}
}

[/code]>

Adicionar campos dinâmicamente JSF

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI