">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. 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 Esta página compartilha elementos comuns, como menus, rodapés, etc., </td></tr> /exemplo1/jsp.jsp Páginas JSP são páginas HTML que podem conter código Java dentro <p> Hoje prefere-se evitar o uso de scriptlets, movendo a maior parte <b>tags JSP</b> para a lógica de apresentação dentro da página. </td></tr> /WEB-INF/jsp1/menu.jsp .com/jsp/jstl/core" prefix="c" %> O download deste artigo contém uma única aplicação web (um pacote WAR) com todos os exemplos. O primeiro exemplo está na pasta /exemplo1, com arquivos auxiliares em /WEB-INF/jsp1. A página inicial da aplicação, /index.jsp, fornece uma relação com links para cada exemplo. Note que em alguns casos haverá páginas de um exemplo que serão reutilizadas por exemplos posteriores. Isso é feito para evitar a necessidade de se criar várias páginas com a mesma finalidade. Cada um dos exemplos é bem simples, contendo apenas o suficiente para ilustrar o ponto em questão, mas todos foram escritos com a preocupação de seguir algumas melhores práticas importantes. (Veja também o quadro “Melhores práticas de JSP”, que chama a atenção para alguns detalhes nos exemplos.) Voltando à aplicação simples da Listagem 1, vemos que a solução “JSP puro” não resolve todos os problemas de manutenção de um site web dinâmico. O motivo é que cada página do site terá que inserir os mesmos tags de inclusão, aninhados com os mesmos tags HTML de formatação, por exemplo tags de tabelas[1]. O resultado final é que cada página do site repete o layout padrão – e modificar este layout envolve mudar todas as páginas do site. Estruturando o site usando Tiles A incapacidade de o JSP puro separar padrões de layout das páginas individuais foi uma das principais motivações para a criação do Tiles. O Tiles é um mecanismo de templates para páginas web: ele permite a criação de modelos padronizados, que são completados com o conteúdo específico de cada página. O funcionamento do Tiles ficará mais claro com um exemplo típico de utilização, visto na Listagem 2. Este exemplo pode ser acessado nos downloads como /exemplo2. Listagem 2. Estrutura do site típico usando o Tiles. /exemplo2/index.jsp <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <h2>Sobre este exemplo</h2> <p> Esta página compartilha não apenas elementos comuns, como menus, rodapés e etc., com outras páginas deste exemplo, mas também um layout HTML em comum definido em separado. /exemplo2/tiles.jsp <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <h2>Sobre o Tiles</h2> <p> O Tiles é um plug-in para o popular framework web <b>Struts</b> que permite a definição de layouts de páginas pela composição de <i>tiles</i> ou ladrilhos <p> Entretanto, é muito fácil usar o Tiles mesmo que sua aplicação não seja baseada no Struts! /WEB-INF/web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...> <servlet> <servlet-name>action</servlet-name> <servlet-class>org.apache.struts.action.ActionServlet</servlet-class> <init-param> <param-name>config</param-name> <param-value>/WEB-INF/struts-config.xml</param-value> </init-param> <init-param> <param-name>chainConfig</param-name> <param-value>org/apache/struts/tiles/chain-config.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> ... 
<%@ 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>
com outras páginas deste exemplo, mas cada uma das páginas tem que
repetir os mesmos tags de layout de tabela.
<tr><td colspan="2">
<jsp:include page="/WEB-INF/jsp1/rodape.jsp"/>
</td></tr>
</table>
</html>
<%@ 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 o JSP</h2>
<p>
de <b>scriptlets</b> indicados por <% e %>.
do código Java para classes de controle e negócios, e utilizando
<tr><td colspan="2">
<jsp:include page="/WEB-INF/jsp1/rodape.jsp"/>
</td></tr>
</table>
</html>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun
<table><td><td bgcolor="#e0e0e0">
Menu<br>
<c:url var="index" value="/exemplo1/index.jsp"/>
<a href="${index}">Sobre o exemplo</a><br>
<c:url var="jsp" value="/exemplo1/jsp.jsp"/>
<a href="${jsp}">Sobre o JSP</a><br>
<p>
<c:url var="inicio" value="/index.jsp"/>
<a href="${inicio}">Voltar...</a><br>
</td></tr>
</table>
Quer ler esse conteúdo completo?
Tenha acesso completo
