quinta-feira, 16 de maio de 2013

Criando templates usando o web.xml e fragmentos de JSPs (JSPFs)

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:

<%@ 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

4 comentários:

  1. 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 ?

    Valeu!!

    ResponderExcluir
    Respostas
    1. 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?

      Excluir
    2. Como 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...

      Excluir
    3. Olá Lene,

      Eu 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.

      Excluir

Popular Posts

StackOverflow Profile


profile for andvicoso at Stack Overflow, Q&A for professional and enthusiast programmers