Bem vindo à Parte 4 da série de artigos sobre o @ModelAttribute.
Nesse artigo, discutiremos sobre o framework Tiles e sua integração com o Spring 3.0 MVC. Adicionaremos suporte ao Tiles em nossa aplicação HelloWorld com Spring que criamos nos artigos anteriores. Recomendo fortemente que você leia os artigos anteriores e baixe o código fonte da aplicação exemplo.
Introdução ao Tiles 2
Atualmente, websites são geralmente divididos em pedaços de modelos reutilizáveis que são renderizados entre páginas web diferentes. Por exemplo, um site contendo cabeçalho, rodapé, menu, etc. Esses itens permanecem inalterados em todas as páginas do website, resultando em uma aparência comum. É muito difícil codificar essas partes em cada página e depois ter que alterar todas elas quando uma alteração nesses pedaços é necessária. A menos que você use um mecanismo de modelagem; nesse caso, criamos uma página de cabeçalho, rodapé e menu e incluímos esses pedaços em cada página.
O plugin Tiles permite tanto modelagem quando modularização. De fato, os dois mecanismos são similares: você define partes de uma página (um “Tile”) que podem ser montados para formar uma outra parte ou uma página completa. Uma parte pode receber parâmetros, permitindo conteúdo dinâmico, e pode ser visualizado como um método da linguagem Java. Tiles é um sistema de modelagem usado para manter um visual consistente por toda as páginas web de uma aplicação web. Ele aumenta a reusabilidade do modelo e reduz a duplicação de código.
Um layout comum para o website é definido em um arquivo de configuração central e esse layout pode ser estendido por todas as páginas web da aplicação web.
O layout de nossa aplicação
Nosso objetivo é adicionar um Cabeçalho, Rodapé e um menu a nosso aplicação HelloWorld usando o Spring 3. Abaixo segue o layout da aplicação.
Arquivos JAR necessários
Para poder adicionar suporte a Tiles em nossa aplicação Spring 3, precisaremos de alguns poucos arquivos JAR. Abaixo segue a lista de JARs usados em nosso exemplo. Adicione esses JARS no diretório WEB-INF/lib.
Os arquivos JAR destacados na lista acima são os novos JARs que serão adicionados no projeto para a integração com o Tiles.
Configurando o framework Tiles no Spring MVC
Para configurar Tiles, uma entrada para o bean TilesConfigure precisa ser criada no arquivo spring-servlet.xml. Abra o arquivo spring-servlet.xml do diretório WEB-INF e adicione o código abaixo, localizado em as tags <beans> </beans>.
Arquivo: /WebContent/WEB-INF/spring-servlet.xml
<bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <property name="viewClass"> <value> org.springframework.web.servlet.view.tiles2.TilesView </value> </property></bean><bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer"> <property name="definitions"> <list> <value>/WEB-INF/tiles.xml</value> </list> </property></bean> |
Um arquivo de configuração chamado /WEB-INF/tiles.xml é passado como argumento na definição de bean acima. Esse arquivo contém as definições do Tiles para nossa aplicação web.
Create a file tiles.xml in WEB-INF folder and copy following code into it.
Arquivo: WebContent/WEB-INF/tiles.xml
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN" "http://tiles.apache.org/dtds/tiles-config_2_0.dtd"><tiles-definitions> <definition name="base.definition" template="/WEB-INF/jsp/layout.jsp"> <put-attribute name="title" value="" /> <put-attribute name="header" value="/WEB-INF/jsp/header.jsp" /> <put-attribute name="menu" value="/WEB-INF/jsp/menu.jsp" /> <put-attribute name="body" value="" /> <put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" /> </definition> <definition name="contact" extends="base.definition"> <put-attribute name="title" value="Contact Manager" /> <put-attribute name="body" value="/WEB-INF/jsp/contact.jsp" /> </definition></tiles-definitions> |
No arquivo tiles.xml temos que definir uma definição base para o modelo. Esse layout contém atributos como Header, Title, Body, Menu e Footer. O layout é então estendido e novas definições para a página Contact são criadas. Temos que sobrecarregar o layout padrão e mudar o conteúdo das páginas Body e Title.
Criando o View – Os JSPs
Definiremos o modelo de nossa aplicação web em um arquivo JSP chamado layout.jsp. Esse modelo conterá diferentes segmentos de páginas web (Cabeçalho, Rodapé, Menu, etc). Cire quatro novos arquivos JSP chamados layout.jsp, header.jsp, menu.jsp e footer.jsp e copie o conteúdo abaixo em cada um deles.
Arquivo: WebContent/WEB-INF/jsp/layout.jsp
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title><tiles:insertAttribute name="title" ignore="true" /></title></head><body><table border="1" cellpadding="2" cellspacing="2" align="center"> <tr> <td height="30" colspan="2"><tiles:insertAttribute name="header" /> </td> </tr> <tr> <td height="250"><tiles:insertAttribute name="menu" /></td> <td width="350"><tiles:insertAttribute name="body" /></td> </tr> <tr> <td height="30" colspan="2"><tiles:insertAttribute name="footer" /> </td> </tr></table></body></html> |
Arquivo: WebContent/WEB-INF/jsp/header.jsp
<h1>Header</h1> |
Arquivo: WebContent/WEB-INF/jsp/menu.jsp
<p>Menu</p> |
Arquivo: WebContent/WEB-INF/jsp/footer.jsp
<p>Copyright © ViralPatel.net</p> |
Isso é tudo pessoal
Compile e execute a aplicação no Eclipse e visualize que o cabeçalho, o menu e o rodapé foram aplicados apropriadamente.
