segunda-feira, 1 de abril de 2013

Criando um template para web site usando Sitemesh 3

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>

Todas as páginas html e jsp que serão criadas neste projeto deverão passar pelo filtro do Sitemesh que irá "decorar" as páginas com o decorator. Assim todas essas páginas não deverão conter (repetir) as partes comuns do template, tais como: header, footer, menu e etc.

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!

0 comentários:

Postar um comentário

Popular Posts

StackOverflow Profile


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