Arquivos de sites

Parte 4 – Tutorial do Plugin Struts 2 Tiles com exemplo no Eclipse

Bem vindos à parte 4 de uma série de 7 partes, onde nós passaremos por diferentes aspectos do Framework Struts2 com alguns exemplos úteis. Na parte anterior nós passamos por Framework de validação do Struts2. Nós vimos como é fácil integrar validação na sua aplicação Struts2.

Nesta parte vamos discutir sobre o Framework Tile e a sua integração com Struts2. Nós vamos adicionar o suporte Tiles a nossa aplicação de Struts ‘HelloWorld’ que nós criamos anteriormente. Eu recomendo você passar pelos artigos anteriores e baixar o código fonte da nossa aplicação de exemplo.

Introdução ao Tiles 2

Atualmente, um website é geralmente dividido em pedaços de templates que são renderizados entre diferentes páginas web. Por exemplo, um site contendo um header (cabeçalho), footer (rodapé), menu e etc. Estes itens permanecem os mesmos por todo o site e dando  um visual padrão. Isso é muito difícil de codificar em cada página web e se depois uma modificação é necessária, então todas as páginas precisam ser modificadas. Por isso nós usamos o mecanismo de Templatization. Nós criamos uma página padrão de Header, Footer, Menu e etc., e a incluímos em cada página.

O plugin Tile premite ambos templating e componentização. De fato, ambos mecanismos são similates: você define partes da página (uma ‘Tile’/’Telha’) que você junta para construir outra parte ou uma página inteira. Uma parte pode receber parâmetros, permitindo um conteúdo dinâmico, e pode ser visto como um método na linguagem Java. Tiles é um sistema de templating usado para manter um visual consistente através de todas as páginas web de uma aplicação web. Isso aumenta a reusabilidade do template e reduz a duplicação de código.

Um layout comum de website é definido em um arquivo de configuração central e esse layout pode ser estendido através de todas as páginas web da aplicação.

Layout da nossa Aplicação

Nossa meta é adicionar um Header, Footer e Menu ao nossa aplicação StrutsHelloWorld.
Abaixo segue o layout da mesma.
struts2-tiles-layout

Arquivos JAR requeridos

A fim de adicionar o suporte Tiles a nossa aplicação Struts2, nós precisaremos de alguns arquivos JARs.
Abaixo segue a lista de JARs do nosso exemplo. Adicione estes JARs na pasta WEB-INF/lib.
struts2-tiles-jar-files

Configurando o Tiles no web.xml

Para configurar o Tiles, uma entrada  de listener tem que ser criada no web.xml. Abra o web.xml na pasta WEB-INF e adicione o seguinte código.

<listener>

    <listener-class>

        org.apache.struts2.tiles.StrutsTilesListener

    </listener-class>

</listener>

<context-param>

    <param-name>tilesDefinitions</param-name>

    <param-value>/WEB-INF/tiles.xml</param-value>

</context-param>

O código acima configure o listener do Tiles no web.xml. Um arquivo de configuração de entrada /WEB-INF/tiles.xml é passado como argumento. Este arquivo contém a definição do Tiles para sua aplicação web.

Crie um arquivo tiles.xml na pasta WEB-INF e copie o seguinte código dentro dele.
struts2-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="baseLayout" template="/BaseLayout.jsp">

        <put-attribute name="title" value="" />

        <put-attribute name="header" value="/Header.jsp" />

        <put-attribute name="menu" value="/Menu.jsp" />

        <put-attribute name="body" value="" />

        <put-attribute name="footer" value="/Footer.jsp" />

    </definition>

    <definition name="/welcome.tiles" extends="baseLayout">

        <put-attribute name="title" value="Welcome" />

        <put-attribute name="body" value="/Welcome.jsp" />

    </definition>

    <definition name="/customer.tiles" extends="baseLayout">

        <put-attribute name="title" value="Customer Form" />

        <put-attribute name="body" value="/Customer.jsp" />

    </definition>

    <definition name="/customer.success.tiles" extends="baseLayout">

        <put-attribute name="title" value="Customer Added" />

        <put-attribute name="body" value="/SuccessCustomer.jsp" />

    </definition>

</tiles-definitions>

Aqui no tile.xml nós temos que definir um template baseLayout. Este layout contém atributos como Header, Title, Body, Menu e Footer. O layout é depois estendido, e novas definições para as páginas Welcome e Customer são definidas. Nós temos que substituir o layout padrão e mudar o conteúdo de Body e Title.

Criando os JSPs

struts-2-tiles-layout-jsp

Nós definiremos o template para nossa aplicação web em uma arquivo JSP chamado BaseLayout.jsp. Este template irá conter diferentes segmentos da página (Header, Footer, Menu etc). Crie 4 novos arquivos JSP BaseLayout.jsp, Header.jsp, Menu.jsp and Footer.jsp e copie o seguinte conteúdo em cada um deles.

BaseLayout.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>

Header.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<h2>Struts2 Example - ViralPatel.net</h2>

Menu.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<s:a href="customer-form">Customer</s:a>

Footer.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

Copyright &copy; ViralPatel.net – Tradução SpigandoEAprendendo.wordpress.com

Modificações no Struts.xml

No struts.xml nós definimos a tag de resultado (result) que mapeia uma ação específica com uma página JSP. Agora nós modificaremos isso e mapearemos o resultado com Tiles. Abaixo segue o conteúdo do arquivo struts.xml.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC

    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

    "http://struts.apache.org/dtds/struts-2.0.dtd">

 

<struts>

    <constant name="struts.enable.DynamicMethodInvocation"

        value="false" />

    <constant name="struts.devMode" value="false" />

    <constant name="struts.custom.i18n.resources"

        value="ApplicationResources" />

 

    <package name="default" extends="struts-default" namespace="/">

        <result-types>

            <result-type name="tiles"

                class="org.apache.struts2.views.tiles.TilesResult" />

        </result-types>

        <action name="login"

            class="net.viralpatel.struts2.LoginAction">

            <result name="success" type="tiles">/welcome.tiles</result>

            <result name="error">Login.jsp</result>

        </action>

        <action name="customer"

            class="net.viralpatel.struts2.CustomerAction">

            <result name="success" type="tiles">/customer.success.tiles</result>

            <result name="input" type="tiles">/customer.tiles</result>

        </action>

        <action name="customer-form">

            <result name="success" type="tiles">/customer.tiles</result>

        </action>

    </package>

</struts>

O struts.xml agora define um novo tipo de Resultado pelo Tiles. Esse tipo de resultado é usado na tag <result> para diferentes ações. Também observe que nós vamos definir uma nova ação customer-form. Esta é apenas uma declaração vazia para redirecionar o Usuario para página do formulário Customer quando ela clica no link Customer no menu.

É isso ai pessoal

Compile e execute a aplicação no Eclipse e veja que o header, menu e o footer estão apropriadamente aplicados.

Página de Boas Vindas com Tiles
struts-2-welcome-page-tiles

Página Customer com Tiles
struts2-tiles-customer-page

Página de Sucesso Customer com Tiles
struts2-customer-added-tiles

Download do código fonte:
Clique aqui para fazer o download do código fonte (sem os JARs) (11KB)

Fonte: viralpatel.net – Viral Patel

Anúncios