Pular para o conteúdo principal

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

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

Postar um comentário

Postagens mais visitadas deste blog

Como fazer upload e download de arquivos usando Servlet e JSP

Este post vai apresentar como implementar um  upload e download de arquivos usando Servlets, JSP, JSTL, EL e o padrão MVC. Para este exemplo, vou criar um projeto web dinâmico no Eclipse. Eu não vou especificar um banco de dados, o código deve funcionar com qualquer banco relacional. Para implementar o exemplo precisamos de quatro bibliotecas adicionais, sendo duas da Apache: http://commons.apache.org/fileupload/ http://commons.apache.org/io E para usar o JSTL precisamos de mais duas bibliotecas adicionais, a API e a implementação. Ambos podem ser encontrados no link: http://jstl.java.net/download.html Baixe todas as bibliotecas e adicione na pasta lib dentro de WebContent . A pasta lib também deve conter o conector para o banco de dados utilizado. Upload A página de envio deve conter um formulário com os campos necessários e mais um campo de input type file para o upload. No exemplo a seguir, vou mostrar o formulário com apenas dois campos:  input type =" file

Bye Bye JavaFX Scene Builder, Bem-vindo Gluon Scene Builder 8

Desde Java 8u40 a Oracle anunciou que o Scene Builder só será liberado como código-fonte dentro do projeto OpenJFX. A Oracle não irá mais fornecer os instaladores. O que é uma pena, era muito fácil instalar e trabalhar com Scene Builder especialmente para os novatos em JavaFX, mas o novo Gluon resolve este problema. Eles irão fornecer compilações do Scene Builder como antes, como instaladores para Max OS X, Linux, Windows ou simplesmente como um jar executável. O que significa para os desenvolvedores JavaFX e especialmente para iniciantes? Nada até agora. Você simplesmente tem que baixar página de Gluon Scene Builder em vez do Oracle. Todo o resto é a mesma coisa de antes. A atualização de Scene Builder 2.0 para o Gluon Scene Builder 8.0.0 é bastante fácil. Você tem que instalá-lo via .deb ou outro. Não importa se você já tem um instalação do Scene Builder em sua máquina. Ele simplesmente vai ser atualizado. Temos que agradecer a Gluon por fornecer e apoiar esta grande ferramen

Introdução ao Maven

Pessoal, acabei de adicionar duas apresentações no slideshare sobre Maven. Uma introdução ao Maven e outro falando um pouco de como usá-lo na prática. Só acessar: Introdução ao Maven e Maven na Prática . []s