Neo Framework Forum

Fiz um um codigo que tem varios combos dependentes um do outro:
Code:

 <n:comboReloadGroup useAjax="true">
      <t:property name="piezometro.estrutura.area.projeto"/>
      <t:property name="piezometro.estrutura.area" onLoadItens="verificaLista(this)"/><div id="mensagem.piezometro.estrutura.area" style="display: none;">Nenhum registro encontrado</div>
      <t:property name="piezometro.estrutura" onLoadItens="verificaLista(this)"/><div id="mensagem.piezometro.estrutura" style="display: none;">Nenhum registro encontrado</div>
      <t:property name="piezometro" onLoadItens="verificaLista(this)"/><div id="mensagem.piezometro" style="display: none;">Nenhum registro encontrado</div>
 </n:comboReloadGroup>

e o JavaScript:

Code:

             function verificaLista(obj){
             	if (obj.length == 1){
             		document.getElementById("mensagem."+obj.name).style.display="";
             	}
             }

porem quando executo a aplicação e o algum subCombo não tem itens a mensagem aparece so que não na frente do Combo mas em cima de todos os campos totalmente separado.
Como é que eu faço para que a mensagem fique na frente do Combo referente igual ao codigo postado acima.

Faz assim:

Code:

  <n:comboReloadGroup useAjax="true">
       <t:property name="piezometro.estrutura.area" onLoadItens="verificaLista(this)"/>
 
 <n:panel id="mensagem.piezometro.estrutura.area" style="display: none;">Nenhum registro encontrado</n:panel>
 
     ..................

provavelmente você tera que mudar o numero de colunas...

teh

Funcionou so que esse negocio das colunas que não esta funcionando ... sem o panel ele fica formatado certinho alinhado a esquerda porem quando eu coloco o panel sem definir o numero de colunas no "<t:tabelaEntrada>" a tabela fica mais ou menos assim:

Projeto: [Combo]
Area: [Combo]
[A msg area] Estrutura:
[Combo] [A msg estrutura]
Piezometro [Combo]
o codigo jsp que eu fiz ficou assim:

Code:

 <n:comboReloadGroup useAjax="true">
 	<t:property name="piezometro.estrutura.area.projeto"/>
 	<t:property name="piezometro.estrutura.area" onLoadItens="verificaLista(this)"/>
 	<n:panel id="mensagem.piezometro.estrutura.area" style="display: none;">Nenhum registro encontrado</n:panel>
 	<t:property name="piezometro.estrutura" onLoadItens="verificaLista(this)"/>
     	<n:panel id="mensagem.piezometro.estrutura" style="display: none;">Nenhum registro encontrado</n:panel>
 	<t:property name="piezometro" onLoadItens="verificaLista(this)"/>
     	<n:panel id="mensagem.piezometro" style="display: none;">Nenhum registro encontrado</n:panel>
 </n:comboReloadGroup>

Eu queri que ficasse assim:

Projeto: [Combo] [vazio]
Area: [Combo] [A msg area]
Estrutura: [Combo] [A msg estrutura]
Piezometro [Combo] [A msg piez.]

como é que eu faço?? deu pra entender????

Me manda o jsp completo por favor.

Equipe Membro desde: 31/05/2007 14:29:07 Mensagens: 2 Offline

Fala Guilerme Gamp!

Eu também tive esse problema com o n:panel, mas o que que acontece:
Quando você coloca o n:panel é como se voce incluisse um <td> na tabela.

Então se não estiver seguindo o número de colunas samba tudo pois uma linha terá mais <td> que a outra sacou?!

Tenta usar o colspan do n:panel e veja se funciona.

[]'s

Glauco,

por isso disse em cima que ele precisaria mecher no número de colunas.. ai estou esperando ele mandar para poder explicar melhor

Equipe Membro desde: 31/05/2007 14:29:07 Mensagens: 2 Offline

Sim sim! Só quis dar uma complementada... hehehe

=p!!!

Tranquilo =)

Obrigado pelos conselhos agora o problema é o seguinte com esse codigo:

Code:

 <t:entrada>
 	<t:janelaEntrada>
 		<t:tabelaEntrada columns="3">
 			<n:comboReloadGroup useAjax="true">
 				<t:property name="piezometro.estrutura.area.projeto"/>
 				<n:panel colspan="2" id="mensagem.piezometro.estrutura.area.projeto" style="display: none;">Nenhum registro encontrado</n:panel>
 				<t:property name="piezometro.estrutura.area" onLoadItens="verificaLista(this)"/>
 				<n:panel colspan="2" id="mensagem.piezometro.estrutura.area" style="display: none;">Nenhum registro encontrado</n:panel>
 				<t:property name="piezometro.estrutura" onLoadItens="verificaLista(this)"/>
 		    	<n:panel colspan="2" id="mensagem.piezometro.estrutura" style="display: none;">Nenhum registro encontrado</n:panel>
 				<t:property name="piezometro" onLoadItens="verificaLista(this)"/>
 		    	<n:panel colspan="2" id="mensagem.piezometro" style="display: none;">Nenhum registro encontrado</n:panel>
 			</n:comboReloadGroup>
 			<t:property name="data"  type="DATE"/><n:panel id="vazio" style="display: none;"/>
 			<t:property name="status" itens="${listaStatus}"/><n:panel id="vazio" style="display: none;"/>
 			<t:property name="profundidade" onchange="executarAjax()"/><n:panel id="vazio" style="display: none;"/>
 			<t:property name="cotaNivelAgua" bodyStyleClass="readOnly" readonly="readonly" /><n:panel id="vazio" style="display: none;"/>
 		</t:tabelaEntrada>
 	</t:janelaEntrada>
 </t:entrada>

Eles ficam separados em 3 colunas certinho... so que quando não tem nenhuma mensagem para ser mostrada os labels ficam no lugar certo e o campo para o valor fica no meio da tela.
Quando eu troco o valor do combo e a mensagem tem que aparecer ela aparece e todos os componentes ficam alinhados a esquerda, que é a forma que deveriam ficar desde o começo sem ou com mensagem.

Como eu faço para que os componentes fiquem alinhados a esquerda????

Cara.. olha o que vc fez...

Code:

style="display: none;"

isso faz com que o elemento "deixe de existir"

experimente trocar por visibility...

teh

Xiita Membro desde: 17/04/2007 16:35:03 Mensagens: 275 Offline

Guilherme, acho que o que você está querendo fazer é isso:

Code:

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="n" uri="neo"%>
 <%@ taglib prefix="t" uri="template"%>
 <script type="text/javascript">
 function verificaLista(obj){
 	if (obj.length == 1){
 		document.getElementById("msg."+obj.name).style.display = "";
 		document.getElementById("msg."+obj.name).innerHTML = "Nenhum registro encontrado";
 	} else {
 		document.getElementById("msg."+obj.name).style.display = "none";
 	}
 }
 /*
  * Essa função limpa os subItens que por acaso possam estar com a mensagem Nenhum registro encontrado
  */
 function verificaSubItem(obj){
 	var partes = obj.name.split('.');
 	partes.length = partes.length - 2;
 	for(var i = 0; i < partes.length; i++){
 		var msg = 'msg';
 		for(var j = 0; j < partes.length - i; j++){
 		    msg += '.'+partes[j];
 		}
 		document.getElementById(msg).style.display = "none";
 	}
 }
 </script>
 
 <t:entrada>
 	<t:janelaEntrada>
 		<t:tabelaEntrada>
 			<t:property name="id"/>
 			
 			<n:comboReloadGroup useAjax="true"> 
 			
 				<n:panel>Projeto</n:panel>
 				<n:panel>
 					<t:property name="piezometro.estrutura.area.projeto" onLoadItens="verificaLista(this)" onchange="verificaSubItem(this)"/>
 					<span id="msg.piezometro.estrutura.area.projeto"></span>
 				</n:panel>
 				
 				<n:panel>Área</n:panel>
 				<n:panel>
 					<t:property name="piezometro.estrutura.area" onLoadItens="verificaLista(this)" onchange="verificaSubItem(this)"/>
 					<span id="msg.piezometro.estrutura.area"></span>
 				</n:panel>
 				
 				<n:panel>Estrutura</n:panel>
 				<n:panel>
 					<t:property name="piezometro.estrutura" onLoadItens="verificaLista(this)" onchange="verificaSubItem(this)"/>
 					<span id="msg.piezometro.estrutura"></span>
 				</n:panel>
 				
 				<n:panel>Piezometro</n:panel>
 				<n:panel>
 					<t:property name="piezometro" onLoadItens="verificaLista(this)" onchange="verificaSubItem(this)"/>
 					<span id="msg.piezometro"></span>
 				</n:panel>
 
 			</n:comboReloadGroup>
 			<t:property name="data" />
 		</t:tabelaEntrada>
 	</t:janelaEntrada>
 </t:entrada>

A função verificaLista é a mesma que vc já tinha passado.

A função verificaSubItem é importante para a seguinte situação. Suponha que piezometro está com a mensagem nenhum item encontrado, se trocarmos o projeto, essa mensagem tem que ser limpa. É isso que essa função faz.

A tag tabelaEntrada coloca um panelGrid com 2 colunas. Então, se desejar que um property e um outro componente fiquem na mesma TD, eles devem ser englobados por um panel. Foi criado um panel para o label, porque como incluimos o property dentro de um panel, nós perdemos o panel do label. Também é possível fazer com 3 colunas, mas a mensagem ficaria alinhada a terceira coluna e nao ao lado do combo.
Se desejar fazer com 3 colunas me fale que eu faço o exemplo.

Nesse exemplo que te passei cada n:panel representa um TD dentro da tabela.

Veja se é isso mesmo, e me fale se ainda restar alguma dúvida..

Esse comportamento será o padrão do seu sistema? Porque se for, é mais fácil adicionar essa funcionalidade aos templates...

Xiita Membro desde: 17/04/2007 16:35:03 Mensagens: 275 Offline

Se você adicionar a seguinte linha:

Code:

 <span id="msg.${Tproperty.name}"></span>

No arquivo PropertyTag.jsp, em baixo das tags n:input como no exemplo:

br/com/linkcom/neo/view/template/PropertyTag.jsp
Code:

   ......
 <c:if test="${Tproperty.mode == 'input'}">
 <n:input pattern="${Tproperty.pattern}" selectOnePathParameters="${Tproperty.selectOnePathParameters}" insertPath="${Tproperty.insertPath}"  holdValue="${Tproperty.holdValue}" showRemoverButton="${Tproperty.showRemoverButton}" optionalParams="${Tproperty.optionalParams}"  transientFile="${Tproperty.transientFile}" autoSugestUniqueItem="${Tproperty.autoSugestUniqueItem}" onLoadItens="${Tproperty.onLoadItens}" useAjax="${Tproperty.useAjax}" showLabel="${Tproperty.showLabel}" type="${Tproperty.type}" reloadOnChange="${Tproperty.reloadOnChange}" trueFalseNullLabels="${Tproperty.trueFalseNullLabels}" selectOnePath="${Tproperty.selectOnePath}" itens="${Tproperty.itens}"
 	label="${Tproperty.label}" selectLabelProperty="${Tproperty.selectLabelProperty}" includeBlank="${Tproperty.includeBlank}" blankLabel="${Tproperty.blankLabel}" cols="${Tproperty.cols}" rows="${Tproperty.rows}" write="${Tproperty.write}" dynamicAttributesMap="${Tproperty.dynamicAttributesMap}">
 	<n:doBody />
 </n:input>
 <span id="msg.${Tproperty.name}"></span>
 </c:if>
 .....

Você deve adicionar o SPAN logo abaixo de </n:input> (linhas 61 e 75)

E, jogando os scripts para o inicio do arquivo br/com/linkcom/neo/view/template/EntradaTag.jsp

O JSP de entrada poderia ficar assim:

Code:

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="n" uri="neo"%>
 <%@ taglib prefix="t" uri="template"%>
 <t:entrada>
 	<t:janelaEntrada>
 		<t:tabelaEntrada>
 			<t:property name="id"/>
 			<n:comboReloadGroup useAjax="true"> 
 				<t:property name="piezometro.estrutura.area.projeto" onLoadItens="verificaLista(this)" onchange="verificaSubItem(this)"/>			
 				<t:property name="piezometro.estrutura.area" onLoadItens="verificaLista(this)" onchange="verificaSubItem(this)"/>			
 				<t:property name="piezometro.estrutura" onLoadItens="verificaLista(this)" onchange="verificaSubItem(this)"/>			
 				<t:property name="piezometro" onLoadItens="verificaLista(this)" onchange="verificaSubItem(this)"/>			
 			</n:comboReloadGroup>
 			<t:property name="data" />
 		</t:tabelaEntrada>
 	</t:janelaEntrada>
 </t:entrada>

Essas alterações nos templates não causam efeito colateral!!

Xiita Membro desde: 17/04/2007 16:35:03 Mensagens: 275 Offline

Se desejar que dataGrids que forem do modo input também exibam a mensagem adicione o SPAN também na linha 28 do PropertyTag.jsp

Xiita Membro desde: 17/04/2007 16:35:03 Mensagens: 275 Offline

E finalmente, você pode adicionar

Code:

 <c:if test="${Tproperty.useAjax}">
     <c:set target="${Tproperty}" property="onLoadItens" value="verificaLista(this);${Tproperty.onLoadItens}"/>
     <c:set target="${Tproperty.dynamicAttributesMap}" property="onchange" value="verificaSubItem(this);${Tproperty.dynamicAttributesMap['onchange']}"/>
 </c:if>

Ao inicio do arquivo PropertyTag.jsp (logo após a declaração das taglibs)

E então o seu JSP de entrada fica original denovo:

Code:

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="n" uri="neo"%>
 <%@ taglib prefix="t" uri="template"%>
 <t:entrada>
 	<t:janelaEntrada>
 		<t:tabelaEntrada>
 			<t:property name="id"/>
 			<n:comboReloadGroup useAjax="true"> 
 				<t:property name="piezometro.estrutura.area.projeto" />			
 				<t:property name="piezometro.estrutura.area" />			
 				<t:property name="piezometro.estrutura" />			
 				<t:property name="piezometro" />			
 			</n:comboReloadGroup>
 			<t:property name="data" />
 		</t:tabelaEntrada>
 	</t:janelaEntrada>
 </t:entrada>

E você passa a ganhar essa funcionalidade para todas as páginas, sem ter que mecher em nenhuma outra página.

Como eu costumo brincar: E isso tudo sai pra você de graça

Xiita Membro desde: 17/04/2007 16:35:03 Mensagens: 275 Offline

Recapitulando as alterações feitas nos templates.

No EntradaTag.jsp foram adicionados os dois javascripts :

Code:

 <script type="text/javascript">
 function verificaLista(obj){
 	if (obj.length == 1){
 		document.getElementById("msg."+obj.name).style.display = "";
 		document.getElementById("msg."+obj.name).innerHTML = "Nenhum registro encontrado";
 	} else {
 		document.getElementById("msg."+obj.name).style.display = "none";
 	}
 }
 /*
  * Essa função limpa os subItens que por acaso possam estar com a mensagem Nenhum registro encontrado
  */
 function verificaSubItem(obj){
 	var partes = obj.name.split('.');
 	partes.length = partes.length - 2;
 	for(var i = 0; i < partes.length; i++){
 		var msg = 'msg';
 		for(var j = 0; j < partes.length - i; j++){
 		    msg += '.'+partes[j];
 		}
 		document.getElementById(msg).style.display = "none";
 	}
 }
 </script>

No PropertyTag.jsp foram adionados dois SPANs (ou 3 se desejar a mensagem quando for um dataGrid)

Code:

 <span id="msg.${Tproperty.name}"></span>

Linhas 28,61 e 75

Ainda no inicio do PropertyTag.jsp foi adicionado o seguinte bloco:

Code:

 <c:if test="${Tproperty.useAjax}">
 	<c:set target="${Tproperty}" property="onLoadItens" value="verificaLista(this);${Tproperty.onLoadItens}"/>
 	<c:set target="${Tproperty.dynamicAttributesMap}" property="onchange" value="verificaSubItem(this);${Tproperty.dynamicAttributesMap['onchange']}"/>
 </c:if>

Obs: É diferente configurar o onLoadItens do onchange porque o onLoadItens é uma propriedade da tag Property. O onchange não. Mas é possível adicionar um atributo onchange através de dynamic Attributes (presente em todas as tags). Esses dynamicAttributes são acessados através de um mapa chamado dynamicAttributesMap

Atenção: Por causa dessa modificação sempre utilize o atributo onchange com letras minúsculas na sua aplicação. Caso contrário terá que ser feita uma consistencia melhor para a propriedade onchange.