Bom dia todos!
Estou utilizando os recursos do facelets para desenvolver a cama view da minha aplicação.
Tentei utilizar os recursos de template do facelets, mas sem sucesso, tentei fazer da seguinte forma:
- Criei um template fora da minha aplicação usando CSS, o mesmo funcionou legal.
- Criei uma página template pelo wizard do netbeans e selecionei um leiaute qualquer.
- Depois que ele criou a página eu subistitui o conteudo do arquivo CSS gerado pelo netbeans, pelo meu CSS e também a estrutura do arquivo .xhtml, mas somente as partes referentes ao CSS.
Minha idéia era que o meu leiaute pudesse ser utilizado, porém ao tentar gerar um Client do Template o netbeans fala que o arquivo não é um template válido, só que até mesmo validei o meu xhtml na W3C (http://validator.w3.org/), só deu problema nas tags do facelets(<h:body>), mas acho que é normal ele não validar as tags do faceletes.
Existe alguma configuração que tenha que ser feita no leiaute feito externamente para que ele funcione normalmente?
Provavelmete algum problema no seu template. Posta o código ai para analisarmos.
Template:
<?xml version='1.0' encoding='UTF-8' ?>
<!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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/leiaute.css" rel="stylesheet" type="text/css" />
<title></title>
</h:head>
<h:body>
<div id="principal">
<div id="cabecalho"><img src="./imagens/topo.png" alt="Topo" /> </div>
<div id="dircol">
<div id="topodadoscaixa"></div>
<div id="dadosusuario">
<h4>Usuario</h4>
</div>
<div id="rodapedadoscaixa"></div>
</div>
<div id="wrapper" class="clearfix">
<div id="colunas" class="clearfix">
<div id="menu"></div>
<div id="conteudo">
</div>
</div>
<div id="esqcol">
<div id="topodir1" class="topocaixa"></div>
<div id="propgdir1" class="propg2"><img src="./imagens/mk1.jpg" width="95" height="180" alt="Propaganda2" /></div>
<div id="rodapedir1" class="rodapecaixa"></div>
<div id="topodir2" class="topocaixa"></div>
<div id="propgdir2" class="propg2"><img src="./imagens/mk2.jpg" width="95" height="180" alt="Propaganda1" /></div>
<div id="rodapedir2" class="rodapecaixa"></div>
</div>
</div>
<div id="rodape"><img src="./imagens/rodape.png" alt="Rodape" /></div>
</div>
</h:body>
</html>
Css (leiaute.css):
html, body{
margin:0;
padding:0;
text-align:center;
background-image: url("page_bg.gif");
}
#principal{
width:740px;
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top:15px;
}
#cabecalho{
position:relative;
height:70px;
/*background-color:#ba131b; */
width:100%;
}
#menu{
position:relative;
height:30px;
/*background-color:#FFFFFF; */
width:100%;
margin-bottom:5px;
margin-top:5px;
}
#dircol{
width:100px;
float:left;
position:relative;
/*background-color:#3600F9; */
}
#colunas{
width:540px;
float:left;
position:relative;
}
#esqcol{
width:100px;
float:right;
position:relative;
/*background-color:#ECBF6C;*/
}
#conteudo{
background-color: #FFCCFF;
float: left;
display:inline;
position: relative;
width:100%;
}
#rodape{
height:20px;
/*background-color:#ba131b;*/
clear:both;
}
#dadosusuario{
width:95px;
height:180px;
background:#FFFFFF;
padding-bottom:5px;
}
#propg2{
width:95px;
height:180px;
/*background:#000000;*/
margin-left:5px;
}
#topocaixa{
width:95px;
height:10px;
margin-top:5px;
background-image: url(topo_caixa.png);
margin-left:5px;
}
#rodapecaixa{
width:95px;
height:10px;
background-image: url(rodape_caixa.png);
margin-bottom:5px;
/*padding-bottom:5px;*/
margin-left:5px;
}
#topodadoscaixa{
width:95px;
height:10px;
margin-top:5px;
background-image: url(topo_caixa.png);
}
#rodapedadoscaixa{
width:95px;
height:10px;
background-image: url(rodape_caixa.png);
margin-bottom:5px;
/*padding-bottom:5px;*/
}
h4 {
font:bold 0.7em Arial, Helvetica, sans-serif;
text-transform:uppercase;
background:#ba131b;
color:#fff;
padding:0px 20px;
margin:0px 0px 0px 0px;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#dircol{display:none;}
/*hide the right column when printing*/
#esqcol{display:none;}
#twocols, #conteudo{width:100%; float:none;}
}
Bem para ficar documentado a resolução do meu problema vou postar abaixo.
A primeira coisa que foi definir um leiaute padrão, fiz isso em um arquivo html padrão usando css, para inicio eu tomei como base um leiaute gerado através do CSS Creator.
Eu acredita que para utilizar o Facelets era somente adicionar o arquivo no Netbeans e no momento em que fosse criar um cliente do template era apontar para aquele arquivo, só que se o mesmo possui um padrão para ser interpretado como leiaute.
No fonte abaixo o mesmo tem somente o leiaute puro:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>CssCreator-->XHTML 1.0 Strict standard template </title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="www.csscreator.com" />
<link rel="stylesheet" href="857037.css" type="text/css" />
</head>
<div id="pagewidth" >
<body>
<div id="header" > Head </div>
<div id="wrapper" class="clearfix" >
<div id="twocols" class="clearfix">
<div id="maincol" > Main Content Column </div>
<div id="rightcol" > right Column </div>
</div>
<div id="leftcol" > Left Column </div>
</div>
<div id="footer" > Footer
</div>
</div>
</body>
</html>
Para que este arquivo fosse interpretado como leiaute algumas tags facelets tem que ser adicionaddas:
<body>
<div id="header" > Head </div>
<div id="wrapper" class="clearfix" >
<div id="twocols" class="clearfix">
<div id="conteudo" >
<ui:insert name="conteudo">Conteudo</ui:insert>
</div>
<div id="esqcol" >
<ui:insert name="esqcol">Coluna Esquerda</ui:insert>
</div>
</div>
<div id="coldir" >
<ui:insert name="dircol">Coluna Direita</ui:insert>
</div>
</div>
<div id="rodape" >
<ui:insert name="rodape">Rodape</ui:insert>
</div>
</div>
</body>
Adicionando as tags Facelets o arquivos passou a ser template válido.
Ao gerar um cliente deste template o mesmo geraria da seguinte maneira:
<?xml version='1.0' encoding='UTF-8' ?>
<!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">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="conteudo">
dadosusuario
</ui:define>
<ui:define name="esqcol">
Coluna Esquerda
</ui:define>
<ui:define name="dircol">
Coluna Direita
</ui:define>
<ui:define name="rodape">
Rodape
</ui:define>
</ui:composition>
</body>
</html>
Finalizando para todas as seções que eu quero que sejam alteradas no meu client devem conter a tag facelets ui:insert, em um sistema pode se deixar somente o conteúdo, cabeça, rodapé e colunas laterais podem ficar no template.
Espero ajudar alguém com esta exlicação.