Neste tópico vou abordar uma outra maneira de criar templates sem usar bibliotecas externas. Iremos utilizar apenas o web.xml e fragmentos de JSPs (JSPFs).
Inicialmente irei criar uma página HTML completa com cabeçalho, corpo e rodapé. Vou chamar essa página de index.jsp, salvá-la no WebContent com o código a seguir:
Vamos separar esse arquivo em 4. Um vai continuar se chamando index.jsp e criaremos outros três: header.jspf, menu.jspf e footer.jspf. Todos os arquivos criados devem ser copiados para uma nova pasta jspf dentro de WEB-INF.
O arquivo header.jspf deve conter apenas o código html correspondente ao início do arquivo index.jsp, ou seja:
Já o arquivo footer.jspf deverá corresponder ao código ao final da página index.html:
O arquivo que irá conter o menu, irá se chamar menu.jspf e terá somente o código:
No arquivo do header temos um link para um arquivo chamado "default.css". O código correspondente ao arquivo é:
A página principal (aqui chamada de index.jsp) e qualquer outra página do projeto que você deseje que inclua o header, footer e menu, deve conter apenas a parte do corpo (<body>). Como exemplo segue o código para o index.jsp:
O código da index.jsp é correspondente ao código restante dos recortes de código executados posteriormente.
O web.xml que contém a configuração dos redirecionamentos do template para as páginas JSPFs deve ter o seguinte código:
A partir daí é só adicionar o projeto ao servidor e executar!
[]`s
Inicialmente irei criar uma página HTML completa com cabeçalho, corpo e rodapé. Vou chamar essa página de index.jsp, salvá-la no WebContent com o código a seguir:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link href="css/default.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Página Principal</title>
</head>
<body>
<div id="header">
<h1>Título do web site</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li><a href="cadastrar.jsp">Cadastrar</a></li>
<li><a href="listar.jsp">Listar</a></li>
</ul>
</div>
<div id="content">
<h1>Bem Vindo</h1>
</div>
<div id="footer">
Informações do rodapé <br />copyright e etc.
</div>
</body>
</html>
Vamos separar esse arquivo em 4. Um vai continuar se chamando index.jsp e criaremos outros três: header.jspf, menu.jspf e footer.jspf. Todos os arquivos criados devem ser copiados para uma nova pasta jspf dentro de WEB-INF.
O arquivo header.jspf deve conter apenas o código html correspondente ao início do arquivo index.jsp, ou seja:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link href="css/default.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Template Web Site</title>
</head>
<body>
<div id="header">
<h1>Título do web site</h1>
</div
Já o arquivo footer.jspf deverá corresponder ao código ao final da página index.html:
<div id="footer">
Informações do rodapé <br />copyright e etc.
</div>
</body>
</html>
O arquivo que irá conter o menu, irá se chamar menu.jspf e terá somente o código:
<div id="menu">
<h2>Menu</h2>
<ul>
<li><a href="cadastrar.jsp">Cadastrar</a></li>
<li><a href="listarjsp">Listar</a></li>
</ul>
</div>
No arquivo do header temos um link para um arquivo chamado "default.css". O código correspondente ao arquivo é:
@CHARSET "UTF-8";
html,body {
margin: 0;
padding: 0;
}
body {
height: 100%;
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
}
#header {
background: red;
height: 120px;
clear: both;
text-align: center;
}
#footer {
background: black;
color: white;
clear: both;
text-align: center;
padding: 10px;
}
#menu {
padding: 10px;
background: yellow;
width: 120px;
float: left;
min-height: 400px;
}
#content {
margin-left: 160px; /* menu width + 40 */
}
A página principal (aqui chamada de index.jsp) e qualquer outra página do projeto que você deseje que inclua o header, footer e menu, deve conter apenas a parte do corpo (<body>). Como exemplo segue o código para o index.jsp:
<div id="content">
<h1>Bem Vindo</h1>
</div>
O código da index.jsp é correspondente ao código restante dos recortes de código executados posteriormente.
O web.xml que contém a configuração dos redirecionamentos do template para as páginas JSPFs deve ter o seguinte código:
<jsp-config>
<jsp-property-group>
<description>Configuracao do header, menu e footer do template</description>
<url-pattern>*.jsp</url-pattern>
<include-prelude>/WEB-INF/jspf/header.jspf</include-prelude>
<include-prelude>/WEB-INF/jspf/menu.jspf</include-prelude>
<include-coda>/WEB-INF/jspf/footer.jspf</include-coda>
</jsp-property-group>
</jsp-config>
A partir daí é só adicionar o projeto ao servidor e executar!
[]`s
Valeu prof mt bom! Fiz o passo a passo e funcionou certinho! Só tenho uma duvida, como pode ser feito para anexar um arquivo no email ?
ResponderExcluirValeu!!
Você está falando sobre o tópico de como enviar emails usando o JavaMail (http://andvicoso.blogspot.com.br/2013/04/como-enviar-emails-usando-javamail.html), certo?
ExcluirComo carregar header e footer diferente de acordo com o grupo do jsp. Uso VRaptor no meu site e possuo as pastas admin e site dentro da pasta /WEB_INF/jsp. Meus arquivos jsp estão distribuídos dentro dessas pastas. Quero que o grupo que está dentro da pasta admin tenha um header e footer diferente do grupo que está dentro da pasta site...
ExcluirOlá Lene,
ExcluirEu não testei, mas deveria ser possível sim. Desta forma:
<jsp-config>
<jsp-property-group>
<description>Configuracao do header, menu e footer do template</description>
<url-pattern>*.jsp</url-pattern>
<include-prelude>/WEB-INF/jspf/header.jspf</include-prelude>
<include-prelude>/WEB-INF/jspf/menu.jspf</include-prelude>
<include-coda>/WEB-INF/jspf/footer.jspf</include-coda>
</jsp-property-group>
</jsp-config>
<jsp-config>
<jsp-property-group>
<description>Configuracao do header, menu e footer do template do admin</description>
<url-pattern>admin/*</url-pattern>
<include-prelude>/WEB-INF/jspf/admin/header.jspf</include-prelude>
<include-prelude>/WEB-INF/jspf/admin/menu.jspf</include-prelude>
<include-coda>/WEB-INF/jspf/admin/footer.jspf</include-coda>
</jsp-property-group>
</jsp-config>
<jsp-config>
<jsp-property-group>
<description>Configuracao do header, menu e footer do template site</description>
<url-pattern>site/*</url-pattern>
<include-prelude>/WEB-INF/jspf/site/header.jspf</include-prelude>
<include-prelude>/WEB-INF/jspf/site/menu.jspf</include-prelude>
<include-coda>/WEB-INF/jspf/site/footer.jspf</include-coda>
</jsp-property-group>
</jsp-config>
A primeira configuração vai pegar apenas os jsp fora das pastas main e site.