artigo java magazine 51- Decorando a web com Sitemesh

Esse artigo faz parte da revista Java Magazine edição 51. Clique aqui para ler todos os artigos desta edição.

Clique aqui para ler esse artigo em PDF.                                                                                 

Decorando a web com Sitemesh

Estabeleça o layout de suas paginas de forma simples

Nesse artigo apresentamos o Sitemesh, que permite obter um layout consistente em suas aplicações web de forma simples. Com esse framework open source é possível também compor sites com base em partes menores, estruturando-os como portais.

O problema

Quando várias tecnologias web (JSP/ Servlets, PHP, HTML etc.) são utilizadas por uma empresa para compor seus sites de internet ou intranet, fica difícil manter um layout padronizado entre todas as tecnologias. Mesmo quando apenas uma tecnologia é utilizada (Java EE, por exemplo), a tarefa de manter um layout consistente também não é nada fácil. Tais problemas se agravam quando o layout está espalhado por centenas ou milhares de páginas, o que torna muito trabalhoso realizar mesmo as alterações mais simples. Trocar as cores que representam a empresa ou realizar uma campanha de Natal, por exemplo, mudando o layout de um conjunto das páginas, torna-se uma tarefa onerosa. Sem uma forma de separar o layout do conteúdo, também fica difícil compor páginas a partir de outras páginas. Quando isso é feito, são necessárias adaptações, especialmente no código HTML, o que não é o ideal. Deveria ser possível inserir páginas em outras, formando composições, sem que as páginas “saibam” que estão sendo compostas e possam ser usadas de maneira independente.

A solução

O framework Sitemesh permite separar o layout das páginas do seu conteúdo. Ele funciona independentemente da tecnologia utilizada, através da definição de decorators. Esses decorators atuam como templates, permitindo a inserção do conteúdo variável em pontos específicos. Ao se requisitar uma página, o conteúdo dela é extraído e analisado e é então efetuada uma junção das partes desse conteúdo com o decorator. Ou seja, os pontos relevantes obtidos ao analisar a página são inseridos em partes pré-determinadas, fazendo com que o resultado final contenha os dados da página, mas com o layout definido pelo decorator. Com o Sitemesh podemos decorar páginas sem que elas “saibam” que serão decoradas. Isso facilita a manutenção, pois possibilita centralizar o código necessário para o layout em um ponto único: o decorator. Além da decoração, o Sitemesh permite formar páginas a partir de outras páginas ou de outras composições. Geralmente a composição das páginas acabará em uma estrutura similar a uma árvore, contendo páginas simples ou outras composições. O Sitemesh foi baseado em conceitos de design patterns estruturais bem conhecidos: Decorator e Composite. Veja o quadro “Baseado em design patterns” que faz uma revisão breve dos patterns que inspiraram o framework e mostra como eles se encaixam na arquitetura do Sitemesh. Observe que tais patterns são somente uma base para entender o funcionamento do framework, já que apenas as idéias e conceitos dos patterns foram aplicados.

Como funciona o Sitemesh?

Veremos a seguir, de forma mais detalhada, como o Sitemesh realiza tanto a decoração das páginas quanto a composição.

Decoração

A decoração realizada pelo Sitemesh ocorre através de um Servlet Filter. Isso proporciona vantagens, pois é possível decorar até mesmo páginas estáticas. Quando uma página é interceptada pelo filtro do Sitemesh, ocorre uma série de eventos. Veja um resumo:

1. Após o processamento da requisição pelo objeto responsável (servlet, action, JSP etc.), o HTML resultante é obtido.

2. O Sitemesh solicita o parse do conteúdo:

o que era texto HTML se transforma em uma estrutura de objetos em memória. Essa estrutura é encapsulada em um objeto que implementa uma subinterface de com.opensymphony.module.sitemesh.Page. Para páginas HTML, especificamente, é implementada a interface HTMLPage, do mesmo pacote. O quadro “Sitemesh e performance” discute as implicações que essa estratégia pode trazer para suas aplicações.

3. Um DecoratorMapper (objeto responsável por associar um decorator à requisição) é consultado para determinar  qual decorator deve ser aplicado.

4. O filtro do Sitemesh redireciona para o decorator, que na verdade é uma página JSP com marcadores (isso, claro, quando usamos JSP – podemos também usar Velocity ou FreeMarker). Os marcadores na página indicam onde os trechos obtidos no parse do HTML, realizado no passo 2, serão inseridos.

5. Os elementos que atuam como marcadores (tags, no caso dos JSPs) são substituídos pelo conteúdo presente no objeto HTMLPage (disponível em memória). A resposta é finalmente enviada para o cliente, decorada. A Figura 1 ilustra, de forma simplificada, o processo de decoração do Sitemesh.                                                                                 

Figura 1. Processo de decoração do Sitemesh