Dúvida - JSF+Ajax

[Erick_Jeronimo]

Aê pessoal, blz?!

To com uma dúvida, acredito que seja ajax… espero que vcs possam me ajudar.

Eu queria criar componentes html em tempo de execução, porque eu não sei quantos elementos o usuário vai querer inserir, então teria que ser dinâmico.

Não sei se vcs já usaram o gmail? o esquema de anexo nos emails é bem semelhante com o que eu tenho em mente.

Alguém pode me ajudar já implementou algo ou tem alguma dica sobre o assunto?

Obrigado, abração.

[andersonfs]

Esses componentes seriam quais? SelectOneMenu, SelectMantmenu???

[Erick_Jeronimo]

Esses componentes seriam quais? SelectOneMenu, SelectMantmenu???

Cara, seriam alguns inputText, de acordo com a necessidade do usuário, ele clicaria em um link “novo”, por exemplo, daí criaria um novo inputText embaixo do que já existia pra ele escrever algo.

Aí no fim seria tudo adicionado à um array, sei lá.

[Luiz_Junior]

Você pode criar uma DataTable contendo o campo inputText quando o usuários clicar em novo você pega a lista da dataTable e adiciona um novo valor em branco na ultima posição da lista assim ela vai replicar o campo texto com um valor em branco.

Essa pode ser uma solução

[Z111]

Creio q é possível com richfaces.

Talvez em algum dos exemplos em http://livedemo.exadel.com/richfaces-demo/index.jsp

[WTGA]

Tenho um exemplo que deve servir como base. Há uma tabela definida (

) na minha página e criei uma função JavaScript para inserir linhas com campos :

	function incluirEtapa()
	{
		if (http.readyState == 4) 
		{
			document.getElementById('mensagemAjax').style.display = 'none';
			
			if (http.status == 200) 
			{   													 	
				var novaEtapa = http.responseXML.getElementsByTagName("NovaEtapa");
	
				if (novaEtapa[0])
				{										
			    
					var etapa = novaEtapa[0].getElementsByTagName("Etapa")[0].childNodes[0].nodeValue;						
					var dataInicial = http.responseXML.getElementsByTagName("DataInicial")[0].childNodes[0].nodeValue;
					var dataFinal = http.responseXML.getElementsByTagName("DataFinal")[0].childNodes[0].nodeValue;
													
					var tabela = document.getElementById('tabelaEtapas');
				
					var x=tabela.insertRow(tabela.rows.length-4);

					x.setAttribute("id", "linha" + etapa);					
								             			  
					var a=x.insertCell(0);
					var b=x.insertCell(1);
					var c=x.insertCell(2);
					var d=x.insertCell(3);
					var e=x.insertCell(4);
					var f=x.insertCell(5);

																			
					a.setAttribute("align", "center");
					a.innerHTML='<input type="radio" name="radioEtapa" id="radioEtapa" value="' + etapa + '">';
					b.setAttribute("align", "center");
					b.innerHTML=etapa;										
					c.innerHTML='<input type="text" class="formTextoDesabiliatdo" id="E-' + etapa + '-1" size="16" value="' + dataInicial + '" onkeypress="return formatarData(this,event)"  readonly="true">';
					d.innerHTML='<input type="text" class="formTexto" id="E-' + etapa + '-2" size="16" value="' + dataFinal + '" onkeypress="return formatarData(this,event)"  onkeyup="ajaxCalculaEtapas(' + etapa + ', this.value, this.id)">';
					e.setAttribute("align", "center");
					e.innerHTML='<input type="checkbox" id="desconsideraAfastamentoIA' + etapa + '" onclick="ajaxDesconsideraAfastamentoIA(' + etapa + ', this.checked)">';
					f.setAttribute("align", "center");
					f.innerHTML='&nbsp;';

					if (document.implementation &&
					document.implementation.createDocument) //Mozzila, NetScape
					{
						x.setAttribute("class", "tabelaLinhaNovaEtapa");									
					}
					else if (document.all) //Internet Explorer
					{
						x.setAttribute("className", "tabelaLinhaNovaEtapa");														
					}					
									
					mostraRadioUltimaEtapa();
				}
				else
				{
					var etapaExcedente = http.responseXML.getElementsByTagName("EtapaExcedente");
		
					if (etapaExcedente[0])
					{
						var etapa = etapaExcedente[0].getElementsByTagName("Etapa")[0].childNodes[0].nodeValue;
						document.getElementById('mensagemAjax').style.display = 'none';		
						alert("O número máximo de etapas é " + etapa);
					}				
				}
			}
		}
	}

[Erick_Jeronimo]

Você pode criar uma DataTable contendo o campo inputText quando o usuários clicar em novo você pega a lista da dataTable e adiciona um novo valor em branco na ultima posição da lista assim ela vai replicar o campo texto com um valor em branco.

Interessante a sugestão cara! Valeu!

Mas aí no caso como eu faria pra exibir esses inputText na minha página depois? alguma idéia?

[quote]Creio q é possível com richfaces.

Talvez em algum dos exemplos em http://livedemo.exadel.com/richfaces-demo/index.jsp[/quote]

Eu to usando richfaces nesse projeto, mas não consegui encontrar nada no demo dele… vc encontrou algo?

Tenho um exemplo que deve servir como base. Há uma tabela definida (

na minha página e criei uma função JavaScript para inserir linhas com campos :

Firme cara, muito show! mas no caso eu to usando JSF. Queria fazer pegar o valor que o cara digitar o input e jogar pra um atributo do meu objeto.

Será que é possível com javascript? Eu não manjo muito…

[andersonfs]

[quote=Luiz Junior]Você pode criar uma DataTable contendo o campo inputText quando o usuários clicar em novo você pega a lista da dataTable e adiciona um novo valor em branco na ultima posição da lista assim ela vai replicar o campo texto com um valor em branco.

Essa pode ser uma solução[/quote]

Essa solução dada pelo amigo ai de cima, era a que eu ia te falar. No livro de “CORE JAVASERVER FACES Fundamentos” nas páginas 145,146,147 e 148 tem exatamente essa solução. Se você quiser eu te mando o projeto de exemplo para você dar uma olhada.

Abraços

[Erick_Jeronimo]

Essa solução dada pelo amigo ai de cima, era a que eu ia te falar. No livro de “CORE JAVASERVER FACES Fundamentos” nas páginas 145,146,147 e 148 tem exatamente essa solução. Se você quiser eu te mando o projeto de exemplo para você dar uma olhada.

Pode crer cara, valeu pela dica. Vou dar uma olhada e qualquer coisa posto de novo.

Agradeço a todos que me ajudaram,

Abração

[Neto.Sabio]

Brother segue um exemplo

<rich:dataTable id="listaAcionamentos" var="acionamento" value="#{acionamentoMBean.listAcionamentoWrapper}" rowClasses="line,none" rows="20">
		<f:facet name="header">
			<rich:columnGroup>
				<rich:column colspan="11">
					<h:outputText value="#{msgs.labelAcionamento}" />
				</rich:column>
			</rich:columnGroup> 
		</f:facet>
		<rich:column width="60">
			<f:facet name="header">
				<h:outputText value="#{msgs.labelCodigo}" />
			</f:facet>

			<a4j:commandLink action="#{acionamentoMBean.loadAcionamento}"
							 immediate="true"  
							 reRender="testando_bloco_consulta,pnlConsultAcionamento" 
							 onclick="javascript:Richfaces.showModalPanel('modalAcionamentoC')">
				<h:outputText value="#{acionamento.aciCodigo}" >
					<f:convertNumber pattern="00000000" />
				</h:outputText>
				<f:setPropertyActionListener target="#{acionamentoMBean.aciCodigo}" value="#{acionamento.aciCodigo}" />
			</a4j:commandLink>
		</rich:column>
		
		<rich:column width="100">
			<f:facet name="header">
				<h:outputText value="#{msgs.labelStatus}" />
			</f:facet>
			<h:outputText value="#{acionamento.statusAcionamentoTiVO.saiNome}" />
		</rich:column>
		
		<!-- bota de adição da sua lista -->		
		<rich:column width="90" >
			<f:facet name="header">				
				<a4j:region id="regAcionamentoAdicionar">
				<a4j:status>
					<f:facet name="stop">
						<a4j:commandLink action="#{acionamentoMBean.clean}"
										 reRender="pnlAcionamento"
										 rendered="#{tiqueteBean.parametrosTi.permissoes.desabilita150}"
										 ajaxSingle="true"
										 styleClass="add"
										 onclick="javascript:Richfaces.showModalPanel('modalAcionamentoA')"
										 title="#{msgs.buttonAdicionar}">
						</a4j:commandLink>
					</f:facet>
					<f:facet name="start">
						<h:graphicImage value="/images/img_ajax_loader.gif" class="loading" />
					</f:facet>
				</a4j:status>
				</a4j:region>				
			</f:facet>
			<!-- bota de edicao da sua lista -->	
			<a4j:region id="regAcionamentoEditar">
				<a4j:status>
					<f:facet name="stop">
						<a4j:commandLink reRender="pnlAcionamento,actionTecnicoButun,pnlTecnicoByEmpresaOut"
										 rendered="#{tiqueteBean.parametrosTi.permissoes.desabilita150 and acionamento.statusAcionamentoTiVO.saiCodigo==10}"
										 action="#{acionamentoMBean.loadAcionamento}"
										 ajaxSingle="true"
										 styleClass="edit"
										 immediate="true"
										 title="editar Acionamento"
										 onclick="javascript:Richfaces.showModalPanel('modalAcionamentoA')">
							<f:setPropertyActionListener target="#{acionamentoMBean.aciCodigo}" value="#{acionamento.aciCodigo}" />
						</a4j:commandLink>
					</f:facet>
					<f:facet name="start">
						<h:graphicImage value="/images/img_ajax_loader.gif" class="loading" />
					</f:facet>
				</a4j:status>
			</a4j:region>
		</rich:column>
		<f:facet name="footer">
			<rich:columnGroup>
				<rich:column colspan="11">
					<rich:datascroller align="center" for="listaAcionamentos"
						maxPages="10" />
				</rich:column>
			</rich:columnGroup>
		</f:facet>
	</rich:dataTable>

Esse esqueva vai adicionando um cara a sua lista que ao clicar em adicionar ele renderiza os campos da lista. Se tiver alguma duvida no MODAL e so avisar

pace!!!