Artigo Java Magazine 48 - Layout na Web com Tiles e CSS

Clique aqui para ler esse artigo em PDF.

Layout na Web com Tiles e CSS

Maximizando o uso de templates na web

Como construir páginas bem-estruturadas, agradáveis e funcionais, mantendo o código simples, facilitando o reuso e sem abrir mão de recursos avançados

Alguns desenvolvedores web iniciantes costumam buscar designs visuais de alto impacto para seus sites, muitas vezes relegando aspectos mais importantes como uma navegação intuitiva ou a padronização no aspecto visual das páginas. Mas o fato é que, na internet, a praticidade e a funcionalidade valem mais do que designs sofisticados – o que é provado pelo sucesso de sites “minimalistas” como Amazon, YouTube e Google.

Afinal um site web não é como um anúncio televisivo, que será visto poucas vezes e depois substituído por uma campanha inteiramente nova. Sites e aplicações web têm uma vida longa, e estão sujeitos às mesmas necessidades de manutenção e evolução que um sistema de informações tradicional. E mesmo que o aspecto visual do site mude consideravelmente ao longo dos anos, a informação “antiga” tem que continuar acessível de forma prática e eficiente.

Há várias soluções baseadas na plataforma Java EE para a evolução do conteúdo e a formatação de um site web. Neste artigo, apresentamos o Apache Tiles (antes Struts Tiles) como solução para organização, padronização e estruturação da navegação e layout das páginas de um site. É importante destacar que o Tiles pode ser usado mesmo por quem prefere outro framework que não o Struts (de onde originou), por exemplo o JSF. Além disso, o Tiles vai muito além da geração de templates para menus, cabeçalhos e outros elementos comuns a todas as páginas de um site. Ele chega a oferecer recursos comparáveis com várias soluções de portais. Entretanto, um site eficiente e de fácil manutenção não terá sucesso se não oferecer um mínimo de “requinte” visual. Por isso apresentamos também uma pequena introdução ao CSS e o seu uso com o Tiles.

Espera-se do leitor conhecimento prévio de JSP 2.x e taglibs, mas não é preciso experiência com Struts, embora algum conhecimento específico sobre o framework e também sobre o JSTL ajude a compreender os exemplos mais avançados deste artigo. Os exemplos foram testados com o Tomcat 5.5 e o Struts 1.3.8, que ainda é de longe o framework web mais popular para Java EE (as mudanças relacionadas ao uso do Struts 2 seriam muito poucas dentro do escopo deste artigo).

Breve história do Tiles

Antes de iniciarmos os exemplos do artigo, vale a pena apresentar brevemente a história do Tiles. Originalmente, o Tiles foi criado como um plug-in do Struts 1.0, embora as suas primeiras versões pudessem ser usadas de forma isolada. Com o Struts 1.2, o Tiles foi incorporado como componente padrão do framework, e a opção de usá-lo de modo independente foi perdida.

Então, no desenvolvimento do Struts 1.3, e com a maturação dos planos para o Struts 2 – incorporando os desenvolvedores e o código do WebWork – decidiu-se que os principais plug-ins do Struts, especialmente o Tiles e o Validator, seriam desenvolvidos como projetos independentes, devido à sua aplicabilidade a outros frameworks, em especial ao Shale, outro descendente do Struts.

No momento da escrita deste artigo, o Tiles 2 apenas tinha acabado de entrar em beta, por isso escolhemos a versão estável mais recente. O código apresentado mostra o Tiles 1 junto ao Struts 1.3. Mesmo o Struts 2 (pelo menos até a versão 2.0.6) ainda incorpora o Tiles 1. Mas em breve o Tiles irá deixar de fazer parte da distribuição padrão do Struts e será necessário baixá-lo em separado.

Um modelo de navegação

A Figura 1 apresenta a estrutura de um site web típico. Todas as páginas deste site irão conter elementos comuns de título, rodapé, menus de navegação e outras áreas de mensagens ou notícias.