JSF + JS + PrimeFaces

27 de julho de 2010 7 respostas

renatakemi 27 de julho de 2010

Oi gente,

Não estou conseguindo nem pegar a altura nem setar a altura dos meus componentes jsf por meio de java script.
Tenho o seguinte template:

<body class="yui-skin-sam">
		<h:form>
			<p:layout fullPage="true" widgetVar="myLayout" id="myLayout">
				<p:layoutUnit id="top" position="top" spacingOpen="0" height="65" scrollable="null" style="padding:0; overflow:visible; margin:0; background: url(imagens/logo.png) no-repeat;" zindex="10">
					<ui:insert name="header" >Cabecalho</ui:insert>
				</p:layoutUnit>
				
				<p:layoutUnit id="center" position="center" resizable="true" style="overflow:auto">
					<ui:insert name="content">Corpo da Pagina</ui:insert>
				</p:layoutUnit>
				
				<p:layoutUnit id="bottom" position="bottom" height="40" collapsed="false" style="margin:0;padding:0;overflow:auto;background: url(imagens/background_header.png);">
					<ui:insert name="bottom">Rodape</ui:insert>
				</p:layoutUnit>
				      
				<p:layoutUnit id="left" position="left" resizable="true" collapsible="true" collapsed="true" width="200" minWidth="200" maxWidth="400" style="width:200;margin:0;padding:0;overflow:auto">
					<ui:insert name="tree">arvores</ui:insert>
				</p:layoutUnit>
			</p:layout>
		</h:form>
	</body>

Gostaria de pegar a altura layoutUnit “center” e assim com essa altura poder setar a altura dos panels que eu vou colocar dentro dele
Tentei usar o seguinte javascript mas nao tive nenhum sucesso:

<script type="text/javascript">
       	var elemento= myLayout.getUnitByPosition("center");
       	var altura= elemento.get("altura");
       	document.getElementById("panel2").style.height = (altura/2-16)+'px';
</script>

Tentei setar também a altura do panel na mão usando o seguinte javascript e nada aconteceu também

document.getElementById("panel2").style.height='220px';

Alguém sabe alguma maneira de setar a altura de um panel usando javascript??? ou usando alguma outra maneira?

Vlw!

7 Respostas

barbon 27 de jul. de 2010

Olá,

Você está tentando pegar por meio do id “panel2”, ok? Tem como você exibir a codificação do “panel2”?

Até!

renatakemi 27 de jul. de 2010

Oi!

Eu tenho um index que utiliza o meu template e no meu index eu chamo a minha home.

Meu index:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.prime.com.tr/ui">

	<head>
		<title>Title</title>
		<meta content='text/html; charset=ISO-8859-1' http-equiv='Content-Type'/>
		<p:resources/>
		
	</head> 
    <body>
    	<f:view>
        	<!-- Carrega o templante montado na outra pagina -->
			<ui:composition template="template.xhtml">
				<!-- Carrega a parte CABECALHO do template -->
				<ui:define name="header" >
					.
                                        .
                                        .
				</ui:define>
				
				<!-- Carrega a parte Lateral do template (tree)-->
				<ui:define name="tree">
					.
                                        .
                                        .
				</ui:define>
		        
				<!-- Carrega a parte Central do template (conteudo)-->
				<ui:define name="content">
					 <a4j:include viewId="#{url.url}" style="margin:0;padding:0;"/>  ---------------------------------> Aqui eu chamo minha home.jsp
				</ui:define>
				
				<!-- Carrega a parte do RODAPE do template -->
				<ui:define name="bottom">
					<ui:include src="pageFooter.jsp" />
				</ui:define>
			</ui:composition>          
		</f:view>
	</body>
</html>

Minha home:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.prime.com.tr/ui">
	<head>
		<title>Home</title>
		<script type="text/javascript">  
                        var elemento= myLayout.getUnitByPosition("center");  
                        var altura= elemento.get("altura");  
                        document.getElementById("panel2").style.height = (altura/2-16)+'px';  
                </script>  
	</head>
	<body>
		<h:form id="formHome">
			<h:panelGrid id="homeGrid" columns="2" width="100%" cellpadding="8px" >
				    
				<p:panel id="panel1" style="width:auto;max-width:680px;min-width:420px;overflow:auto;">
					<f:facet name="header">
						<h:outputText value="Painel 1" />
					</f:facet>
					<ui:include src="/panel1.jsp"/>
				</p:panel>
				
				<p:panel widgetVar="panel2" id="panel2" style="width:auto;max-width:680px;min-width:420px;overflow:auto;">
					<f:facet name="header">
						<h:outputText value="Painel 2" />
					</f:facet>
					<a4j:include viewId="panel2.jsp"/>
				</p:panel>
				   			
				<p:panel id="panel3" style="width:auto;max-width:680px;min-width:420px;overflow:auto;">  
					<f:facet name="header">
						<h:outputText value="Painel 3" />
					</f:facet>
					<ui:include src="panel3.jsp"/>
				</p:panel>
							
				<p:panel id="panel4" style="width:auto;max-width:680px;min-width:420px;overflow:auto;">
					<f:facet name="header">
						<h:outputText value="Painel 4" />
					</f:facet>
					<ui:include src="panel4.jsp"/>  
				</p:panel>
					
			</h:panelGrid>
		</h:form>
	</body>	
</html>

Já tentei colocar o script na pagina de template tb e nada…

alguma ideia?

Vlw!!!

guilhermehbueno 27 de jul. de 2010

tenta colocar o seu form assim: <h:form prependId=“false”>

ou quando for se referir ao elemento panel2 coloque o id do form antes —> formHome:panel2

renatakemi 27 de jul. de 2010

Oi Guilherme!

Obrigada por responder!

Eu coloquei o formHome: antes do id do panel: document.getElementById(“formHome:panel2”).style.height=“220px”;
e tentei tb colocando <h:form prependId=“false”> e document.getElementById(“panel2”).style.height=“220px”;

mas não adiantou…

barbon 27 de jul. de 2010

Olá Renata,

Qual navegador você está utilizando? Caso seja o FF, observe o Ferramentas->Console de Erros (CTRL+SHIFT+J) e verifique se aparece o erro de JavaScript.

Uma tentativa seria evitar usar o mesmo nome para diferentes atributos, notei no seu código o id e o widgetVar com o mesmo nome. Já tive problemas em projetos faces por repetir nomes.

Até.

renatakemi 28 de jul. de 2010

Oi Barbon!

Obrigada por responder! Valeu pela dica, vou mudar os nomes para evitar problemas.
Eu fui no console de erros do FF e lá fala que o myLayout não está definido e que o panel2 é null. :shock:

você sabe se javascript realmente altera componentes jsf?

Vlw!

barbon 28 de jul. de 2010

Olá,

Javascript modificaria sim, pois independente da tecnologia (JSP, JSF… ASP.Net) a linguagem interpretada pelos navegadores é HTML, onde a mesma é manipulável via linguagem dinâmica.

Basta agora ajustar a referência ao componente e ajustar o Javascript.

Até!

Criado 27 de julho de 2010

Ultima resposta 28 de jul. de 2010

Respostas 7

Participantes 3

7 Respostas

Topicos relacionados