Facelets [Resolvido]

22 de janeiro de 2009 10 respostas

anderson.bonavides 22 de janeiro de 2009

Pessoal vou pedir uma dica aqui para montar meu template, estou tendo dificuldades com isso. Gostaria que vcs pudessem me dar um toq sobre o meu exemplo.

Tenho 4 arquivos xhtml que se resumem em: menu.xhtml, topo.xhtml, rodape.xhtml e template.xhtml. Eu consegui montar todo meu template, mas no momento de chamar ele no index não to sabando montar. Segue um exemplo com meu topo.

Este arquivo topo.xhtml o conteúdo de topo:

<?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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
	<ui:insert name="topo">
		<td height="169" colspan="2">
			<img src="../images/topbanner.gif" width="755" height="155" />
		</td>
	</ui:insert>
</body>
</html>

Este arquivo template.xhtml é onde é incluído o topo:

<?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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
	<title><ui:insert>.::Projeto Base::.</ui:insert></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<meta name="keywords" content="Keywords here"/>
	<meta name="description" content="Description here"/>
	<meta name="Author" content="Joseph De Araujo"/>
	<meta name="Publisher" content="MyFreeTemplates.com"/>
	<meta name="robots" content="index, follow"/>
	<meta name="revisit-after" content="30 days"/>
	<meta name="distribution" content="global"/>
	<meta name="rating" content="general"/>
	<meta name="content-language" content="english"/>
	<script language="JavaScript" type="text/JavaScript"
	src="../images/myfreetemplates.js"></script>

	<style type="text/css">
	.basestyle {
		color: #FFFFFF;
		font-size: 10px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
	h1 {
		font-size: 16px;
		font-weight: bold;
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
	body,td,p,input {
		font-size: 11px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #333333;
	}
	
	.navlinks {
		font-size: 14px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		color: #FFFFFF;
	}
	</style>
</head>
	<body style="margin: 0;">	
		<table width="759" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#d80000">
			<tr align="center" valign="middle" bgcolor="#FFFFFF" bordercolor="#d80000">				
			    	<ui:include src="topo.xhtml" />
			</tr>

				<ui:include src="menu.xhtml" />
				<ui:include src="rodape.xhtml" />
		</table>
	</body>
</html>

Este arquivo é o index.xhtml onde quero chamar o meu template:

<?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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	
	<ui:composition template="template/template.xhtml">
		<ui:define name="topo">
			
		</ui:define>
		<ui:define name="menu"></ui:define>
		<ui:define name="rodape"></ui:define>
	</ui:composition>
</html>

Qual é a forma correta de fazer, e o que está errado?

Grato!

10 Respostas

rsakurai 22 de jan. de 2009

No template.xhtml você esta montando a estrutura da página e incluindo nela o topo, menu e rodape, você não deveria deixar um espaço nela para colocar o conteúdo da página por exemplo:

...
<tr align="center" valign="middle" bgcolor="#FFFFFF" bordercolor="#d80000">
    <ui:include src="topo.xhtml" />
</tr>

<ui:insert name="conteudo"></ui:insert>

<ui:include src="menu.xhtml" />
<ui:include src="rodape.xhtml" />
...

e no index.xhtml vc coloca o valor do conteúdo

<?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:h="http://java.sun.com/jsf/html"  
         xmlns:f="http://java.sun.com/jsf/core"  
         xmlns:ui="http://java.sun.com/jsf/facelets">  
  <body>
    <ui:composition template="template/template.xhtml">  
        <ui:define name="conteudo">  
            Aqui vai o texto do conteudo....
        </ui:define>  
  </body>
</html>

gilliard_santos 22 de jan. de 2009

O que geralmente a gente faz é incluir menu, topo e rodapé no template. As páginas que usam o template, como seu index, não precisam especificar menu, topo e rodapé de novo, pois a idéia do template é justamente não deixar isso repetitivo. Então na index, você aponta pro template e só preenche o corpo dele, que o conteúdo vai ficar no lugar do <ui:insert/>, ou se você tiver dado um nome específico pra uma área dentro do template e quiser colocar algo dentro dela, coloca esse conteúdo dentro de um <ui:define name=“nomeDaArea”> conteudo </ui:define>.

anderson.bonavides 22 de jan. de 2009

Entendo, mas eu não consigo vizualizar o template no index.xhtml. Se eu deixar só código abaixo:

<ui:composition template="template/template.xhtml> ... </ui:composition>

O browser não exibe certas partes do conteúdo do template. Mas se eu acessar o endereço do template ai sim ele é exibido corretamente.

Exemplo: http://localhost:8080/MeuProjeto/template/template.xhtml

rsakurai 22 de jan. de 2009

Acho que sua página index.xhtml não está encontrando o template…

Coloca assim no index:

<ui:composition template="./template/template.xhtml">

</ui:composition>

lucianotome 22 de jan. de 2009

O meu esta assim, o index...

<!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">
<head>
                               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<ui:composition template="/WEB-INF/layout/layout.xhtml">
  <ui:define name="title">"OpenExpert"</ui:define>
  <ui:define name="content">
  </ui:define>
</ui:composition>
</html>

O layout.xhtml

<!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">
<head>
  <title><ui:insert name="title">Default Title</ui:insert></title>
  <link rel="stylesheet" type="text/css" href="./css/main.css"/>
</head>

<body>

<div id="header">
    <ui:insert name="header">
    	<ui:include src="top.xhtml"/>
    </ui:insert>
</div>


<!--<div id="left">
  <ui:insert name="navigation" >
    <ui:include src="navigation.xhtml"/>
  </ui:insert>
</div>
-->

<div id="center" style="overflow: auto;">
  <br />
  <span class="titleText"> <ui:insert name="title" /> </span>
  <hr />
  <ui:insert name="content">
  	<div>
    <ui:include src="content.xhtml"/>  
    </div>
  </ui:insert>
</div>
<!-- 
<div id="right">
  <ui:insert name="news">
    <ui:include src="news.xhtml"/>
  </ui:insert>
</div>
 -->
<div id="footer">
  <ui:insert name="footer">
    <ui:include src="footer.xhtml"/>  
  </ui:insert>
</div>

</body>

</html>

gilliard_santos 22 de jan. de 2009

toma cuidado com os caminhos que você colocar no template. Caminhos ficam relativos à pagina que usa o template, e não ao arquivo do template, e isso confunde um pouco, pois quando criamos o template muitas vezes colocamos os caminhos relativos pensando nele. Então a melhor coisa é você ter caminhos relativos ao contexto da sua aplicação, e não ao arquivo do template. Faça o teste e comente aqui.

anderson.bonavides 22 de jan. de 2009

Bem o erro ainda persiste e não mudou nada em modificar para:

<ui:composition template="./template/template.xhtml">

</ui:composition>

Acredito que esteja encontrando pois algumas partes da página é exibida, uns 5% de 100%. O resto é não aparece.

rsakurai 22 de jan. de 2009

sua pagina topo, menu e rodape devem estar dentro da pasta template.
eu acho que você tem que mudar na sua página template.xhtml os includes

<ui:include src="./template/menu.xhtml" />

anderson.bonavides 22 de jan. de 2009

infelizmente continuou na mesma.

anderson.bonavides 22 de jan. de 2009

Pessoal o problema estava na página de topo, as figuras estavam referenciadas de forma que não apareciam na página index, mas no template aparecia.
Agradeço a todos pela ajuda.

Grato!

Criado 22 de janeiro de 2009

Ultima resposta 22 de jan. de 2009

Respostas 10

Participantes 4

10 Respostas

Topicos relacionados