Criando um template para web site usando Sitemesh 3
Este post vai apresentar como implementar um template para web site usando a biblioteca Sitemesh 3.
Para este exemplo, vou criar um projeto web dinâmico no Eclipse. O nome pode ser TemplateSitemesh3 por exemplo.
Para implementar o exemplo precisamos da biblioteca sitemesh na versão 3, que é encontrada em:
Baixe o zip da biblioteca, descompacte, procure o arquivo sitemesh-3.0-alpha-2.jar dentro do diretório e copie ele para a pasta lib dentro de WebContent do seu projeto.
Depois de copiar a biblioteca, crie um arquivo chamado sitemesh3.xml dentro do diretório WEB-INF. Este arquivo serve para configurar qual o arquivo que será considerado o template da aplicação (chamado de decorator) e quais arquivos não vão ser considerados pelo template, como por exemplo, arquivos CSS, imagens, JavaScripts e etc. Neste exemplo eu vou usar como decorator o arquivo /WEB-INF/decorators/main.jsp e vou excluir da "decoração" os arquivos de estilos, imagens e JavaScripts. O código do arquivo sitemesh3.xml fica assim:
<sitemesh>
<mapping decorator="/WEB-INF/decorators/main.jsp" />
<!-- Excluir o caminho da decoracao. -->
<mapping path="/images/*" exclue="true" />
<mapping path="/javascript/*" exclue="true" />
<mapping path="/styles/*" exclue="true" />
</sitemesh>
Para mais informações sobre filtros, acesse o link: da caelum ou da oracle. Ou ainda o livro "Use a cabeça: Servlets e JSP".
Em seguida, devemos definir no web.xml um filtro do Sitemesh que vai tratar todas as requisições e aplicar o template sobre elas.
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>Agora vou mostrar um código de exemplo para o arquivo main.jsp, que é o nosso decorator. Ele deve estar localizado no diretório /WEB-INF/decorators/ . Segue o código:
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" view="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" view="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" view="pt-BR" />
<link href="styles/default.css" rel="stylesheet">
<title>TemplateSitemesh3 - <sitemesh:write property="title" /></title>
<sitemesh:write property="head" />
</head>
<body>
<jsp:include page="template/header.jsp" />
<sitemesh:write property="body" />
<jsp:include page="template/footer.jsp" />
<!-- javascript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="scripts/jquery/jquery.js"></script>
</body>
</html>
Neste exemplo, eu mostro como referenciar um arquivo CSS e um JavaScript. Lembrando que no seu projeto devem ser alterados os caminhos para os arquivos relativos correspondentes. Vale o mesmo para os comandos jsp:include onde eu incluo o header e footer, que não são apresentados neste exemplo, mas ambos contêm código JSP comum.
A linha de código <sitemesh:write property="head" /> indica que ao "decorar" a página o sitemesh vai copiar o cabeçalho (head) da página corrente e colar na página "decorada" final. A mesma coisa acontece com o comando <sitemesh:write property="body" />, só que adicionando o conteúdo do corpo (body) da página corrente. Já a instrução <sitemesh:write property="title" /> copia o título da página sendo decorada para a tag title do head da página final.
Bom, acho que é só! Daqui pra frente é só criar as suas páginas de view (HTMLs e JSPs) normalmente e testar. É possível baixar o projeto do eclipse de exemplo do meu dropbox.
Qualquer dúvida ou comentário, é só falar!
Comentários
Postar um comentário