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

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.

Figura 1. Uma estrutura típica de site web.

Não é difícil construir esta estrutura utilizando apenas recursos padrão do JSP, por exemplo o tag . Um exemplo é mostrado na Listagem 1.

Listagem 1. Estrutura de um site típico usando tags padrão do JSP.

/exemplo1/index.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<table>
<tr><td colspan="2">
  <jsp:include page="/WEB-INF/jsp1/titulo.jsp"/>
</td></tr>
<tr><td width="20%" valign="top">
  <jsp:include page="/WEB-INF/jsp1/menu.jsp"/>
</td><td width="80%">
  <h2>Sobre este exemplo</h2>
  <p>

Esta página compartilha elementos comuns, como menus, rodapés, etc.,
  com outras páginas deste exemplo, mas cada uma das páginas tem que
  repetir os mesmos tags de layout de tabela.

"

ATENÇÃO! A exibição deste artigo foi interrompida.

  Este é um post disponível para assinantes MVP

Este post também está disponível para assinantes da Java Magazine DIGITAL ou para quem possui Créditos DevMedia.  Clique aqui para saber mais!

Saiba como acessar este post através de Créditos DevMedia:

Assinatura de Créditos – Aqui este post custa R$ 1,47
Com esse plano você compra R$ 180,00 em créditos e ganha, em média, 80% de desconto no preço do post.  
Assine agora

Plano ocasional - Aqui este post custa: R$ 1,96 (assinante) ou R$ 2,45 (não-assinante)
Você compra um mínimo de R$ 60,00 em créditos e ganha, em média, 50% de desconto no preço do post.  
Compre agora

Plano conveniência – Neste plano este post custa R$ 4,90
Neste plano você compra somente um post, pagando seu preço sem desconto.  
Compre agora